Tipografía y texto CSS
Tipografía y texto
CSS controla el texto en dos dimensiones: las propiedades de fuente (qué tipografía se usa, su tamaño, peso y estilo) y las propiedades de texto (cómo fluye: interlineado, alineación, decoración, espaciado y desbordamiento).
El texto en una página web está controlado por dos familias de propiedades CSS que operan en niveles distintos. Las propiedades de fuente definen la tipografía en sí: qué familia de letras se usa, a qué tamaño, con qué peso y en qué variante (normal, cursiva). Las propiedades de texto controlan cómo ese texto fluye en su caja: el espacio entre líneas, la alineación horizontal, la decoración visual (subrayado, tachado), las transformaciones de mayúsculas, el espaciado entre letras y el tratamiento del desbordamiento cuando el texto no cabe.
La distinción entre las dos familias no es arbitraria: las propiedades de fuente describen la tipografía como artefacto (el archivo de fuente y sus variantes). Las propiedades de texto describen el comportamiento del contenido dentro del espacio disponible. En la práctica, las propiedades de fuente se configuran globalmente — en el body o en un sistema de diseño — y se sobreescriben puntualmente. Las propiedades de texto son más contextuales: se aplican por componente según cómo necesita presentarse ese bloque de contenido.
Ambas familias se heredan de padre a hijo por defecto, lo que hace que configurar font-family y font-size en el body propague esos valores a todo el documento automáticamente. Esto es un comportamiento intencional de CSS: evita declarar la tipografía base en cada elemento.
Cómo funciona
Fuente — la tipografía
font-family declara la familia tipográfica. Acepta una lista priorizada de nombres de fuente separados por coma; el navegador usa el primero disponible en el sistema o descargado. La lista siempre debe terminar en una familia genérica (serif, sans-serif, monospace, cursive, fantasy) como fallback final garantizado.
font-size establece el tamaño de la fuente. En CSS moderno, las unidades más usadas son rem (relativo al font-size del elemento raíz <html>) y em (relativo al font-size del elemento padre). rem es más predecible para tamaños del sistema de diseño; em es útil cuando querés que el espaciado interno de un componente escale proporcionalmente con su propio tamaño de fuente.
font-weight controla el peso o grosor del trazo. Los valores numéricos van de 100 a 900 en múltiplos de 100; los valores con nombre (normal = 400, bold = 700) son atajos. El peso disponible depende de los archivos de fuente cargados — declarar font-weight: 300 en una fuente que solo tiene regular y bold renderiza el peso disponible más cercano.
font-style alterna entre la variante normal y la cursiva (italic o oblique). La diferencia técnica: italic usa el archivo de fuente diseñado específicamente como cursiva; oblique inclina mecánicamente la variante regular si no hay archivo cursivo disponible.
Ver font-family, font-size, font-weight, font-style.
Texto — el flujo del contenido
line-height controla la altura de cada línea de texto. Es el factor más importante para la legibilidad. Se recomienda un valor sin unidad (line-height: 1.5) porque es relativo al font-size del elemento — si el tamaño de fuente cambia, el interlineado escala automáticamente. Los valores con unidades fijas (px, em) pueden generar interlineados desproporcionados cuando el tamaño de fuente varía.
text-align alinea el texto dentro de su caja: left, right, center, justify. Solo afecta al texto en línea dentro de un contenedor en bloque — no reposiciona el elemento contenedor en el layout.
text-decoration agrega líneas al texto: underline, overline, line-through. Es el shorthand de text-decoration-line, text-decoration-color, text-decoration-style y text-decoration-thickness. Para quitar el subrayado de los enlaces, text-decoration: none.
text-transform transforma las mayúsculas del texto sin cambiar el HTML: uppercase (todo mayúsculas), lowercase (todo minúsculas), capitalize (inicial en mayúscula). La transformación es visual — el texto real en el DOM no cambia.
letter-spacing agrega (o reduce, con valor negativo) espacio entre los caracteres. Útil para textos en mayúsculas o titles donde el tracking tipográfico mejora la legibilidad.
white-space controla cómo el navegador trata los espacios en blanco y los saltos de línea del HTML: normal (colapsa espacios, rompe según el ancho), nowrap (no rompe), pre (preserva espacios y saltos), pre-wrap (preserva pero sí rompe), pre-line (colapsa espacios pero preserva saltos).
text-overflow define qué pasa visualmente cuando el texto desborda su contenedor. ellipsis muestra … al final del texto recortado. Requiere que el contenedor tenga overflow: hidden y white-space: nowrap para funcionar.
Ver line-height, letter-spacing, text-align, text-transform, text-decoration, white-space, text-overflow.
Cuándo usar qué
| Necesidad | Herramienta |
|---|---|
| Tamaños del sistema de diseño | font-size con rem |
| Espaciado dentro de un componente | font-size con em |
| Interlineado legible | line-height: 1.4–1.6 (sin unidad) |
Truncar texto en una línea con … | white-space: nowrap + overflow: hidden + text-overflow: ellipsis |
| Texto siempre en mayúsculas | text-transform: uppercase (no cambies el HTML) |
| Quitar subrayado de enlaces | text-decoration: none |
| Tracking en títulos en mayúsculas | letter-spacing: 0.05em–0.1em |
em vs rem para font-size: rem mide relativo a la raíz del documento y es predecible en cualquier contexto. em mide relativo al font-size del elemento padre inmediato — se acumula en elementos anidados, lo que puede producir tamaños inesperados si se anidan varios niveles. La regla general: rem para tamaños de tipografía del sistema; em para padding, margin e iconos que deben escalar con el texto de su propio componente.
text-overflow vs overflow: overflow: hidden recorta sin indicar que hay más contenido. text-overflow: ellipsis agrega la señal visual … para indicar al usuario que el texto continúa. Requiere los tres juntos (overflow: hidden + white-space: nowrap + text-overflow: ellipsis) para funcionar.