CSS
Fundamentos de tipografía web: familias, tamaño, peso, altura de línea, espaciado, legibilidad, ritmo vertical y medidas fluidas.
La tipografía controla cómo se mide, alinea y lee el texto; no es solo elegir una font-family.
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
}font-family: Inter, system-ui, sans-serif;El navegador usa la primera fuente disponible. Incluye una familia genérica final.
Fuentes fallback tienen métricas diferentes y pueden cambiar wrapping y layout.
html { font-size: 100%; }
body { font-size: 1rem; }Evita reducir el root para hacer matemáticas fáciles si eso interfiere con preferencias. Rem respeta la escala raíz.
body { line-height: 1.5; }Un número sin unidad se multiplica por el font-size de cada descendiente. Suele ser más adaptable que una longitud fija.
Headings pueden usar line-height menor:
h1,
h2 {
line-height: 1.1;
}.prose {
max-inline-size: 65ch;
}Una línea extremadamente larga dificulta volver al inicio de la siguiente. ch es aproximado y depende de la fuente.
strong { font-weight: 700; }
em { font-style: italic; }No todas las fuentes incluyen cada weight/style. El navegador puede sintetizarlos.
body {
font-synthesis: none;
}Desactivar síntesis puede dejar sin diferenciación si faltan archivos reales.
.eyebrow {
letter-spacing: 0.08em;
text-transform: uppercase;
}No aumentes tracking de párrafos arbitrariamente. Valores negativos pueden perjudicar lectura y scripts complejos.
p { text-align: start; }Start se adapta a direction. Texto justificado puede crear ríos de espacios; necesita hyphenation y pruebas.
h1 { text-wrap: balance; }
p { text-wrap: pretty; }Balance ayuda en headings cortos; pretty intenta mejorar wrapping de párrafos según implementación. No reemplazan control de ancho.
.link {
text-decoration-thickness: from-font;
text-underline-offset: 0.18em;
}No elimines subrayado de links dentro de texto sin otra señal suficiente.
Usa margins y gap para separar bloques. No controles espacio entre párrafos con <br> ni line-height exagerado.
¿Por qué line-height: 24px puede ser peor que line-height: 1.5 en componentes con tamaños distintos?
Porque la longitud fija se hereda sin adaptarse; el número se recalcula según el font-size de cada elemento.
Web fonts y fuentes variables explica carga, fallback y ejes tipográficos.