Tipografía
Una tipografía, un puñado de grosores y una escala por roles que baja un escalón en pantallas más pequeñas. Cada tamaño de abajo es una variable CSS leída de la hoja de estilos.
Tipografía
La interfaz usa Inter, alojada en el propio sitio en vez de tomarse de un servicio de fuentes, para que el primer pintado nunca espere a una petición de terceros. No hay fuente de titulares ni de display: el grosor y el tamaño llevan la jerarquía. Los títulos van a 800, los subtítulos y las etiquetas a 700, los botones y el énfasis a 600, y el texto de cuerpo a 400.
La pila completa recurre a la sans-serif del sistema si Inter no se ha cargado, así el texto siempre es legible.
La escala
Los tamaños son roles, no casos sueltos. La misma variable gobierna cada título de página, cada encabezado de sección, y así sucesivamente. Las tres columnas son el valor de escritorio y las dos reducciones, aplicadas en los puntos de ruptura de tableta y móvil de la página de Maquetación.
| Token | Escritorio | Tableta | Móvil | Rol |
|---|---|---|---|---|
--fs-h1 | 34px | 32px | 30px | Título de página, con la barra verde. |
--bar-h1 | 52px | 48px | 44px | Ancho de la barra verde bajo el título. |
--fs-h2 | 26px | 20px | 18px | Encabezados de sección. |
--fs-h3 | 20px | 18px | 17px | Subtítulos y antetítulos de detalle. |
--fs-h4 | 18px | 16px | 14px | Etiquetas menores en páginas con varios roles. |
--fs-body | 17px | 15px | 14px | Texto largo fuera de los artículos. |
--lh-body | 1.6 | 1.6 | 1.7 | Interlineado del texto de cuerpo. |
--fs-prose | 17px | 16px | 16.5px | Tamaño de lectura de los artículos. |
--fs-prose-h2 | 24px | 21px | 21px | Encabezados de sección de los artículos. |
Muestras
Renderizadas a sus tamaños reales. Estrecha la ventana y se reducen igual que el sitio.
El título de la página
--fs-h1 34px · 32px · 30px 800 Título de página. Lleva la barra verde debajo.
Un encabezado de sección
--fs-h2 26px · 20px · 18px 700 Encabezado de sección.
Un encabezado de sección de artículo
--fs-prose-h2 24px · 21px · 21px 700 Encabezado de sección de artículo, con el subrayado verde.
Un subtítulo de detalle
--fs-h3 20px · 18px · 17px 700 Subtítulo de detalle y antetítulo.
Una etiqueta menor
--fs-h4 18px · 16px · 14px 700 Etiqueta menor, páginas con varios roles.
El texto de cuerpo marca el ritmo de lectura fuera de los artículos: lo bastante largo para respirar, lo bastante corto para ojearlo. Es el tamaño al que se lee la mayoría de las palabras del sitio.
--fs-body 17px · 15px · 14px 400 Texto largo fuera de los artículos.
Tamaño de lectura de los artículos, un poco mayor y más holgado, pensado para un rato largo con una sola columna de texto.
--fs-prose 17px · 16px · 16.5px 400 Tamaño de lectura de los artículos.
Tratamientos de encabezado
Dos marcas verdes, dos funciones. Los títulos de página y de sección llevan una barra verde corta bajo las primeras palabras: un acento de ancho fijo que no se estira con el texto. Los encabezados de artículo llevan en cambio un subrayado completo que recorre todo el ancho de las palabras. Si la marca abarca el texto, estás dentro de un artículo; si es una barra corta, estás ante un título de página o de sección.
Monoespaciada
Una pila monoespaciada marca todo lo que la máquina compone: líneas de metadatos y fechas, etiquetas e insignias, cabeceras de tabla, código y los pequeños antetítulos en mayúsculas. Señala que «esto son datos, no prosa». La pila es SF Mono, Fira Code, Cascadia Code y, después, la monoespaciada del sistema.
En uso
Dónde aparece cada rol:
Un matiz acompaña al rol de cuerpo: en la portada, el primer párrafo del texto de presentación sube a color primario y peso medio, un tratamiento de entradilla discreto.
- Título de página. El h1 de cada página de nivel superior, con la barra verde.
- Encabezado de sección. Encabezados de banda, con el breve subrayado verde.
- Encabezado de artículo. El h2 dentro de un post del blog, con el subrayado verde. Solo el h2 de artículo; los subtítulos bajan a un grosor normal.
- Cuerpo. Texto de la página sobre mí, introducciones de página, texto de tarjetas.
- Prosa. La columna de lectura de un artículo.
- Metadatos. Fechas, tiempo de lectura, etiquetas. Monoespaciada.