La escala tipográfica de Material Design es el sistema que define cómo se ven y combinan los textos dentro de una app Android. Aprender a personalizarla te permite reflejar la identidad de tu marca sin romper la coherencia visual ni la legibilidad.

¿Qué es la escala tipográfica en Material Design?

La escala tipográfica es una selección curada de estilos de fuente que puedes reutilizar en toda tu aplicación. Su objetivo es darte flexibilidad sin perder consistencia, algo clave cuando un mismo producto vive en pantallas, tamaños y contextos distintos.

Esta escala está compuesta por 15 estilos organizados en cinco roles que describen su propósito dentro de la interfaz:

• Display: textos grandes y de alto impacto.
• Headline: encabezados que jerarquizan secciones.
• Title: títulos intermedios para subsecciones.
• Body: textos corridos pensados para lectura prolongada.
• Label: textos pequeños y utilitarios, como el texto de los botones.

Cada componente de Material ya viene clasificado dentro de una de estas categorías, así que cuando cambias un estilo, el cambio se propaga automáticamente a todos los lugares que lo usan.

¿Cuándo usar tipografía brand y cuándo plain?

Material distingue dos tokens de referencia para fuentes: brand y plain. Esta separación te deja usar dos tipografías distintas dentro del mismo diseño sin que se sienta inconsistente.

La tipografía brand se reserva para display, headline y title, porque son textos cortos y de mayor énfasis. Ahí es donde puedes aportar expresividad y personalidad de marca. La tipografía plain se usa en body y label, donde la prioridad es la legibilidad en lecturas prolongadas o tamaños muy pequeños.

¿Qué tipografía usan los botones en Material Design? Los botones usan el estilo label large, que pertenece al token plain. Por eso se recomienda una fuente simple y altamente legible.

Por defecto, Material usa Roboto para todos los estilos y crea una experiencia unificada. También ofrece una alternativa serif cuando necesitas una lectura más cómoda. Si tu app no tiene una fuente de marca definida, elige una que se alinee con el tono que quieres transmitir.

¿Dónde encontrar fuentes adicionales?

Google Fonts ofrece una variedad amplia de opciones gratuitas y listas para usar [02:00]. La regla a no olvidar: cualquier tipografía expresiva que elijas debe seguir siendo accesible y clara en los tamaños mínimos.

¿Cómo cambiar la tipografía con variables locales en Figma?

El truco para que el sistema sea fácil de mantener está en el uso de tokens gestionados como variables. En el kit de Material Design en Figma, dentro de las variables locales encuentras una colección llamada typeface con dos variables: brand y plain.

Cambiar una sola variable propaga el ajuste a toda la escala tipográfica y a todos los componentes vinculados. El flujo es simple:

1. Abre las variables locales del archivo.
2. Ubica la colección typeface.
3. Edita la variable brand o plain con el nombre de la fuente nueva.
4. Da enter y observa cómo los textos y componentes se actualizan solos.

¿Qué pasa si cambio la variable plain? Afectas todos los textos body y label, incluyendo el texto interno de la mayoría de componentes Material como botones, chips y campos de formulario.

En la demo de la clase, cambiar la variable plain de Roboto a Lato actualiza al instante la escala y los componentes. Volver a Roboto los regresa al estado original. Y cambiar la variable brand a algo más expresivo como Montserrat transforma los estilos display medium, title large y demás encabezados sin tocar el body [04:30].

¿Cómo aplicar esto en tu proyecto?

Usa el proyecto de cine como base y trabaja en este orden:

• Analiza la interfaz web e identifica las fuentes que ya usa.
• Define qué tipografía brand quieres aplicar en los estilos display.
• Define qué tipografía plain usarás para body y label.
• Edita las variables locales para que el cambio se propague en todo el sistema.

Para plain te recomiendo dejar la opción por default, salvo que encuentres una alternativa igual de legible en tamaños chicos. Para brand, anímate a buscar una fuente que refuerce la personalidad cinematográfica de la app.

Un sistema tipográfico bien implementado no es solo estética: hace que la app se sienta más profesional, jerarquizada y fácil de usar. Comparte tu resultado en los comentarios y cuéntame qué combinación de brand y plain elegiste.