Propiedades Tipográficas

Mejora la legibilidad y accesibilidad dominando las propiedades tipográficas de CSS: font-size con rem, font-weight, line-height y font-style. Con pequeños ajustes, el texto se vuelve más claro, cómodo y consistente en distintos dispositivos. Aquí verás cómo aplicar estos cambios con clases simples como normal, light, bold, compact, space e italic.

¿Cómo ajustar el tamaño de fuente con rem para mejorar la accesibilidad?

Usar rem en font-size garantiza un tamaño proporcional a la configuración del dispositivo. 1rem equivale a 16 píxeles, y se adapta si la persona sube el tamaño de fuente en su sistema. Es recomendable utilizar rem para no perder legibilidad cuando el usuario necesita ampliar la tipografía.

.normal {
  font-size: 1rem;
}

• 1rem: 16 px por defecto del navegador.
• Escala flexible según ajustes del usuario.
• Cambia el valor según necesidad: 1, 1.2, 2, etc.
• Mejora la visibilidad sin recalcular píxeles.

¿Qué es font-weight y cómo elegir el peso adecuado?

El peso de la fuente define qué tan delgada o gruesa se ve. Con font-weight puedes ir de 100 a 900, pero no todas las fuentes incluyen todos los pesos. En fuentes por defecto, 300 y 400 pueden verse casi iguales; desde 600 se nota más diferencia. 900 se percibe como muy negrita, similar a bold.

.light {
  font-weight: 300;
}

.bold {
  font-weight: 900;
}

• Rango típico: 100 a 900.
• Variación visible: aumenta desde 600.
• Depende de la familia tipográfica disponible.
• Úsalo según el contenido: ligero para textos largos, pesado para énfasis.

¿Cómo usar line-height y font-style para mejorar la legibilidad?

El interlineado con line-height añade “aire” entre líneas. En un párrafo con varias líneas (incluso separadas con break line), un valor bajo compacta el texto y uno alto facilita la lectura. No uses unidades: se declara con número.

.compact {
  line-height: 1;
}

.space {
  line-height: 2;
}

• 1: texto compacto, menos separación.
• 2: mucho “aire”, lectura relajada.
• Intermedios útiles: 1.5 o 1.2 según el bloque.
• Ajusta según la longitud del texto y el contexto.

El estilo de la fuente se maneja con font-style. Hay tres opciones: normal (también llamado “roman”), italic y oblique. Oblique inclina el texto de forma artificial cuando no existe una versión cursiva nativa.

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

.normal {
  font-style: normal; /* valor por defecto */
}

• normal: estilo por defecto de la familia.
• italic: variante cursiva cuando existe.
• oblique: inclinación artificial cuando no hay cursiva.

¿Qué combinaciones de font-size, font-weight, line-height y font-style te funcionan mejor para lograr legibilidad y ritmo visual? Comparte tus dudas y ejemplos en los comentarios.