Estilos de texto como capa

En el módulo 1 viste que un estilo de texto agrupa varias decisiones tipográficas, y en el módulo 2 creaste los primitivos de tipografía, ocultos al publicar. Falta la pieza que los une: en DesignToken101, los estilos de texto son la capa semántica de la tipografía. En esta lección verás qué capa ocupa cada parte de un estilo, cómo se resuelve hasta sus primitivos y por qué ningún texto debería quedar sin estilo.

En esta página

• El estilo es el semántico
• Los diez estilos
• De un estilo a sus primitivos
• Un texto sin estilo es un valor suelto
• En Figma
• Lo que te llevas

El estilo es el semántico

Un semántico de color dice para qué se usa un color. Un estilo de texto hace lo mismo con la tipografía: heading/2 dice que es un título de apartado, no que mide 32 px ni que pesa 600.

La diferencia es la forma. Figma no tiene variables compuestas: para reunir familia, tamaño, peso e interlineado en una sola decisión, usa un estilo (Figma: Overview of variables). Lo viste en Tipos compuestos y estilos. En DTCG, esa decisión sería un token typography con referencias a los primitivos.

Los diez estilos

Se nombran por su rol, no por su tamaño:

Todos usan Inter, salvo code/default. Los tamaños cambian entre Desktop y Mobile: lo verás en Crear la colección Layout, en el módulo Modos y temas.

De un estilo a sus primitivos

Cada propiedad del estilo se resuelve por un camino distinto. Así queda heading/1 en Desktop:

Tres cosas que mirar en la tabla:

• El tamaño tiene su propio semántico. font-size/heading/1 existe porque el tamaño del título cambia con el ancho de pantalla, y un semántico puede apuntar a un primitivo distinto en cada modo. La familia y el peso no cambian, así que el estilo aplica el primitivo directamente.
• La cadena más larga tiene dos saltos: estilo → font-size/heading/1 → font-size/07. Cumple el límite de Las capas.
• El interlineado no es una variable. Figma lee una variable de interlineado como píxeles, así que el estilo usa un porcentaje escrito a mano y el token vive en código (Tipografía).

Un texto sin estilo es un valor suelto

Si un texto del diseño tiene su tamaño y su peso aplicados a mano, sin estilo, es el equivalente de un hex escrito a mano: funciona, pero no responde a ningún cambio del sistema.

El caso más frecuente es la negrita. En Figma, poner en negrita una parte de un párrafo separa ese fragmento de su estilo de texto: queda sin estilo, aunque el resto del párrafo lo tenga. Lo comprobamos en el archivo de DesignToken101. Por eso existe body/strong: el texto destacado tiene su propio estilo y sigue ligado al sistema.

En Figma

Los estilos de texto no son variables, así que puedes crearlos ya con tus primitivos tipográficos del módulo 2. En DesignToken101, cada estilo vincula sus propiedades a variables (Figma: Apply variables to designs):

1. Crea el estilo de texto con su nombre, por ejemplo heading/1.
2. En la familia, aplica la variable font-family/sans.
3. En el tamaño, aplica font-size/heading/1, de la colección Layout. Si aún no tienes esa colección, aplica de momento el primitivo (font-size/07) y cámbialo en el módulo Modos y temas (Vincular los estilos de texto): con el primitivo, el estilo no cambia en Mobile.
4. En el peso, aplica font-weight/700.
5. En el interlineado, escribe 120 %.

Los semánticos de tamaño de texto están en la colección Layout, con los modos Desktop y Mobile, y cada uno apunta a un primitivo font-size/*. Los crearás en el módulo Modos y temas (Crear la colección Layout), cuando veas cómo funcionan los modos.

Lo que te llevas

• El estilo de texto es el semántico de la tipografía: se nombra por su rol.
• Cada propiedad se resuelve por su camino; solo el tamaño, que cambia con el modo, tiene semántico propio.
• Un texto sin estilo es un valor suelto: por eso existe body/strong.

Fuentes

• Figma: Overview of variables, collections, and modes
• Figma: Apply variables to designs