4. Tipografía y Texto

La tipografía es uno de los aspectos más importantes del diseño web. Una buena tipografía mejora la legibilidad, la jerarquía visual y la experiencia del usuario.

🔤 Propiedad `font-family` y tipos de fuente

La propiedad font-family define qué fuente se usará para mostrar el texto.

Sintaxis básica

/* Sintaxis: font-family: fuente1, fuente2, tipo-genérico; */
.elemento {
  font-family: Arial, Helvetica, sans-serif;
}

Tipos genéricos de fuentes

/* Sans-serif - Sin remates (modernas, limpias) */
.texto-sans {
  font-family: Arial, Helvetica, sans-serif;
}

/* Fuentes sans-serif comunes */
font-family: Arial, sans-serif;
font-family: Helvetica, sans-serif;
font-family: Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, sans-serif;
font-family: 'Trebuchet MS', sans-serif;
font-family: 'Lucida Sans', sans-serif;

✅ Uso recomendado:

Interfaces de usuario
Texto en pantalla
Sitios web modernos
Contenido digital

Ejemplo: Este es un texto sans-serif (sin remates)

/* Serif - Con remates (clásicas, elegantes) */
.texto-serif {
  font-family: Georgia, 'Times New Roman', serif;
}

/* Fuentes serif comunes */
font-family: Georgia, serif;
font-family: 'Times New Roman', Times, serif;
font-family: Garamond, serif;
font-family: 'Palatino Linotype', serif;
font-family: 'Book Antiqua', serif;

✅ Uso recomendado:

Textos largos impresos
Artículos y blogs
Diseños elegantes o tradicionales
Contenido editorial

Ejemplo: Este es un texto serif (con remates)

/* Monospace - Ancho fijo (código, terminal) */
.texto-mono {
  font-family: 'Courier New', Courier, monospace;
}

/* Fuentes monospace comunes */
font-family: 'Courier New', monospace;
font-family: Consolas, monospace;
font-family: Monaco, monospace;
font-family: 'Lucida Console', monospace;
font-family: Menlo, monospace;

✅ Uso recomendado:

Bloques de código
Terminales
Datos tabulares
ASCII art

Ejemplo: Este es un texto monospace (ancho fijo)

/* Cursive - Estilo manuscrito */
.texto-cursive {
  font-family: 'Comic Sans MS', cursive;
}

/* Fantasy - Decorativas */
.texto-fantasy {
  font-family: Impact, fantasy;
}

/* Fuentes cursive */
font-family: 'Comic Sans MS', cursive;
font-family: 'Brush Script MT', cursive;
font-family: 'Lucida Handwriting', cursive;

/* Fuentes fantasy */
font-family: Impact, fantasy;
font-family: Papyrus, fantasy;

⚠️ Uso limitado:

Títulos decorativos
Logos
Elementos destacados
Evitar para texto largo

Stack de fuentes del sistema (System Font Stack)

Usa las fuentes nativas del sistema operativo para mejor rendimiento.

/* Stack moderno multiplataforma */
body {
  font-family:
    -apple-system,           /* macOS y iOS (San Francisco) */
    BlinkMacSystemFont,      /* macOS Chrome */
    'Segoe UI',              /* Windows */
    Roboto,                  /* Android */
    'Helvetica Neue',        /* macOS anterior */
    Arial,                   /* Fallback universal */
    sans-serif;              /* Genérico */
}

/* Stack para código */
code, pre {
  font-family:
    'SF Mono',               /* macOS */
    Monaco,                  /* macOS anterior */
    Consolas,                /* Windows */
    'Liberation Mono',       /* Linux */
    'Courier New',           /* Fallback */
    monospace;               /* Genérico */
}

Fuentes con espacios en el nombre

/* ✅ Correcto: Comillas para nombres con espacios */
.elemento {
  font-family: 'Times New Roman', Times, serif;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-family: 'Comic Sans MS', cursive;
}

/* ❌ Incorrecto: Sin comillas */
.elemento {
  font-family: Times New Roman, serif;  /* Error de sintaxis */
}

/* ✅ Nombres sin espacios no necesitan comillas */
.elemento {
  font-family: Arial, Helvetica, sans-serif;
  font-family: Georgia, serif;
}

📏 Tamaño, peso y estilo de fuente

`font-size` - Tamaño de fuente

Define el tamaño del texto.

/* Diferentes formas de definir font-size */
.elemento {
  font-size: 16px;        /* Píxeles (fijo) */
  font-size: 1rem;        /* Relativo a <html> */
  font-size: 1.2em;       /* Relativo al padre */
  font-size: 100%;        /* Porcentaje del padre */
  font-size: larger;      /* Palabras clave */
}

/* Sistema de tamaños consistente */
:root {
  font-size: 16px;  /* Base */
}

.texto-xs   { font-size: 0.75rem; }   /* 12px */
.texto-sm   { font-size: 0.875rem; }  /* 14px */
.texto-base { font-size: 1rem; }      /* 16px */
.texto-lg   { font-size: 1.125rem; }  /* 18px */
.texto-xl   { font-size: 1.25rem; }   /* 20px */
.texto-2xl  { font-size: 1.5rem; }    /* 24px */
.texto-3xl  { font-size: 1.875rem; }  /* 30px */
.texto-4xl  { font-size: 2.25rem; }   /* 36px */
.texto-5xl  { font-size: 3rem; }      /* 48px */
.texto-6xl  { font-size: 3.75rem; }   /* 60px */
.texto-7xl  { font-size: 4.5rem; }    /* 72px */

/* Jerarquía visual clara */
h1 {
  font-size: 2.5rem;      /* 40px */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;        /* 32px */
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.875rem;
}

h3 {
  font-size: 1.5rem;      /* 24px */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.25rem;     /* 20px */
  font-weight: 500;
  line-height: 1.5;
}

p {
  font-size: 1rem;        /* 16px */
  line-height: 1.6;
  margin-bottom: 1rem;
}

small {
  font-size: 0.875rem;    /* 14px */
  line-height: 1.5;
}

/* Tamaños que se adaptan al viewport */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* Mínimo 2rem, ideal 5vw, máximo 4rem */
}

/* Con media queries */
h1 {
  font-size: 2rem;  /* Mobile */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;  /* Tablet */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;  /* Desktop */
  }
}

`font-weight` - Peso de fuente

Define el grosor de los caracteres.

/* Valores numéricos (100-900) */
.elemento {
  font-weight: 100;  /* Thin */
  font-weight: 200;  /* Extra Light */
  font-weight: 300;  /* Light */
  font-weight: 400;  /* Normal (default) */
  font-weight: 500;  /* Medium */
  font-weight: 600;  /* Semi Bold */
  font-weight: 700;  /* Bold */
  font-weight: 800;  /* Extra Bold */
  font-weight: 900;  /* Black */
}

/* Palabras clave */
.elemento {
  font-weight: normal;   /* = 400 */
  font-weight: bold;     /* = 700 */
  font-weight: lighter;  /* Más ligero que el padre */
  font-weight: bolder;   /* Más grueso que el padre */
}

Uso práctico
Comparación visual

/* Jerarquía con pesos */
h1, h2 {
  font-weight: 700;  /* Bold para títulos principales */
}

h3, h4 {
  font-weight: 600;  /* Semi-bold para subtítulos */
}

p {
  font-weight: 400;  /* Normal para texto */
}

strong, b {
  font-weight: 700;  /* Bold para énfasis */
}

.texto-ligero {
  font-weight: 300;  /* Light para texto secundario */
}

.texto-destacado {
  font-weight: 600;  /* Semi-bold para destacar */
}

/* Escala de pesos */
.peso-100 { font-weight: 100; } /* Muy delgado */
.peso-200 { font-weight: 200; } /* Extra ligero */
.peso-300 { font-weight: 300; } /* Ligero */
.peso-400 { font-weight: 400; } /* Normal ⭐ */
.peso-500 { font-weight: 500; } /* Medio */
.peso-600 { font-weight: 600; } /* Semi negrita */
.peso-700 { font-weight: 700; } /* Negrita ⭐ */
.peso-800 { font-weight: 800; } /* Extra negrita */
.peso-900 { font-weight: 900; } /* Negro */

`font-style` - Estilo de fuente

Define si el texto es normal, cursiva u oblicuo.

/* Valores de font-style */
.elemento {
  font-style: normal;   /* Normal (default) */
  font-style: italic;   /* Cursiva (itálica) */
  font-style: oblique;  /* Oblicua (inclinada) */
}

Uso común
Diferencia italic vs oblique

/* Cursiva para énfasis */
em, i {
  font-style: italic;
}

/* Citas en cursiva */
blockquote {
  font-style: italic;
  border-left: 4px solid #ddd;
  padding-left: 1rem;
  color: #666;
}

/* Términos técnicos */
.termino {
  font-style: italic;
  color: #2c3e50;
}

/* Resetear cursiva */
.no-cursiva {
  font-style: normal;
}

/* italic - Usa la versión cursiva diseñada de la fuente */
.texto-italic {
  font-style: italic;
  /* Caracteres específicamente diseñados en cursiva */
}

/* oblique - Inclina la fuente normal */
.texto-oblique {
  font-style: oblique;
  /* Simplemente inclina los caracteres normales */
}

/* oblique con ángulo personalizado */
.texto-oblique-custom {
  font-style: oblique 15deg;
  /* Inclina 15 grados */
}

Propiedad abreviada `font`

Combina múltiples propiedades de fuente en una sola línea.

/* Sintaxis: font: [style] [variant] [weight] size/line-height family; */

/* Forma larga */
.elemento {
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

/* Forma corta (equivalente) */
.elemento {
  font: italic 700 16px/1.5 Arial, sans-serif;
}

Ejemplos prácticos
Valores mínimos

/* Título principal */
h1 {
  font: bold 2.5rem/1.2 Georgia, serif;
}

/* Texto normal */
p {
  font: normal 1rem/1.6 Arial, sans-serif;
}

/* Código */
code {
  font: normal 0.875rem/1.4 'Courier New', monospace;
}

/* Texto destacado */
.destacado {
  font: italic 600 1.125rem/1.5 'Segoe UI', sans-serif;
}

/* Mínimo requerido: size y family */
.elemento {
  font: 16px Arial;
}

/* Con line-height */
.elemento {
  font: 16px/1.5 Arial;
}

/* Completo */
.elemento {
  font: italic 700 16px/1.5 Arial, sans-serif;
}

📐 Espaciado del texto

El espaciado correcto mejora dramáticamente la legibilidad.

`line-height` - Altura de línea

Define el espacio vertical entre líneas de texto.

/* Diferentes formas de definir line-height */
.elemento {
  line-height: 1.5;        /* Sin unidad (recomendado) */
  line-height: 24px;       /* Píxeles (fijo) */
  line-height: 1.5rem;     /* Relativo */
  line-height: 150%;       /* Porcentaje */
  line-height: normal;     /* Default (~1.2) */
}

/* Guía de line-height según tipo de texto */

/* Títulos - Más compacto */
h1, h2, h3 {
  line-height: 1.2;  /* 120% del tamaño de fuente */
}

/* Texto normal - Legible */
p, body {
  line-height: 1.6;  /* 160% - Ideal para lectura */
}

/* Texto pequeño */
small, .texto-pequeno {
  line-height: 1.5;
}

/* Código */
code, pre {
  line-height: 1.4;  /* Más compacto para código */
}

/* Botones y UI */
button, .boton {
  line-height: 1;    /* Sin espacio extra */
}

/* ✅ Recomendado: Sin unidad (se hereda multiplicando) */
.padre {
  font-size: 16px;
  line-height: 1.5;  /* = 24px */
}

.hijo {
  font-size: 20px;
  /* Hereda 1.5, calcula: 20px × 1.5 = 30px ✅ */
}

/* ❌ Evitar: Con unidad (se hereda el valor fijo) */
.padre {
  font-size: 16px;
  line-height: 24px;  /* Fijo */
}

.hijo {
  font-size: 20px;
  /* Hereda 24px fijo, no escala ❌ */
}

/* Line-height muy apretado */
.apretado {
  line-height: 1;
  /* Difícil de leer, líneas muy juntas */
}

/* Line-height normal */
.normal {
  line-height: 1.5;
  /* Buena legibilidad ✅ */
}

/* Line-height amplio */
.amplio {
  line-height: 2;
  /* Mucho espacio, puede verse desconectado */
}

/* Centrado vertical con line-height */
.boton {
  height: 40px;
  line-height: 40px;  /* Centra el texto verticalmente */
  padding: 0 20px;
}

`letter-spacing` - Espaciado entre letras

Controla el espacio entre caracteres (tracking/kerning).

/* Valores de letter-spacing */
.elemento {
  letter-spacing: normal;    /* Default (0) */
  letter-spacing: 0.05em;    /* Más espacio */
  letter-spacing: 2px;       /* Espacio fijo */
  letter-spacing: -0.02em;   /* Menos espacio (apretado) */
}

Uso práctico
Ejemplos visuales

/* Títulos en mayúsculas - Más espaciado */
h1 {
  text-transform: uppercase;
  letter-spacing: 0.1em;  /* Más legible en mayúsculas */
}

/* Logos y marcas */
.logo {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Texto normal - Sin cambios */
p {
  letter-spacing: normal;  /* 0 */
}

/* Texto compacto */
.compacto {
  letter-spacing: -0.02em;  /* Ligeramente más junto */
}

/* Botones */
.boton {
  letter-spacing: 0.05em;  /* Más espaciado y legible */
  text-transform: uppercase;
}

/* Muy apretado */
.muy-apretado {
  letter-spacing: -0.05em;
}
/* Resultado: Textomuyjunto */

/* Normal */
.normal {
  letter-spacing: normal;
}
/* Resultado: Texto normal */

/* Espaciado */
.espaciado {
  letter-spacing: 0.1em;
}
/* Resultado: T e x t o  e s p a c i a d o */

/* Muy espaciado */
.muy-espaciado {
  letter-spacing: 0.3em;
}
/* Resultado: T  e  x  t  o    m  u  y    e  s  p  a  c  i  a  d  o */

`word-spacing` - Espaciado entre palabras

Controla el espacio entre palabras.

/* Valores de word-spacing */
.elemento {
  word-spacing: normal;    /* Default */
  word-spacing: 0.2em;     /* Más espacio */
  word-spacing: 5px;       /* Espacio fijo */
  word-spacing: -0.1em;    /* Menos espacio */
}

Ejemplos
Comparación

/* Texto normal */
p {
  word-spacing: normal;
}

/* Más espaciado entre palabras */
.espaciado {
  word-spacing: 0.3em;
}

/* Menos espaciado */
.compacto {
  word-spacing: -0.05em;
}

/* Títulos con espaciado */
h1 {
  word-spacing: 0.1em;
  letter-spacing: 0.05em;
}

/* Normal */
.normal {
  word-spacing: normal;
}
/* Resultado: Este es un texto normal */

/* Espaciado */
.espaciado {
  word-spacing: 0.5em;
}
/* Resultado: Este   es   un   texto   espaciado */

/* Compacto */
.compacto {
  word-spacing: -0.1em;
}
/* Resultado: Este es un texto compacto */

📝 Alineación y decoración del texto

`text-align` - Alineación horizontal

Define cómo se alinea el texto horizontalmente.

/* Valores de text-align */
.elemento {
  text-align: left;      /* Izquierda (default en LTR) */
  text-align: right;     /* Derecha */
  text-align: center;    /* Centrado */
  text-align: justify;   /* Justificado */
  text-align: start;     /* Inicio (depende de dirección) */
  text-align: end;       /* Final (depende de dirección) */
}

Uso común
Justificado

/* Texto normal - Izquierda */
p {
  text-align: left;
}

/* Títulos centrados */
h1, h2 {
  text-align: center;
}

/* Texto justificado (periódicos, revistas) */
.articulo {
  text-align: justify;
}

/* Alineación a la derecha (números, fechas) */
.precio, .fecha {
  text-align: right;
}

/* Botones centrados */
.contenedor-boton {
  text-align: center;
}

/* Texto justificado */
.texto-justificado {
  text-align: justify;
  hyphens: auto;  /* Guiones automáticos */
}

/* Mejor con ancho fijo */
.columna-texto {
  max-width: 65ch;  /* ~65 caracteres */
  text-align: justify;
  hyphens: auto;
}

`text-decoration` - Decoración del texto

Añade líneas decorativas al texto.

/* Valores individuales */
.elemento {
  text-decoration: none;              /* Sin decoración */
  text-decoration: underline;         /* Subrayado */
  text-decoration: overline;          /* Línea superior */
  text-decoration: line-through;      /* Tachado */
}

/* Sintaxis completa */
.elemento {
  text-decoration: underline solid red 2px;
  /* línea estilo color grosor */
}

/* Enlaces - Quitar subrayado */
a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  text-decoration: underline;
}

/* Texto tachado (precio anterior) */
.precio-anterior {
  text-decoration: line-through;
  color: #999;
}

/* Énfasis con subrayado */
.destacado {
  text-decoration: underline;
  text-decoration-color: #f39c12;
  text-decoration-thickness: 2px;
}

/* Subrayado personalizado */
.subrayado-custom {
  text-decoration: underline;
  text-decoration-color: #3498db;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* Estilos de línea */
.solido { text-decoration-style: solid; }
.doble { text-decoration-style: double; }
.punteado { text-decoration-style: dotted; }
.discontinuo { text-decoration-style: dashed; }
.ondulado { text-decoration-style: wavy; }

/* Múltiples decoraciones */
.multiple {
  text-decoration: underline overline;
}

/* Offset (separación de la línea) */
.con-offset {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Enlaces con transición suave */
a {
  color: #2c3e50;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

a:hover {
  border-bottom-color: #3498db;
}

/* Subrayado animado */
.enlace-animado {
  position: relative;
  text-decoration: none;
}

.enlace-animado::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #3498db;
  transition: width 0.3s;
}

.enlace-animado:hover::after {
  width: 100%;
}

`text-transform` - Transformación del texto

Cambia las mayúsculas/minúsculas del texto.

/* Valores de text-transform */
.elemento {
  text-transform: none;         /* Sin cambios */
  text-transform: uppercase;    /* MAYÚSCULAS */
  text-transform: lowercase;    /* minúsculas */
  text-transform: capitalize;   /* Primera Letra De Cada Palabra */
}

Uso práctico
Ejemplos visuales

/* Títulos en mayúsculas */
h1 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Botones en mayúsculas */
.boton {
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Nombres propios capitalizados */
.nombre {
  text-transform: capitalize;
}

/* Texto en minúsculas */
.email {
  text-transform: lowercase;
}

/* Sin transformación */
.normal {
  text-transform: none;
}

/* Original: "Hola Mundo CSS" */

.uppercase {
  text-transform: uppercase;
}
/* Resultado: HOLA MUNDO CSS */

.lowercase {
  text-transform: lowercase;
}
/* Resultado: hola mundo css */

.capitalize {
  text-transform: capitalize;
}
/* Resultado: Hola Mundo Css */

.none {
  text-transform: none;
}
/* Resultado: Hola Mundo CSS (sin cambios) */

Otras propiedades de texto

/* Sangría de primera línea */
p {
  text-indent: 2em;  /* Sangría de 2em */
}

/* Sangría negativa (hanging indent) */
.lista-custom {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

/* Sin sangría */
.sin-sangria {
  text-indent: 0;
}

/* Sombra de texto */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  /* x y blur color */
}

/* Múltiples sombras */
.texto-3d {
  text-shadow:
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa,
    4px 4px 0 #999;
}

/* Efecto de brillo */
.brillo {
  color: white;
  text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 30px #3498db;
}

/* Texto con contorno */
.contorno {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* Truncar texto con puntos suspensivos */
.truncar {
  white-space: nowrap;      /* No saltar línea */
  overflow: hidden;         /* Ocultar desbordamiento */
  text-overflow: ellipsis;  /* Mostrar ... */
  max-width: 200px;
}

/* Truncar en múltiples líneas */
.truncar-multilinea {
  display: -webkit-box;
  -webkit-line-clamp: 3;    /* Máximo 3 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Control de espacios en blanco */
.normal {
  white-space: normal;  /* Colapsa espacios, salta línea */
}

.nowrap {
  white-space: nowrap;  /* No salta línea */
}

.pre {
  white-space: pre;  /* Preserva espacios y saltos */
}

.pre-wrap {
  white-space: pre-wrap;  /* Preserva espacios, salta línea */
}

.pre-line {
  white-space: pre-line;  /* Colapsa espacios, preserva saltos */
}

🌐 Fuentes personalizadas

`@font-face` - Cargar fuentes propias

Permite usar fuentes personalizadas que no están instaladas en el sistema del usuario.

/* Sintaxis básica de @font-face */
@font-face {
  font-family: 'MiFuente';
  src: url('fonts/mifuente.woff2') format('woff2'),
       url('fonts/mifuente.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Usar la fuente */
body {
  font-family: 'MiFuente', Arial, sans-serif;
}

/* Fuente regular */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Fuente negrita */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Fuente cursiva */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

/* Uso */
body {
  font-family: 'Roboto', sans-serif;
}

strong {
  font-weight: 700;  /* Usa Roboto-Bold automáticamente */
}

em {
  font-style: italic;  /* Usa Roboto-Italic automáticamente */
}

/* Orden recomendado de formatos (del más moderno al más antiguo) */
@font-face {
  font-family: 'MiFuente';
  src: url('fonts/mifuente.woff2') format('woff2'),  /* Moderno, mejor compresión */
       url('fonts/mifuente.woff') format('woff'),    /* Soporte amplio */
       url('fonts/mifuente.ttf') format('truetype'); /* Fallback */
  font-display: swap;
}

Formatos de fuente:

WOFF2 - Mejor compresión, moderno ⭐
WOFF - Buen soporte, comprimido
TTF/OTF - Fallback, sin comprimir
EOT - Solo IE antiguo (obsoleto)

/* Controla cómo se muestra la fuente mientras carga */

@font-face {
  font-family: 'MiFuente';
  src: url('fonts/mifuente.woff2') format('woff2');
  font-display: swap;  /* Recomendado ⭐ */
}

/* Valores de font-display */

/* auto - Comportamiento del navegador */
font-display: auto;

/* block - Invisible hasta cargar (FOIT) */
font-display: block;

/* swap - Muestra fuente del sistema, luego cambia (FOUT) ⭐ */
font-display: swap;

/* fallback - Híbrido, timeout corto */
font-display: fallback;

/* optional - Usa fuente solo si carga rápido */
font-display: optional;

Google Fonts - La forma más fácil

Google Fonts ofrece cientos de fuentes gratuitas optimizadas.

Selecciona fuentes en Google Fonts
- Busca la fuente que te guste
- Selecciona los pesos que necesitas
- Copia el código de integración

Método 1: Link en HTML Recomendado

<!-- En el <head> de tu HTML -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Método 2: @import en CSS

/* Al inicio de tu CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Usar la fuente

body {
  font-family: 'Roboto', sans-serif;
}

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Google Fonts</title>

  <!-- Preconectar para mejor rendimiento -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Cargar fuentes -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      line-height: 1.6;
    }

    h1, h2, h3 {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
    }

    .destacado {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Título con Poppins</h1>
  <p>Texto con Roboto</p>
  <p class="destacado">Texto destacado con Poppins</p>
</body>
</html>

<!-- Cargar varias fuentes -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

/* Usar diferentes fuentes */
body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.cita {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

<!-- Fuente variable (un archivo, todos los pesos) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

/* Usar cualquier peso entre 100 y 900 */
body {
  font-family: 'Inter', sans-serif;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
p { font-weight: 400; }
.ligero { font-weight: 300; }

Optimización de fuentes

<!-- Precargar fuente crítica para mejor rendimiento -->
<link rel="preload"
      href="fonts/mifuente.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

<!-- Cargar solo caracteres latinos (reduce tamaño) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&subset=latin&display=swap" rel="stylesheet">

<!-- Solo caracteres específicos -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz&display=swap" rel="stylesheet">

/* ✅ Buenas prácticas */

/* 1. Limita el número de fuentes (máximo 2-3) */
body {
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
}

/* 2. Carga solo los pesos que necesitas */
/* ❌ Malo: Cargar 9 pesos */
/* ✅ Bueno: Cargar 2-3 pesos (400, 600, 700) */

/* 3. Usa font-display: swap */
@font-face {
  font-family: 'MiFuente';
  src: url('fonts/mifuente.woff2') format('woff2');
  font-display: swap;  /* ⭐ */
}

/* 4. Siempre incluye fallback */
body {
  font-family: 'Roboto', -apple-system, Arial, sans-serif;
  /* Si Roboto falla, usa fuentes del sistema */
}

/* 5. Preconecta a Google Fonts */
/* <link rel="preconnect" href="https://fonts.googleapis.com"> */

🎓 Resumen

Puntos clave de esta lección:

Font-family

✅ Sans-serif - Interfaces modernas (Arial, Helvetica)
✅ Serif - Contenido editorial (Georgia, Times)
✅ Monospace - Código (Courier, Consolas)
✅ System Font Stack - Fuentes nativas del SO (mejor rendimiento)

Tamaño, peso y estilo

✅ font-size - Usa rem para escalabilidad (1rem = 16px)
✅ font-weight - 400 (normal), 700 (bold), 100-900
✅ font-style - normal, italic, oblique
✅ font (shorthand) - Combina múltiples propiedades

Espaciado

✅ line-height - 1.5-1.8 para lectura, sin unidad ⭐
✅ letter-spacing - 0.05-0.15em para mayúsculas
✅ word-spacing - Raramente necesario

Alineación y decoración

✅ text-align - left, center, right, justify
✅ text-decoration - none, underline, line-through
✅ text-transform - uppercase, lowercase, capitalize
✅ text-shadow - Sombras y efectos de texto

Fuentes personalizadas

✅ @font-face - Cargar fuentes propias (WOFF2 recomendado)
✅ Google Fonts - Fuentes gratuitas optimizadas ⭐
✅ font-display: swap - Mejor UX durante carga
✅ Optimización - Limitar fuentes y pesos (2-3 fuentes máx)

Próximo paso: En la siguiente lección aprenderás sobre el modelo de caja (Box Model) en CSS.

🐝

4. Tipografía y Texto

🔤 Propiedad font-family y tipos de fuente

Sintaxis básica

Tipos genéricos de fuentes

Stack de fuentes del sistema (System Font Stack)

Fuentes con espacios en el nombre

📏 Tamaño, peso y estilo de fuente

font-size - Tamaño de fuente

font-weight - Peso de fuente

font-style - Estilo de fuente

Propiedad abreviada font

📐 Espaciado del texto

line-height - Altura de línea

letter-spacing - Espaciado entre letras

word-spacing - Espaciado entre palabras

📝 Alineación y decoración del texto

text-align - Alineación horizontal

text-decoration - Decoración del texto

text-transform - Transformación del texto

Otras propiedades de texto

🌐 Fuentes personalizadas

@font-face - Cargar fuentes propias

Google Fonts - La forma más fácil

Optimización de fuentes

🎓 Resumen

🔤 Propiedad `font-family` y tipos de fuente

`font-size` - Tamaño de fuente

`font-weight` - Peso de fuente

`font-style` - Estilo de fuente

Propiedad abreviada `font`

`line-height` - Altura de línea

`letter-spacing` - Espaciado entre letras

`word-spacing` - Espaciado entre palabras

`text-align` - Alineación horizontal

`text-decoration` - Decoración del texto

`text-transform` - Transformación del texto

`@font-face` - Cargar fuentes propias