Tipografía en Material: escala, tokens e interlineado

Una escala tipográfica responde una pregunta sencilla: qué tamaño lleva cada texto. Con ella, la misma función se ve igual en todas las pantallas y nadie tiene que inventar tamaños nuevos en cada una. La guía de Material Design define 30 estilos de tipo en una escala (en inglés), 15 baseline y 15 enfatizados. La guía también señala que ningún producto usará todos (en inglés). O sea, la escala es un menú para elegir, no una lista para completar entera.

Los roles y dónde aparecen

La escala organiza los estilos en cinco roles que describen su propósito (en inglés): display, headline, title, body y label. Cada rol tiene tres tamaños, large, medium y small. Los estilos display son el texto más grande de la pantalla, reservado a textos cortos o importantes en pantallas grandes (en inglés). Los headlines marcan textos cortos de alto énfasis en pantallas pequeñas (en inglés). Los titles cargan texto de énfasis medio que sigue siendo corto (en inglés). Body cubre los pasajes más largos (en inglés), y label hace el texto pequeño y utilitario dentro de componentes (en inglés), como un botón.

Del rol al token

Cada uno de los 30 estilos tiene un único token que reúne todas las propiedades por defecto (en inglés). Ese nombre guarda fuente, interlineado, tamaño, tracking y peso. La guía trata cada propiedad como un token propio también (en inglés), para quien necesita control más fino. En la práctica, tamaño, peso e interlineado van juntos con un solo nombre. El componente pide body medium y recibe los tres de una vez.

Tu fuente sobre la escala del sistema

La escala separa dos fuentes. Una fuente de marca cubre los estilos mayores, como headline y display (en inglés), donde importa la expresión. Una fuente simple cubre body y label (en inglés), donde importa la lectura. Roboto es el valor por defecto para ambas. La guía sugiere cambiar Roboto para reforzar la expresión de marca (en inglés), y advierte contra cambiar el tamaño del tipo, porque eso puede afectar cómo se renderizan y refluyen los componentes (en inglés).

Tratamiento editorial

Un tratamiento editorial es un momento autónomo conducido por el tipo (en inglés), en el que tamaños a medida llaman la atención y dejan de lado el diseño funcional. La guía los usa para celebrar contenido, dar voz al usuario o destacar funciones a medida (en inglés). Los ejes variables hacen el trabajo: peso, grado, ancho y tamaño óptico. El grado es el más sutil. Cambia el énfasis sin refluir el texto (en inglés), lo que ayuda cuando el mismo texto se ve más pesado en modo oscuro.

El error común

El error más común es elegir el tamaño a gusto y no definir nunca el interlineado. Un tamaño sin interlineado es solo medio estilo. La guía ata los dos y pide un interlineado de unas 1,2 veces el tamaño en los estilos mayores (en inglés) y de unas 1,5 en body y label (en inglés). Si queda muy ajustado, el texto pierde el ritmo. Si queda muy suelto, las líneas dejan de leerse como un solo bloque. El Nielsen Norman Group midió que la velocidad de lectura puede variar un 35% entre dos fuentes igual de legibles (en inglés), una diferencia grande para una decisión que suele tomarse a ojo.

Qué medir después

Tres comprobaciones resuelven casi todo. Contraste primero: la guía pide 3:1 en texto grande y 4,5:1 en texto pequeño (en inglés). Después, el largo de línea, porque una línea larga cansa la vista. Por último, el salto entre niveles, porque la escala pide contraste real entre tamaños, sin diferencias pequeñas (en inglés).

Dónde la guía lo deja abierto

La guía entrega la escala, los roles y los tokens. No decide cuándo una marca es lo bastante fuerte para salir de esa escala, y no fija regla para idiomas de palabra larga, donde un titular puede desbordar una medida estrecha. También recuerda que la persona lee cerca del 28% de las palabras en una página media (en inglés). Ese número importa para una decisión tipográfica, porque quien escanea se apoya más en el salto visual entre niveles que en las palabras. El NN/g añade que mirar una palabra de reojo favorece texto más grande, más ancho y en mayúsculas (en inglés). Pero esas mismas mayúsculas estorban en un pasaje largo, y la escala por sí sola no resuelve ese choque.

Para el contexto de estos roles, mira el post sobre Material Design, el post sobre tokens y tema de Material y el post sobre roles de color.