Las propiedades de tipografía en CSS son el conjunto de reglas que nos permiten controlar el aspecto, familia, tamaño, peso y legibilidad del texto que mostramos en nuestra página web.
Podéis tener la mejor estructura HTML del mundo y unos fondos espectaculares, pero si vuestro texto es feo, aburrido o difícil de leer, el usuario huirá despavorido (el diseño web es, en un 90%, diseño de texto).
Por ejemplo, es dificil imaginar un cartel de un festival, una invitación de boda, o cualquier publicidad, que use un único estilo de texto. En el desarrollo web ocurre exactamente lo mismo.
La tipografía que elijáis transmite la personalidad de vuestro proyecto, ya sea un blog tecnológico, una tienda de moda o un panel de control industrial.
Vamos a ver las herramientas que nos da CSS para dejar los textos perfectos.
La familia tipográfica (font-family)
La propiedad más importante es font-family. Sirve para indicarle al navegador qué tipo de letra queremos usar para un texto concreto.
La peculiaridad de esta propiedad es que no le pasamos un solo nombre, sino una lista de fuentes separadas por comas, en orden de preferencia. Esto se conoce como fallback o plan de respaldo.
body {
/* Intenta usar Roboto. Si no la tienes, usa Arial. Si tampoco, la primera sans-serif que pilles */
font-family: "Roboto", Arial, sans-serif;
}
¿Por qué hacemos esto? Porque el navegador solo puede pintar las fuentes que el usuario tenga instaladas en su ordenador. Si le pedís una fuente súper rara que solo tenéis vosotros, el visitante verá la letra por defecto de su sistema (que suele ser Times New Roman, rompiendo todo vuestro diseño).
Nunca pongáis más de tres tipografías distintas en una misma página web. Usar demasiadas fuentes distintas crea un caos visual espantoso y además ralentiza muchísimo la carga de la página. Lo ideal es elegir una fuente llamativa para los títulos y una fuente muy legible para los párrafos.
Cargar una fuente externa
Para evitar depender de las fuentes que tenga instaladas cada usuario, hoy en día podemos importar tipografías externas desde servicios como Google Fonts. Copiáis un <link> en vuestro HTML y el navegador descarga la fuente necesaria.
Cuando uséis una fuente externa, lo normal es que el propio servicio os dé un fragmento para pegar en el <head> de vuestro 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">
Después, ya podéis usar esa fuente desde CSS como cualquier otra.
body {
font-family: "Roboto", Arial, sans-serif;
}
No carguéis diez familias tipográficas con nueve pesos cada una “por si acaso”. Cada fuente externa es un archivo que el navegador tiene que descargar. Elegid pocas, elegid bien, y vuestra web cargará bastante más ligera.
El tamaño del texto (font-size)
Para hacer las letras más grandes o más pequeñas, utilizamos la propiedad font-size.
Históricamente, se han usado los píxeles (px) como medida estándar porque es muy fácil de entender (equivale a los “puntos” de un documento de Word).
h1 {
font-size: 32px; /* Un título grande y contundente */
}
p {
font-size: 16px; /* El tamaño estándar para texto de lectura */
}
Aunque los píxeles están muy bien para empezar, en el diseño web moderno y accesible se recomienda usar la unidad rem para los textos. Un rem equivale al tamaño base del navegador (normalmente 16px).
Si ponéis font-size: 2rem;, le estáis diciendo “hazlo el doble de grande que el texto normal”.
El grosor o peso (font-weight)
Si queréis destacar una palabra o hacer que un título llame más la atención, necesitáis la propiedad font-weight.
Nos permite controlar cómo de “gordita” o fina es la línea de nuestra letra. Podéis usar palabras clave como normal o bold (negrita), o podéis usar valores numéricos que van desde 100 (súper fino) hasta 900 (súper grueso).
.texto-destacado {
font-weight: bold; /* La forma clásica de poner negrita */
}
.titulo-fino {
font-weight: 300; /* Requiere que la fuente soporte este grosor */
}
Los valores numéricos solo funcionan de verdad si la fuente tiene ese peso disponible. Si pedís font-weight: 900 a una fuente que solo trae 400 y 700, el navegador hará lo que pueda, que suele ser aproximar el resultado con más voluntad que precisión.
Alineación y decoración (text-align y text-decoration)
Al igual que en cualquier procesador de textos, en CSS podemos alinear nuestros párrafos a la izquierda, derecha, al centro o justificados. Para ello usamos text-align.
.cita-centrada {
text-align: center;
}
Por otro lado, tenemos una propiedad muy habitual llamada text-decoration. Por defecto, los navegadores subrayan todos los enlaces <a> con una línea azul bastante fea. Para quitar esa línea y que el enlace parezca un texto normal (o un botón), usamos esta propiedad:
a {
text-decoration: none; /* Adiós al subrayado por defecto */
color: #ff5722; /* Y le ponemos un naranja chulo */
}
El espacio para respirar (line-height)
El line-height controla el interlineado, es decir, el espacio vertical que hay entre una línea de texto y la siguiente dentro de un mismo párrafo.
Si el interlineado es muy pequeño, las líneas se amontonan y el usuario se pierde al cambiar de renglón. Si le dais un poco de aire, el texto se vuelve inmensamente más agradable de leer (lo cuál siempre está muy bien 😊).
p {
font-size: 16px;
line-height: 1.5; /* El espacio entre líneas será 1.5 veces el tamaño de la fuente */
}
Mayúsculas, espaciado y pequeños ajustes
Además de elegir fuente y tamaño, CSS nos deja controlar otros detalles muy habituales en titulares, menús y textos secundarios.
.etiqueta {
text-transform: uppercase;
letter-spacing: 0.08em;
}
text-transform: uppercase convierte el texto a mayúsculas visualmente, sin cambiar el HTML original. letter-spacing separa un poco las letras, algo que suele funcionar bien en textos cortos en mayúsculas.
No uséis letter-spacing en párrafos largos. Separar letras puede quedar elegante en una etiqueta o un menú, pero en texto de lectura puede cansar bastante. El texto normal quiere respirar entre líneas, no entre cada letra como si estuviera enfadado.
Ejemplo de jeraquía tipográfica
Una página se entiende mejor cuando los tamaños y pesos forman una jerarquía clara. El usuario debería distinguir de un vistazo qué es un título principal, qué es un subtítulo y qué es texto normal.
h1 {
font-size: 2.5rem;
line-height: 1.1;
}
h2 {
font-size: 1.75rem;
line-height: 1.2;
}
p {
font-size: 1rem;
line-height: 1.6;
}
No se trata de hacer cada título gigantesco. Se trata de que haya una escala visual coherente, para que el lector no tenga que adivinar qué parte del contenido es más importante.
