Tipografía

Controla fuentes, tamaños, pesos y espaciado para crear sistemas tipográficos profesionales.

📖

Teoría

La tipografía es el arte de trabajar con texto. Las propiedades CSS clave son:

font-family → La fuente (con fallbacks)

font-size → Tamaño (px, rem, em, %)

font-weight → Grosor (100-900, o bold/normal)

line-height → Altura de línea (separación entre líneas)

letter-spacing → Espacio entre caracteres

text-align → Alineación (left, center, right, justify)

text-transform → Mayúsculas/minúsculas (uppercase, lowercase, capitalize)

css

/* Stack de fuentes (fallbacks) */
body {
  font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;
}
code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Tamaños: rem es relativo al root (recomendado) */
h1 { font-size: 2.5rem; }   /* 40px si base=16px */
h2 { font-size: 1.875rem; } /* 30px */
p  { font-size: 1rem; }     /* 16px (base) */
small { font-size: 0.875rem; } /* 14px */

/* Peso y espaciado */
.heading {
  font-weight: 700;
  letter-spacing: -0.02em; /* comprime ligeramente */
  line-height: 1.2;
}
.body-text {
  font-weight: 400;
  line-height: 1.6; /* cómodo para leer */
}

💡rem vs em vs px

px: absoluto, no escala con preferencias del usuario

rem: relativo al font-size del elemento <html> (usualmente 16px). El mejor para tamaños de fuente.

em: relativo al font-size del elemento padre. Útil para padding/margin proporcionales al texto.

⚡

Ejercicio práctico

🎯 Tu misión

Crea un sistema tipográfico completo para una página editorial. Define estilos para: h1-h3, párrafos de cuerpo, texto de cita (blockquote), y texto de código usando diferentes pesos, tamaños y espaciados.

Vista previa

←Capítulo anterior

Siguiente capítulo→