Las propiedades CSS para fuentes te permiten controlar cómo se ve cada texto en tu sitio: tamaño, grosor, espacio entre líneas y estilo. Aprenderás a usar font-size, font-weight, line-height y font-style con ejemplos prácticos para mejorar la legibilidad y el diseño tipográfico de cualquier proyecto web.

Cómo defines el tamaño de una fuente con font-size en CSS

La propiedad font-size controla qué tan grande se ve el texto. Lo recomendable es trabajar con la unidad rem, donde 1rem equivale a 16 píxeles por defecto.

css .normal { font-size: 1rem; }

Si defines el tamaño en rem, el navegador respeta la configuración de fuente que el usuario tenga en su dispositivo. Esto importa mucho cuando alguien con dificultades visuales aumenta el tamaño base: tu texto se ajusta solo, sin que tengas que hacer nada extra.

Puedes probar valores como 0.5rem, 1rem o 1.2rem y ver cómo cambia la legibilidad. Subir a 12rem rompe el diseño porque es enorme, así que el truco está en jugar con valores pequeños.

¿Por qué usar rem en lugar de píxeles fijos? Porque rem se adapta automáticamente al tamaño de fuente que el usuario configuró en su navegador o sistema, mejorando accesibilidad sin esfuerzo adicional.

Qué hace font-weight y cómo cambia el grosor del texto

La propiedad font-weight define qué tan delgada o gruesa se ve la letra. Sus valores van en una escala numérica de 100 a 900, donde 100 es muy ligero y 900 es muy pesado tipo bold.

css .light { font-weight: 300; } .bold { font-weight: 700; }

No todas las fuentes tienen disponibles todos los pesos. Algunas familias tipográficas solo soportan 400 y 700, mientras otras incluyen toda la escala completa. Si pruebas valores como 100 y 200, podrías no notar diferencia visual en fuentes limitadas.

Donde sí vas a ver cambio claro es a partir de 600 o 700, que ya se leen como negritas. Y si llegas a 900, el texto se ve aún más robusto.

• 100 a 300: peso ligero (light, thin).
• 400: peso normal por defecto.
• 600 a 900: pesos gruesos (semibold, bold, black).

Cómo mejoras la legibilidad con line-height

Cuando tienes párrafos largos, el espacio entre líneas marca la diferencia entre un texto que invita a leer y uno que cansa la vista. Aquí entra line-height, que define la altura de cada línea de texto.

css .compact { line-height: 1; } .space { line-height: 1.5; }

No necesitas agregar unidades como px o rem. Basta con un número que actúa como multiplicador del tamaño de fuente. Si pones 1, las líneas quedan comprimidas y casi se tocan. Si pones 2, el espacio entre ellas se vuelve enorme y para textos largos ya no funciona bien.

El punto dulce suele estar entre 1.2 y 1.5, valores intermedios que dan aire suficiente sin separar demasiado las líneas.

¿Cuál es el line-height ideal para textos largos? Entre 1.2 y 1.5. Este rango ofrece suficiente respiración entre líneas para lectura cómoda sin que el texto se vea desconectado.

Para qué sirve font-style y cuándo usar italic u oblique

La propiedad font-style cambia la inclinación de la fuente. Tienes tres opciones disponibles y cada una tiene un propósito específico.

css .italic { font-style: italic; }

Los valores que puedes usar son:

• normal: el estilo por defecto, sin inclinación.
• italic: aplica la versión cursiva real de la fuente, diseñada por el tipógrafo.
• oblique: inclina el texto de forma artificial cuando la fuente no tiene una versión italic propia.

La diferencia entre italic y oblique es sutil pero importante: italic usa una variante diseñada con curvas y formas únicas, mientras oblique simplemente toma la fuente normal y la inclina. Si la fuente tiene versión italic real, el resultado se ve mucho más pulido.

Con estas cuatro propiedades tienes control completo sobre la tipografía: tamaño con font-size, grosor con font-weight, espacio vertical con line-height y estilo visual con font-style. ¿Cuál vas a aplicar primero en tu próximo proyecto? Cuéntame en los comentarios.