CSS

Tipografía en CSS: sistema, legibilidad y rendimiento

Diseña una tipografía sólida para UI reales: familias de sistema, escalas fluidas con clamp(), jerarquía visual y microajustes de legibilidad.

¿Cuánto sabes de CSS?

📘 Teoría

Piensa en sistema, no en estilos sueltos

Define reglas base para que todo el proyecto respire igual.

Empieza con una base estable: tamaño del cuerpo, altura de línea, familia principal y una escala corta para títulos. Si cada vista inventa valores nuevos, la interfaz pierde coherencia.

Mantén pocos niveles tipográficos (cuerpo, subtítulo, título) y reutilízalos en todo el producto. Menos variantes suele traducirse en mejor mantenimiento y lectura más clara.

Texto base: 16px con line-height entre 1.5 y 1.7.
Títulos: mayor peso visual y line-height más compacto.
Espaciado vertical constante para reforzar ritmo de lectura.

Base tipográfica

:root {
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: #0f172a;
}

h1 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

Escala fluida con clamp()

Adapta tamaño a pantalla sin saltos bruscos.

clamp(min, ideal, max) fija un mínimo legible, un valor fluido y un máximo para evitar textos desproporcionados.

Es especialmente útil en titulares y subtítulos porque evita media queries innecesarias y mantiene una progresión visual más suave.

Jerarquía fluida

h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem);
}

h2 {
  font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem);
}

p {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
}

Microtipografía

Pequeños ajustes que mejoran mucho la lectura.

Ajusta letter-spacing solo cuando aporte claridad, por ejemplo en etiquetas en mayúsculas o titulares display.

Mejora enlaces con text-underline-offset y text-decoration-thickness para que se distingan sin ensuciar la línea base.

Controla la longitud de línea: entre 60 y 80 caracteres por línea suele ofrecer una lectura más cómoda en texto continuo.

Ajustes de lectura

.article {
  max-width: 68ch;
  line-height: 1.75;
}

a {
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}