Tipografía y Google Fonts

El 90 % de la web es texto. Una buena tipografía hace que un sitio se vea profesional y que la gente realmente lea; una mala lo vuelve amateur y cansado. En esta lección aprenderás a elegir y cargar fuentes (con Google Fonts y @font-face), a controlar tamaños, interlineado y espaciado, y a crear una escala tipográfica coherente.

Concepto

Tipografía no es sólo "qué fuente uso". Incluye tamaño, peso, interlineado, ancho de línea, espaciado y jerarquía. Piensa en un periódico: el titular grande y grueso, el subtítulo mediano, el cuerpo cómodo de leer. Esa jerarquía guía la vista del lector.

Familias principales:

Tipo	Características	Uso típico	Ejemplos
Serif	Con remates en las letras	Editorial, elegante, tradicional	Georgia, Playfair Display, Lora
Sans-serif	Sin remates, limpia	Interfaces, web moderna	Inter, Roboto, Poppins, Montserrat
Monospace	Todas las letras miden igual	Código	Fira Code, JetBrains Mono
Display	Decorativas	Sólo títulos o logos	Bebas Neue, Lobster

font-family y pilas de fuentes

css

body {
  /* Si la primera no está disponible, prueba la siguiente */
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

Los nombres con espacios van entre comillas.
Termina siempre con una familia genérica (sans-serif, serif, monospace).

La pila del sistema usa la fuente nativa de cada dispositivo (San Francisco en Apple, Segoe UI en Windows, Roboto en Android): carga instantánea y aspecto nativo.

css

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

Google Fonts

fonts.google.com ofrece cientos de fuentes gratuitas para uso comercial.

Busca una fuente (por ejemplo, Inter) y elige los pesos que necesitas (400, 600, 700).
Copia el código que te da Google en el head, antes de tu hoja de estilos:

html

<head>
  <!-- preconnect: abre la conexión con los servidores de fuentes cuanto antes -->
  <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=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>

Úsala en tu CSS:

css

body {
  font-family: "Inter", system-ui, sans-serif;
}

h1, h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
}

También puedes importarla desde el CSS (más lento que link porque se descarga después del CSS):

css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

Buena práctica

Carga sólo los pesos que uses: cada peso es un archivo extra. Lo normal son 2 fuentes como máximo (una para títulos y otra para texto) y 2–4 pesos en total.

font-display

El parámetro &display=swap de la URL indica qué hacer mientras la fuente se descarga:

swap: muestra el texto con una fuente de respaldo y la cambia al cargar (recomendado; el texto nunca es invisible).
block: oculta el texto hasta ~3 s (mala experiencia).
optional: si no carga rápido, se queda con la de respaldo (ideal para rendimiento máximo).

@font-face: alojar tus propias fuentes

Para fuentes de pago, fuentes corporativas del cliente o para no depender de Google (privacidad, RGPD en Europa):

css

/* Descarga los archivos .woff2 (p. ej. con google-webfonts-helper) y colócalos en /fonts */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v13-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v13-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body { font-family: "Inter", sans-serif; }

Usa el formato WOFF2: es el más comprimido y lo soportan todos los navegadores actuales.

Fuentes variables

Una sola fuente variable contiene todos los pesos (de 100 a 900) en un archivo:

css

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;    /* rango de pesos disponible */
  font-display: swap;
}

h1 { font-weight: 850; }   /* cualquier valor intermedio */

Propiedades de texto

css

.texto {
  font-size: 1.125rem;         /* 18px */
  font-weight: 400;            /* 100–900; normal = 400, bold = 700 */
  font-style: italic;
  line-height: 1.6;            /* interlineado SIN unidad: multiplica el tamaño de fuente */
  letter-spacing: 0.02em;      /* espacio entre letras */
  word-spacing: 0.1em;
  text-align: left;            /* left | center | right | justify */
  text-transform: uppercase;   /* uppercase | lowercase | capitalize */
  text-decoration: underline wavy #ef4444;  /* línea, estilo, color */
  text-underline-offset: 4px;
  text-indent: 2em;
  white-space: nowrap;         /* no salta de línea */
  text-wrap: balance;          /* reparte las líneas de un título de forma equilibrada */
}

Error común

Poner line-height con unidades (line-height: 24px). Si un hijo tiene un tamaño de fuente mayor, hereda los 24px fijos y las líneas se encimarán. Usa valores sin unidad (1.5): se recalculan para cada tamaño.

Truncar texto con puntos suspensivos

css

/* Una línea */
.truncar {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Varias líneas (p. ej. 3) */
.truncar-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Prueba combinaciones

Escala tipográfica

En lugar de inventar tamaños, usa una escala: cada nivel se multiplica por una razón fija (1.25 = "tercera mayor").

css

:root {
  --texto-sm:  0.8rem;    /* 12.8px */
  --texto-base: 1rem;     /* 16px */
  --texto-lg:  1.25rem;   /* 20px */
  --texto-xl:  1.563rem;  /* 25px */
  --texto-2xl: 1.953rem;  /* 31px */
  --texto-3xl: 2.441rem;  /* 39px */
  --texto-4xl: 3.052rem;  /* 49px */
}

h1 { font-size: var(--texto-4xl); }
h2 { font-size: var(--texto-3xl); }
h3 { font-size: var(--texto-2xl); }
small { font-size: var(--texto-sm); }

Herramienta útil: typescale.com. Y para títulos fluidos sin media queries:

css

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

Reglas de legibilidad

Tamaño del cuerpo: mínimo 16px (1rem); 17–18px es muy cómodo.
Interlineado: 1.5–1.7 para párrafos; 1.1–1.25 para títulos grandes.
Ancho de línea: 45–75 caracteres → max-width: 65ch.
Contraste suficiente (no gris claro sobre blanco).
Evita text-align: justify en web: crea "ríos" de espacios en pantallas angostas.
Evita textos largos en MAYÚSCULAS o cursiva; úsalos para detalles.

Ejemplo completo: estilos base de un blog

css

:root {
  --fuente-texto: "Inter", system-ui, sans-serif;
  --fuente-titulos: "Playfair Display", Georgia, serif;
}

body {
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.7;
  color: #1f2937;
}

.articulo {
  max-width: 68ch;
  margin-inline: auto;
  padding: 2rem 1rem;
}

.articulo h1,
.articulo h2 {
  font-family: var(--fuente-titulos);
  line-height: 1.15;
  text-wrap: balance;
  color: #111827;
}

.articulo h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); margin-bottom: 0.5em; }
.articulo h2 { font-size: 1.75rem; margin: 2em 0 0.6em; }
.articulo p  { margin-bottom: 1.2em; }

.articulo .entradilla {
  font-size: 1.25rem;
  color: #4b5563;
}

.articulo a {
  color: #7c3aed;
  text-underline-offset: 3px;
}

Ejercicios

Carga desde Google Fonts Poppins (400 y 600) y aplícala al body, con respaldo del sistema.
Crea una clase .etiqueta en mayúsculas, 12px, con letras separadas y peso 600.
Haz que la descripción de una tarjeta muestre como máximo 2 líneas, con puntos suspensivos.
Define una escala de 5 tamaños con variables y aplícala a h1, h2, h3, p y small.

Ver solución

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=Poppins:wght@400;600&display=swap" rel="stylesheet">

css

body { font-family: "Poppins", system-ui, sans-serif; }

.etiqueta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.tarjeta__descripcion {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:root {
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.375rem;
  --t-xl: 1.875rem;
  --t-2xl: 2.5rem;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p  { font-size: var(--t-base); }
small { font-size: var(--t-sm); }

Resumen

Usa pilas de fuentes que terminen en una familia genérica.
Google Fonts: preconnect + link con display=swap, y sólo los pesos necesarios.
@font-face con WOFF2 para alojar tus propias fuentes; las fuentes variables ahorran archivos.
line-height sin unidad, cuerpo de 16–18px y líneas de ~65ch.
Usa una escala tipográfica y clamp() para títulos fluidos.

Siguiente: El modelo de caja.

Tipografía y Google Fonts ​

Concepto ​

font-family y pilas de fuentes ​

Google Fonts ​

font-display ​

@font-face: alojar tus propias fuentes ​

Fuentes variables ​

Propiedades de texto ​

Truncar texto con puntos suspensivos ​

Prueba combinaciones ​

Escala tipográfica ​

Reglas de legibilidad ​

Ejemplo completo: estilos base de un blog ​

Ejercicios ​

Resumen ​