Tipografia web

La importancia de la tipografia

La tipografia es responsable del 95% del diseño web. Un buen sistema tipografico mejora la legibilidad, establece jerarquia visual y transmite la personalidad de la marca.

Fuentes del sistema vs fuentes web

System font stack

Las fuentes del sistema se cargan instantaneamente porque ya estan instaladas en el dispositivo del usuario:

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

Cada sistema operativo tiene su fuente nativa: San Francisco en macOS, Segoe UI en Windows, Roboto en Android. El stack system-ui selecciona automaticamente la correcta.

Google Fonts

Para usar fuentes web personalizadas, Google Fonts es la opcion más popular. Para optimizar la carga:

1. Usa <link rel="preconnect"> para la conexión anticipada
2. Carga solo los pesos que necesitas (400, 500, 700)
3. Usa font-display: swap para evitar texto invisible

@font-face para fuentes propias

Si alojas tus propias fuentes, usa @font-face:

@font-face {
  font-family: "MiFuente";
  src: url("/fonts/mi-fuente.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

El formato WOFF2 es el más eficiente y tiene soporte universal en navegadores modernos.

Propiedades tipograficas esenciales

font-size

Define el tamaño del texto. Usa unidades relativas (rem, em) en lugar de px para respetar las preferencias del usuario:

html { font-size: 100%; }  /* Respeta la config del navegador (16px) */
body { font-size: 1rem; }  /* 16px por defecto */
h1   { font-size: 2.5rem; } /* 40px */

line-height

El interlineado es crucial para la legibilidad. Se recomienda un valor entre 1.5 y 1.75 para texto corrido:

body { line-height: 1.6; }       /* Texto general */
h1   { line-height: 1.2; }       /* Titulos: más compacto */
.compacto { line-height: 1.4; }  /* UI: botones, navs */

letter-spacing y word-spacing

Ajustan el espacio entre letras y palabras. Usalo con moderacion:

.título-grande {
  letter-spacing: -0.02em;  /* Titulos grandes: más compactos */
}
.subtitulo {
  letter-spacing: 0.05em;   /* Texto pequeño en mayusculas */
  text-transform: uppercase;
}

font-weight

Controla el grosor del texto. Las fuentes variables permiten cualquier valor entre 100 y 900:

Escala tipografica

Una escala tipografica consistente crea jerarquia visual armoniosa. Una proporcion comun es 1.25 (Major Third):

:root {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.5rem;    /* 40px */
}

Tipografia fluida con clamp()

En lugar de usar media queries para cambiar tamaños de fuente, usa clamp():

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

Esto crea un tamaño de fuente que:

• Nunca baja de 2rem (32px)
• Escala con el 5% del ancho del viewport
• Nunca sube de 3.5rem (56px)

El sistema prose

Para contenido largo (articulos, documentación), crea una clase .prose que establezca todas las reglas tipograficas:

.prose {
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.75;
}

.prose > * + * {
  margin-block-start: 1.25em;
}

.prose h2 { margin-block-start: 2em; }

.prose code {
  font-family: "Fira Code", monospace;
  font-size: 0.875em;
  background: #f0f0f0;
  padding: 0.125em 0.375em;
  border-radius: 4px;
}

text-wrap: balance y pretty

CSS moderno introduce control sobre el ajuste de lineas en títulos y párrafos:

h1, h2, h3 {
  text-wrap: balance; /* Equilibra las lineas del título */
}

p {
  text-wrap: pretty; /* Evita palabras huerfanas al final */
}

Con una tipografia solida, tu sitio comunica profesionalismo. En la siguiente leccion exploraremos colores y fondos para completar la estetica visual.

Práctica

1. Configura un system font stack: Aplica un stack de fuentes del sistema al body y define una escala tipografica para h1 a h3 usando clamp() para tamaños fluidos.
2. Crea una clase .prose: Construye una clase .prose con max-width: 65ch, line-height: 1.75 y espaciado vertical con el selector * + *. Aplica text-wrap: balance a los titulos.
3. Carga una Google Font optimizada: Anade una fuente de Google Fonts usando <link rel="preconnect"> y font-display: swap. Compara el rendimiento con y sin preconnect en DevTools.