Textos y tipografía en CSS

La mayor parte de una web es texto, así que cuidar la tipografía es la forma más rápida de mejorar su aspecto. En esta lección verás cómo elegir la fuente, el tamaño y el interlineado, y todas las propiedades que controlan cómo se coloca el texto: alineación, subrayados, sangrías, espacios, saltos de línea, textos que no caben y columnas.

Cómo cargar fuentes que el usuario no tiene instaladas (@font-face, Google Fonts, fuentes variables) lo tienes en su propia lección: fuentes web.

La fuente: font-family

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Se escribe una lista: si el ordenador no tiene la primera fuente, prueba con la segunda, y así hasta el final. Termina siempre con una familia genérica:

• serif: con remates (como Times).
• sans-serif: sin remates (como Arial).
• monospace: todas las letras miden lo mismo (como el código).
• system-ui: la fuente del sistema operativo.

Los nombres con espacios van entre comillas.

Usar Google Fonts

1. Entra en fonts.google.com y elige una fuente.
2. Copia la etiqueta <link> que te da y pégala en el <head>.
3. Úsala en tu CSS:

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

No cargues más de dos o tres fuentes: cada una añade peso a la página. Para webs europeas es preferible descargar las fuentes y servirlas tú mismo, por rendimiento y por privacidad; se explica paso a paso en fuentes web.

Tamaño y unidades

html { font-size: 16px; }  /* tamaño base */
p    { font-size: 1rem; }  /* 16px */
h1   { font-size: 2.5rem; } /* 40px */

• px: píxeles, un tamaño fijo.
• rem: relativo al tamaño de letra del <html>. Es la unidad recomendada, porque respeta el tamaño de letra que el usuario haya elegido en su navegador.
• em: relativo al tamaño de letra del elemento padre. Útil para espaciados que deben crecer con el texto.

Tienes todas las unidades explicadas en detalle en la lección de unidades de medida.

Grosor, estilo e interlineado

h1 {
  font-weight: 700;         /* grosor: 400 normal, 700 negrita */
  font-style: italic;       /* cursiva */
  line-height: 1.2;         /* interlineado */
  letter-spacing: 0.02em;   /* espacio entre letras */
  text-transform: uppercase; /* mayúsculas */
}

Estas propiedades se explican a fondo, con fuentes variables y tamaños fluidos, en fuentes web. Aquí nos centramos en cómo se coloca el texto.

Alineación: text-align

h1       { text-align: center; }
.precio  { text-align: right; }
p        { text-align: left; }      /* por defecto en español */
.legal   { text-align: justify; }   /* los dos márgenes rectos */

text-align alinea el contenido en línea (texto, enlaces, imágenes, botones inline-block) dentro de su caja. No mueve la caja en sí: para centrar un bloque se usa margin: 0 auto o Flexbox.

Existen también start y end, que significan “al principio” y “al final” según el sentido de escritura. En español son lo mismo que left y right, pero en una web en árabe o hebreo (que se leen de derecha a izquierda) se dan la vuelta solos. Por eso start es el valor por defecto real.

Cuidado con justify: en columnas estrechas, como en un móvil, crea grandes huecos entre palabras (“ríos” blancos) que dificultan la lectura. Si lo usas, actívalo solo en pantallas anchas y con guiones automáticos (hyphens, más abajo).

text-align-last controla la última línea de un párrafo justificado, que normalmente queda alineada a la izquierda.

Subrayados y líneas: text-decoration

text-decoration es un atajo de cuatro propiedades:

a {
  text-decoration-line: underline;       /* underline, overline, line-through, none */
  text-decoration-style: solid;          /* solid, double, dotted, dashed, wavy */
  text-decoration-color: #e76f51;
  text-decoration-thickness: 2px;        /* grosor de la línea */
}

/* Lo mismo en una línea */
a { text-decoration: underline solid #e76f51 2px; }

Y una propiedad aparte muy útil, que separa la línea del texto:

a {
  text-underline-offset: 4px;   /* el subrayado no toca las letras que bajan (g, p, y) */
}

Usos típicos:

.precio-anterior { text-decoration: line-through; color: #888; }  /* 49,99 € tachado */
.error-ortografia { text-decoration: underline wavy red; }       /* ondulado */
nav a { text-decoration: none; }                                  /* menú sin subrayado */
nav a:hover { text-decoration: underline; }

Consejo: en los enlaces dentro de un párrafo, mantén el subrayado. Si lo quitas, el enlace solo se distingue por el color y a quien no ve bien los colores le cuesta encontrarlo. En menús y botones, donde es evidente que son enlaces, sí puedes quitarlo.

Sangría y espacios

text-indent: sangría de la primera línea

.novela p {
  text-indent: 1.5em;   /* la primera línea empieza más adentro */
  margin: 0;            /* en libros, sangría en lugar de separación */
}

Es el estilo de los libros impresos: sin espacio entre párrafos, pero con sangría. En la web es más habitual separar los párrafos con margen, pero para textos largos de tipo literario queda muy bien.

word-spacing: espacio entre palabras

.titular-espaciado { word-spacing: 0.3em; }

Se usa muy poco. Para ajustar el espacio entre letras, usa letter-spacing.

Espacios y saltos de línea: white-space

En HTML, varios espacios seguidos o un salto de línea en el código se convierten en un solo espacio. white-space decide qué hacer con ellos y si el texto puede partirse en varias líneas:

Valor	Junta espacios	Respeta saltos del código	Parte líneas largas
normal	Sí	No	Sí
nowrap	Sí	No	No: todo en una línea
pre	No	Sí	No
pre-wrap	No	Sí	Sí
pre-line	Sí	Sí	Sí

.boton  { white-space: nowrap; }     /* "Añadir al carrito" nunca se parte */
.poema  { white-space: pre-line; }   /* respeta los saltos de verso */
.codigo { white-space: pre; }        /* como <pre>: todo tal cual */
.chat   { white-space: pre-wrap; }   /* mensajes con los espacios y saltos que escribió el usuario */

pre-wrap es muy útil al mostrar texto que escribe un usuario (comentarios, mensajes): conserva sus saltos de línea sin que tengas que convertirlos en <br>.

Palabras que no caben: overflow-wrap y hyphens

overflow-wrap

Una URL larguísima o una palabra como supercalifragilisticoespialidoso no tiene espacios donde partirse. En una caja estrecha, se sale por la derecha y rompe el diseño. overflow-wrap permite cortarla por cualquier letra solo si no hay otra opción:

.comentario {
  overflow-wrap: break-word;   /* o anywhere */
}

La diferencia entre break-word y anywhere es sutil: anywhere también permite que la caja se haga más estrecha al calcular tamaños mínimos (útil dentro de Flexbox o Grid). Existe también word-break: break-all, que corta cualquier palabra aunque quepa en la línea siguiente; úsalo solo para cosas como códigos o hashes.

hyphens: guiones automáticos

<html lang="es">

p {
  hyphens: auto;   /* el navegador parte las palabras con guion donde toca */
}

El navegador usa las reglas de separación silábica del idioma de la página, por eso es imprescindible el atributo lang="es" en el HTML. Con guiones, el texto justificado deja muchos menos huecos. También puedes sugerir dónde partir una palabra concreta con ­ en el HTML (un guion “blando” que solo aparece si hace falta).

Texto que no cabe: puntos suspensivos

En una sola línea: text-overflow

Para títulos de tarjetas que deben ocupar una línea como máximo, se combinan tres propiedades (ya las viste en display, visibility y overflow):

.titulo-tarjeta {
  white-space: nowrap;      /* no partir la línea */
  overflow: hidden;         /* ocultar lo que sobra */
  text-overflow: ellipsis;  /* poner "…" al final */
}

Las tres son necesarias. Sin nowrap el texto se parte en líneas y nunca desborda; sin overflow: hidden el texto sobresale y no hay nada que cortar.

En varias líneas: line-clamp

Para mostrar, por ejemplo, las dos primeras líneas del resumen de un artículo:

.resumen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* número de líneas */
  line-clamp: 2;           /* versión estándar, para el futuro */
  overflow: hidden;
}

Las propiedades con -webkit- parecen raras, pero funcionan en todos los navegadores actuales (Chrome, Firefox, Safari, Edge). Es la forma estándar de facto mientras la propiedad line-clamp sin prefijo termina de implantarse.

Cuidado: el texto oculto sigue en el HTML y los lectores de pantalla lo leen entero. Si el contenido cortado es importante, pon un enlace de “Leer más”.

Líneas equilibradas: text-wrap

Un truco moderno para titulares:

h1, h2 { text-wrap: balance; }   /* reparte las palabras para que las líneas midan parecido */
p      { text-wrap: pretty; }    /* evita que la última línea tenga una sola palabra */

Sin balance, un titular de dos líneas puede quedar con la primera llena y una palabra suelta en la segunda. Con él, el navegador equilibra las dos. Si un navegador no lo admite, simplemente lo ignora.

Texto en columnas

Como en un periódico, puedes repartir un texto largo en varias columnas:

.articulo {
  column-count: 2;              /* dos columnas */
  column-gap: 32px;             /* separación */
  column-rule: 1px solid #ddd;  /* línea entre columnas */
}

/* Mejor aún: columnas de un ancho mínimo, tantas como quepan */
.articulo {
  columns: 18em;
}

.articulo h2 {
  column-span: all;             /* un título que cruza todas las columnas */
}

Con columns: 18em, en el móvil habrá una sola columna y en una pantalla ancha, dos o tres, sin media queries. Úsalo con textos cortos o listas: si el usuario tiene que bajar hasta el final de una columna y volver a subir para leer la siguiente, se cansa. Para colocar bloques de la página, usa Grid o Flexbox, no columnas.

Tres reglas para textos legibles

1. Interlineado de 1.5 a 1.7 en párrafos. En títulos grandes, más ajustado (1.1-1.2).
2. Líneas de 50 a 75 caracteres. Con max-width: 65ch lo consigues (ch es el ancho del carácter “0”).
3. Tamaño mínimo de 16px para el texto normal. En móvil, más pequeño cansa la vista.

Errores frecuentes

• Usar text-align: center para centrar una caja. Solo centra su contenido en línea. Para el bloque, margin-inline: auto o Flexbox.
• Justificar texto en móvil sin guiones. Aparecen huecos enormes entre palabras.
• hyphens: auto sin lang. El navegador no sabe qué idioma partir y no hace nada.
• Quitar el subrayado de los enlaces del texto. Cuesta distinguirlos.
• Olvidar una de las tres propiedades del text-overflow. Sin nowrap u overflow: hidden, no aparecen los puntos suspensivos.
• Poner white-space: nowrap en textos largos. Se salen de la pantalla en móvil.
• Escribir el texto en mayúsculas en el HTML. Usa text-transform: uppercase; así el contenido sigue siendo normal.
• Columnas en textos muy largos. Obligan a subir y bajar para leer.

Resumen

Propiedad	Para qué sirve	Ejemplo
font-family	Fuente, con alternativas	"Inter", system-ui, sans-serif
font-size	Tamaño	1rem
text-align	Alineación del contenido	left, center, justify, start
text-decoration	Subrayado, tachado…	underline wavy red 2px
text-underline-offset	Separar el subrayado	4px
text-indent	Sangría de la primera línea	1.5em
word-spacing	Espacio entre palabras	0.2em
white-space	Espacios y saltos de línea	nowrap, pre-wrap
overflow-wrap	Partir palabras enormes	break-word
hyphens	Guiones automáticos	auto (con lang="es")
text-overflow	”…” en una línea	ellipsis
line-clamp	”…” tras varias líneas	-webkit-line-clamp: 2
text-wrap	Equilibrar líneas	balance, pretty
columns	Texto en columnas	18em

Ya sabes colocar el texto como quieras. El siguiente paso es cargar tus propias tipografías: sigue con fuentes web.

.titulo-tarjeta {
  overflow: hidden;
  text-overflow: ellipsis;
}