Contenidos
Roboto y Noto
Desde el lanzamiento de Ice Cream Sandwich, Roboto es la tipografía estándar en Android. Con Froyo, el estándar que se empezó a utilizar en Android y es el que se utiliza para todos los lenguajes no soportados por Roboto. Noto es también la fuente estándar para todos los lenguajes de Chrome OS.
Para dar soporte a todos los lenguajes del mundo, Google recomienda utilizar Roboto para Latin, Greek y Cyrillic, mientras que se debe utilizar Noto para los demás.
Roboto ha sido diseñada y refinada para funcionar correctamente a lo largo de todas las plataformas soportadas. Es ligeramente más ancha y redondeada, dando una mayor claridad y haciendo de ella una fuente más optimista que el resto.
Las métricas verticales de Noto son compatibles con Roboto.
Uso de varios medios
Roboto soporta lenguajes que usen scripts en Latin, Greek y Cyrillic, como pueden ser el inglés, francés, griego y ruso. Además, Roboto se extiende para soportar todos los caracteres de esos lenguajes definidos en Unicode 7.0. El número de caracteres soportados se ha duplicado en comparación con los anteriores lanzamientos, de los 2.000 a los 4.000 caracteres.
Noto cubre la mayor parte de los lenguajes existentes, incluyendo el inglés, griego, ruso, árabe, hebreo, chino, japones, coreano (CJK), etc.
Tipos de fuente
Roboto tiene seis tipos diferentes: Delgado, Ligero, Regular, Medio, Negrita y Negro (Thin, Light, Regular, Medium, Bold, and Black).
Noto Sans CJK tiene siete tipos diferentes: Delgado, Ligero, Semi-Ligero, Regular, Medio, Negrita y Negro (Thin, Light, DemiLight, Regular, Medium, Bold, and Black). El peso de Noto Regular es el mismo que de Roboto Regular.
Las fuentes de Noto para Thai, Devanagari y otros lenguajes tienen los tipos Regular y Negrita (Regular and Bold).
Fuentes optimizadas
Este tipo de fuentes están optimizadas para funcionar correctamente en dispositivos con pantallas de baja resolución. Una fuente optimizada, por ende, ocupa más espacio que una fuente no optimizada.
Tanto Roboto como Noto tienen versiones tanto optimizadas como sin optimizar. Google recomienda utilizar:
- Utilizar la versión no optimizadas en Android y Mac OS X en las cuales no se implementen consejos.
- Utilizar la versión optimizada en Chrome OS, Windows y Linux.
Prioridad de las fuentes
Para Android y la web, se debe utilizar en este orden de prioridad las fuentes: Roboto, Noto y por último sans-serif.
Estilos estándar
Las guías de diseño tipográficas se basan en tres categorías de los lenguajes.
- Inglés y los que son como el inglés: Latin (excepto Vietnamita), griego, cirílico, hebreo, armenio y georgiano.
- Altura: Los lenguajes que requieren una línea extra de altura para acomodarse a los glifos más grandes. Se incluyen los lenguajes del sur y sureste asiático, medio y oeste. como el árabe, el hindú, telugu, tailandés y vietnamita.
- Densidad: Los lenguajes que requieren de una línea extra de altura para acomodarse a los glifos más grandes pero tienen metricas diferentes de altura. Se incluyen el chino, japonés y coreano.
Escala tipográfica y estilos básicos
Demasiados tipos de pantalla y estilos al mismo tiempo pueden destrozar cualquier layout. Una escala tipografía tiene un conjunto límite de tipos de tamaño diferentes que funcionan bien en cualquier cuadrícula de layouts. El conjunto básico de estilos están basados en una escala tipográfica de 12, 14, 16, 20 y 34.
Inglés o similares: Esos tamaños y estilos son elegidos para equilibrar la densidad de contenido y la comodidad de lectura bajo ciertas condiciones habituales de uso. Los diferentes tipos de tamaño se especifican con sp (scaleable pixels) para habilitar modos de mayor tamaño gracias a la accesibilidad.
Altura:
- Tipo: Usa Regular ya que Medium no está disponible en Noto. Además, Google recomienda evitar las Negritas, basado en la retroalimentación de hablantes nativos que sugieren que la Negrita es demasiado pesada.
- Tamaño de fuente: Para los títulos, el tamaño de fuente es 1px más grande que el especificado para el inglés. Para estilos más grandes que un título, el tamaño del inglés es el adecuado.
Densidad:
- Tipo: Ya que Noto CJK tiene 7 tipos que coinciden con Roboto, usa esos mismos.
- Tamaño de fuente: Para los títulos, el tamaño de fuente es 1px más grande que el especificado para el inglés. Para estilos más grandes que un título, el tamaño del inglés es el adecuado.
Inglés y similares: Entre todos los factores, el texto que aparece en la barra de la app debería usar el estilo Title, Medium 20sp.
Hay ciertos escenarios donde se debería utilizar el estilo Subhead en lugar del estilo Body el cual es más pequeño. Algunos de esos lugares son aquellos donde la información se presenta en forma de pequeños fragmentos o cuando los títulos se combinan con las líneas de texto en estilo Body.
El estilo Button (Medium 14sp, todas las letras en mayúsculas) es el que se utiliza en todos los botones, si son de tinta o material.
Colores básicos y contraste
Evidentemente, si el texto tiene el mismo color que el fondo, será difícil de leer. El texto con mucho contraste puede también ser difícil de leer ya que puede deslumbrar. Este problema se acentúa especialmente cuando se utiliza textos claros sobre fondos oscuros.
El texto debería mantener un contraste mínimo de al menos 4.5:1 (calculado en función de los valores de luminancia) para mantener una buena legibilidad. Un ratio de 7:1 es el idóneo.
Esas combinaciones de colores también se consideran para los ratios de contraste para aquellos usuarios con una respuesta de color atípica.
Letras grandes y letras dinámicas
Para la mejor experiencia de usuario, utiliza letras dinámicas en lugar de confiar solo en los tamaños de letra pequeños o permite el truncamiento de textos más grandes.
Las letras grandes aplicadas correctamente pueden hacer que las apps sean más interesantes, diferenciando los layouts y ayudando a los usuarios a decodificar el contenido rápidamente.
Las letras dinámicas habilitan las letras grandes cuando la longitud del texto es desconocida. Los tamaños dinámicos son seleccionados desde la escala tipográfica y basándose directamente en la escala disponible y el tamaño del contenido estimado.
Altura de línea
Para lograr una legibilidad y ritmo apropiados, las alturas de línea se determinan basándose en cada tamaño y peso individual de los estilos. El ajuste de línea solo se aplica a Body, Subhead, Headline y al peso. Los demás estilos existen únicamente como líneas simples e individuales.
Inglés y similares: ver imagen
English and English-like: see image.
- Altura: La altura de línea es de 0.1 más grande para el Body 1 y el Subhead 1. En los textos en inglés y similares, un espacio entre dos líneas es evidente que es un espacio en blanco. En los grupos de textos altos, este espacio no es suficiente. Para Body 1 y Subhead 1, el cual tiene una altura relativamente pequeña en inglés, la falta de espacio es obvia. Por tanto, el espacio necesitado se debe incrementar para asegurar el espacio entre líneas el cual es visualmente similar a los similares al inglés.
- Las alturas de línea muy pequeñas para Title y los estilos más grandes se ajustan para evitar el solapamiento de caracteres entre las líneas.
- Densidad: la altura de línea es 0.1 más grande para todos los estilos. CJK utiliza el cajón entero, mientras que el inglés utiliza solo una porción del mismo – a menudo una porción más pequeña abajo de la altura en X. Por tanto, el actual espacio entre líneas es más pequeño para CJK cuando la altura de línea es la misma en conjunto. Para lograr el mismo diseño en inglés con CJK, la altura de línea necesita ser más grande que en inglés.
Altura de línea
Caracteres y longitud de línea
Considera este aviso sobre la legibilidad y la longitud de línea del instituto de Baymard:
“Deberías tener alrededor de 60 caracteres por línea si quieres que haya una buena experiencia de lectura. Tener la cantidad correcta de caracteres en cada línea es la clave de la legibilidad de tu texto.”
“Demasiada anchura – si una línea de texto es demasiado larga, el ojo del usuario tendrá un tiempo largo para enfocar el texto. Esto es porque dicha longitud dificulta saber donde empieza y termina la línea. Es más, puede ser difícil seguir leyendo la línea correcta en bloques de texto grandes.”
“Demasiado estrecho – si una línea es demasiado corta el ojo tendrá que viajar atrás a menudo, rompiendo el ritmo de lectura. Líneas demasiado cortas también provocan estrés en las personas, lo que conlleva que ellos empiecen la siguiente línea antes de terminar la actual (pudiendo saltar palabras potencialmente importantes).”
Fuente: “Readability: the Optimal Line Length,”
Seguimiento y espaciado
Puedes ver más información sobre Tipografía en la página oficial de Google en inglés pulsando aquí.