Tipografía

La tipografía tiene varias escalas a la vez: familias, tamaños, pesos e interlineados. En esta lección verás los primitivos tipográficos de DesignToken101 y de dónde sale cada escala. Cómo se combinan en estilos de texto lo verás en Estilos de texto como capa.

En esta página

• Los primitivos tipográficos
• Familias
• Tamaños
• Pesos
• Interlineado y espaciado entre letras
• En Figma
• Lo que te llevas

Los primitivos tipográficos

Por qué cada tipo de variable es el que es lo viste en Tipos simples. Aquí nos centramos en los valores.

Familias

Las dos tienen licencia SIL Open Font License 1.1, que permite usarlas, también en proyectos comerciales (Inter, JetBrains Mono).

En Figma, la variable guarda un único nombre de fuente. Las fuentes de reserva (system-ui, sans-serif…) se añaden en el CSS.

Tamaños

Diez pasos, tomados de la escala del Simple Design System (SDS) de Figma, que va de --sds-typography-scale-01 (0.75rem) a --sds-typography-scale-10 (4.5rem) (SDS: theme.css):

Aquí el número es un orden, no una proporción: font-size/02 no mide el doble que font-size/01. Los tamaños de letra no crecen a partir de una base fija, así que un número proporcional dejaría huecos sin sentido. El cero inicial (01, 02) mantiene el orden al ordenar los nombres como texto.

El texto de lectura mide 16 px (font-size/03). Es el tamaño que el navegador usa por defecto: con el valor por defecto, 1rem equivale a 16 px, y rem se calcula a partir del tamaño de letra del elemento raíz (MDN: font-size).

Tu escala puede ser otra

DesignToken101 usa la escala del SDS porque está probada en un sistema real y encaja con la base de 4 px del espaciado. No es la única válida: puedes usar la de otro sistema o crear la tuya.

Una forma habitual de crear una escala propia es la escala modular: partes de un tamaño base y multiplicas cada paso por la misma proporción. Typescale, una herramienta web gratuita (con funciones de pago), lo hace por ti: eliges el tamaño base y una proporción entre varias predefinidas, desde 1,067 (Minor Second) hasta 1,618 (Golden Ratio), pasando por 1,2 (Minor Third) o 1,25 (Major Third), y ves el resultado con tus fuentes. También exporta el CSS.

Pesos

Son variables Number, por los motivos que viste en Tipos simples.

Interlineado y espaciado entre letras

Los tres son tokens de código: Figma lee una variable de interlineado como píxeles, no como multiplicador (Tipos simples). En Figma, los estilos de texto escriben el porcentaje a mano.

El texto de lectura usa 1.5 por accesibilidad. El criterio 1.4.12 Text Spacing (AA) de WCAG 2.2 pide que el contenido no se rompa si la persona aumenta el interlineado hasta 1,5 veces el tamaño de la letra, junto con otros espaciados (Understanding 1.4.12). El criterio no obliga a usar 1.5: pide que nada se rompa cuando la persona cambia el espaciado. Por eso afecta al diseño de los componentes, que deben tener alturas flexibles. Cómo se comprueba lo verás en Tamaño y espaciado.

En Figma

Crea las variables tipográficas en la colección Primitives (Figma: Create and manage variables):

Añade a cada una su code syntax Web, por ejemplo var(--t101-font-size-03). No crees variables de interlineado.

:root {
  --t101-font-family-sans: "Inter";
  --t101-font-size-03: 1rem;
  --t101-font-weight-600: 600;
  --t101-line-height-normal: 1.5; /* token de código */
}

Fuentes

• Figma: Simple Design System, theme.css
• Figma: Overview of variables, collections, and modes
• Figma: Create and manage variables and collections
• Inter (rsms/inter)
• JetBrains Mono (JetBrains/JetBrainsMono)
• Typescale (herramienta web)
• MDN: font-size
• WCAG 2.2: Understanding 1.4.12 Text Spacing