Contenido

Visión general

La tipografía es diseño de comunicación, que es un elemento importante del diseño de la interfaz de usuario. La tipografía es la técnica de organizar tipos, símbolos, números y espacios en blanco para hacer que el lenguaje escrito sea legible y atractivo cuando se muestra. En la interfaz de usuario de oracleAlta, solo los atributos de fuente, tamaño de fuente, color de fuente y longitud de línea se analizan dentro del ámbito más amplio de la tipografía.

Perfil delantero

La interfaz de usuario de oracleAlta se basa en un conjunto de fuentes del sistema sans-serif. La siguiente tabla enumera la fuente del sistema recomendada para cada sistema operativo de destino.

SO Fuente
Ventanas IU de Segoe
Pre-OS9 – OS X v10.10 (Yosemite) Helvetica Neue
OS X v10.11 (El Capitan) y OS9 para dispositivos móviles SF UI
Androide Roboto

Al confiar en una fuente del sistema operativo disponible, la tipografía de la interfaz de usuario de oracleAlta puede aprovechar una gama más amplia de pesos de fuente. Cuando se ejecuta correctamente, la gama más amplia de pesos permite una estructura de página más limpia y agrupaciones funcionales de controles de IU y datos de usuario. Lo siguiente representa el uso general de peso de fuente por tamaño de fuente en todas las familias de fuentes del sistema.

Ilustración general del peso de la fuente por tamaños de fuente en las familias de fuentes del sistema.

Si la fuente del sistema predeterminada especificada no está disponible o no está especificada para un sistema operativo, la regla CSS es una cascada a una fuente sans-serif disponible en el cliente. Esto garantiza la elección de una fuente que se muestra bien y proporciona un nivel de coherencia visual en toda la interfaz de usuario.

Tamaño de fuente

El tamaño de fuente predeterminado del cuerpo de la interfaz de usuario de oracleAlta es de 14 píxeles, a diferencia del valor predeterminado del navegador de 16 píxeles típico. Sin embargo, dependiendo de los casos de uso de la aplicación, la interfaz de usuario de oracleAlta también permite un tamaño de fuente de cuerpo de 12px o 16px.

Como práctica, la interfaz de usuario de oracleAlta especifica el tamaño de fuente en rem. Con rem, las fuentes más pequeñas, como las del pie de página, y las más grandes, como las del encabezado, se dan en relación con el tamaño de la fuente del cuerpo.

Cuando el tamaño de fuente del cuerpo de la interfaz de usuario de oracleAlta es 14px (0.875em), se utilizan los siguientes valores rem:

  • 1 rem: tamaño de fuente del cuerpo
  • 0.857 rem: tamaño de fuente más pequeño
  • 5.143 rem: tamaño de fuente más grande

Si se cambia el tamaño de fuente del cuerpo predeterminado para la interfaz de usuario de oracleAlta, por ejemplo, al predeterminado del navegador, los elementos HTML basados ​​en valores rem específicos se vuelven más grandes. Por ejemplo, H1 se establece en 34 px cuando el tamaño de la fuente del cuerpo es de 14 px. H1 es 39px cuando el tamaño de la fuente del cuerpo es el predeterminado del navegador de 16px.

Los tamaños entre la fuente más pequeña y la más grande se eligen para adaptarse al caso de uso. Por conveniencia, un Se proporciona una ilustración de cada estilo junto con un uso recomendado para cada tamaño de fuente.

Color de fuente

La interfaz de usuario de oracleAlta proporciona un conjunto de colores de fuente predeterminados para el texto del cuerpo, avisos, encabezados, etiquetas, enlaces, etc.. Hay casos específicos en los que la interfaz de usuario de oracleAlta permite un color de texto personalizado. Estos se limitan a encabezamiento y cuerpo texto. En la selección de un color de fuente para esos dos casos limitados, se proporciona la siguiente guía.

La siguiente imagen es un ejemplo de uso de tamaños de encabezado y colores personalizados disponibles para construir una presentación que llame la atención del usuario en orden de importancia de cada elemento.

Ilustración de ejemplo de tamaños de encabezado y colores de texto personalizados disponibles

La flexibilidad del tamaño y el color del encabezado es aplicable a cualquier parte del diseño de una página.

Ilustración de diferentes tamaños y colores de fuente utilizados para un encabezado en regiones coloreadas

La siguiente imagen muestra diferentes tamaños y colores de encabezado utilizados para llamar la atención sobre diferentes objetos en la página.

Ilustración de ejemplo de la tipología de la interfaz de usuario de  oracleAlta aplicada al diseño de páginas

Las longitudes de texto que superan los 40 a 60 caracteres en varias líneas pueden presentar una experiencia de lectura desagradable. Esto puede ocurrir en situaciones con un texto de ayuda extenso o en publicaciones largas en las redes sociales. A veces es necesario presentar un texto extenso, por ejemplo, para brindar suficiente asistencia al usuario.

  • Como regla general, utilice un ajuste de texto de 60 caracteres para proporcionar una longitud de lectura cómoda.

La interfaz de usuario de oracleAlta utiliza un amplio espacio alrededor del texto y otros componentes como sello distintivo de su diseño. El relleno y los márgenes proporcionan el espacio entre los componentes. El uso de un valor fijo para el relleno y los márgenes funciona para mantener el ritmo vertical, de modo que los elementos parezcan tener un espaciado vertical y una alineación horizontal consistentes.

  • Los valores estándar para el relleno y los márgenes son 5px, 10px y 20px. Esta flexibilidad, junto con el tamaño de fuente, el color y la longitud de la línea, pueden proporcionar una experiencia más adecuada para el caso de uso de la aplicación y la pantalla del dispositivo.

Pares de encabezados

Los encabezados suelen aparecer solos. Sin embargo, hay ocasiones en las que el diseño requiere un subtítulo inmediato. La amplia gama de tamaños de encabezado en la interfaz de usuario de oracleAlta (20px – 72px) puede resultar un desafío al decidir qué encabezado y subencabezado emparejar. El desafío de cumplir con los requisitos de accesibilidad cuando se utilizan encabezados en un contenedor de color puede dificultar aún más la elección de pares de encabezados. Para enfrentar ese desafío y obtener los mejores resultados, se brinda la siguiente guía.

Pares de encabezados recomendados

No se recomienda ningún par para un tamaño de encabezado de 72 px.

Tenga en cuenta que cuando un encabezado se empareja con un subtítulo de menos de 24 píxeles, un recipiente de color debe producir una relación de contraste de color más alta que cuando encabezado mayor de 24px se usa solo.

Ilustración del contenedor de encabezado con un contraste de color más alto cuando se empareja con un subtítulo de fuente más pequeño

Valores de encabezado

Hay ocasiones en las que se agrega un valor a un encabezado estático para proporcionar un contexto más claro al usuario. Por ejemplo, en una página que hace referencia a los empleados, el encabezado de la página, «Empleado», se agrega en tiempo de ejecución con el nombre de cada empleado específico. El nombre específico del empleado es el valor del encabezado. Cuando se utiliza este enfoque, la interfaz de usuario de oracleAlta recomienda un tratamiento tipográfico específico. Específicamente, el valor del encabezado, precedido por dos puntos (:), tiene un peso más ligero que el encabezado estático.

Ilustración de los valores del encabezado en contenedores blancos y de colores con un contraste de color más alto cuando se empareja con un subtítulo de fuente más pequeño

Recursos adicionales

Fuente y pesos del sistema operativo

Consulte la ilustración de la tipografía de la interfaz de usuario de oracleAlta para cada sistema operativo

Colores de fuente accesibles sobre fondos blancos o gris claro

Algunos casos de uso requieren el uso de un color de fuente personalizado. En la interfaz de usuario de oracleAlta, los colores de fondo de una página que puede tomar una opción de color de fuente son los que se muestran en la imagen a continuación.

Opciones de color de fondo de la interfaz de usuario de  oracleAlta para las opciones de fuentes de colores

En esos fondos, los siguientes colores de fuente cumplen con la accesibilidad.

Opciones de fuente de color de la interfaz de usuario de  oracleAlta en blanco o en varios fondos grises

Cada celda contiene la relación de contraste de color y el valor hexadecimal de color de 6 dígitos, respectivamente.

Regiones de color accesibles para fuente blanca grande

Hay casos de uso para regiones coloreadas en las que se usa un tamaño de fuente grande; ejemplos comunes son los banners Hero en la parte superior de la página o los contenedores de encabezados de colores. Se requiere cuidado en la elección del fondo cuando se usa un color de fuente blanco (#FFFFFF). Es decir, la relación de contraste de color entre el color de la fuente y su fondo es lo suficientemente alta para cumplir con los criterios de accesibilidad. Generalmente, cuanto más grande es la fuente, menor es la relación de contraste necesaria.

Cuando el tamaño de la fuente es superior a 24 píxeles, normalmente para los encabezados de página y los banners de héroe, se recomiendan los siguientes colores.

Opciones de región de color de la interfaz de usuario de  oracleAlta para fuentes grandes

Cada celda contiene la relación de contraste de color y el valor hexadecimal de color de 6 dígitos, respectivamente.

Regiones de color accesibles para colores de fuente pequeños predeterminados

Hay casos de uso para regiones coloreadas en las que el tamaño de fuente es pequeño. Una vez que este ejemplo está en el Área auxiliar. Cuando el tamaño de fuente es menor a 24 px, se necesita una relación de contrato de color más alta que con tamaños de fuente mayores a 24 px. Hay un pequeño conjunto de colores de fondo que funcionan bien con los colores de fuente predeterminados de la interfaz de usuario de oracleAlta para el texto del cuerpo, los enlaces, etc.

Opciones de región coloreada de  oracleAlta UI para colores de fuente predeterminados

Regiones de color accesibles para fuente blanca pequeña

Sin embargo, cuando se necesita una gama más amplia de colores de fondo para tamaños de fuente más pequeños, la interfaz de usuario de oracleAlta recomienda un color de fuente blanco (#FFFFFF) con cualquiera de los siguientes colores de fondo.

Opciones de región de color de la interfaz de usuario de  oracleAlta para fuentes grandes

Cada celda contiene la relación de contraste de color y el valor hexadecimal de color de 6 dígitos, respectivamente. Debido a que el color de la fuente está limitado al blanco, la aplicación de regiones coloreadas para texto pequeño se limita a algunos elementos de la interfaz de usuario, por ejemplo, texto de sugerencia, encabezados, valores de texto de solo lectura.