Generador de estilos de texto CSS

La altura de línea se declara sin unidad

line-height: 1.5 y line-height: 24px parecen lo mismo en un párrafo de 16 px, pero no lo son. El valor con unidad calcula la altura una vez y la reparte a todos los hijos tal cual: un titular de 40 px dentro de ese bloque heredaría 24 px de altura y las líneas se montarían unas encima de otras. El valor sin unidad hereda el factor, no el resultado, y cada elemento lo multiplica por su propio tamaño. Por eso el titular de la vista previa y su párrafo comparten el mismo número y aun así respiran bien los dos.

Como punto de partida: 1.4–1.6 para texto corrido, 1.05–1.25 para titulares grandes. La otra variable es el ancho: cuanta más larga sea la línea, más altura necesita para que el ojo no se pierda al saltar de renglón.

Interletrado: negativo en titulares, positivo en mayúsculas

Las fuentes se dibujan con un espaciado pensado para tamaños de lectura. Cuando subes un titular a 48 o 72 px ese espacio crece proporcionalmente y las letras empiezan a parecer sueltas. Ahí es donde entra el interletrado negativo: entre -0.01em y -0.03em basta para que la palabra se compacte y se lea como una unidad. Más allá de eso empiezas a pegar las letras.

Al revés pasa con las mayúsculas. Las versales se diseñaron para aparecer sueltas dentro de un texto en minúsculas, no en bloque; en una etiqueta o un botón todo en mayúsculas conviene abrirlas entre 0.05em y 0.12em. La misma regla vale para el texto muy pequeño, de 11 o 12 px: un poco de aire extra lo hace legible.

Fíjate en que la unidad es em y no píxeles. Así el espaciado se recalcula solo si mañana cambias el tamaño de la fuente, en vez de quedarse fijo y romperse.

Justificar en web casi siempre empeora la lectura

En un libro, el texto justificado funciona porque hay guionado y porque alguien ajustó la composición línea a línea. El navegador no hace nada de eso por defecto: para cuadrar los dos márgenes solo puede estirar los espacios entre palabras. En columnas estrechas —o sea, en casi cualquier móvil— aparecen huecos enormes que se alinean verticalmente entre líneas y forman los llamados ríos de espacio en blanco.

Si aun así lo necesitas, hay tres cosas que lo hacen soportable: activar hyphens: auto, declarar bien el idioma en la etiqueta html (sin él, el navegador no sabe dónde partir las palabras) y mantener la medida entre 60 y 75 caracteres. Prueba el modo justificado en la vista previa de arriba y verás el efecto al momento.

text-decoration ya no es solo un subrayado

Durante años, text-decoration: underline era todo lo que había: una línea de grosor fijo pegada a la base del texto, cortando las colas de las jotas y las ges. Hoy se controla por partes: text-decoration-style cambia el trazo (continuo, doble, punteado, discontinuo u ondulado), text-decoration-thickness ajusta el grosor, text-decoration-color lo pinta de un color distinto al del texto y text-underline-offset lo separa de la línea base.

La combinación más útil para enlaces dentro de un párrafo es un subrayado fino, separado dos o tres píxeles y en un tono de acento en lugar de negro. Se sigue leyendo como enlace, pero deja respirar al texto. En la guía de teoría del color está la parte de qué tono elegir sin perder contraste, y con colores en vivo puedes probar la combinación sobre una página real antes de decidirte. El resto de generadores están en código web.

Preguntas frecuentes

¿Qué altura de línea debo usar en un texto?

Para texto corrido, entre 1.4 y 1.6 sin unidad: da aire suficiente para que el ojo encuentre el siguiente renglón sin perderse. Para titulares grandes, entre 1.05 y 1.25, porque a tamaños altos el hueco entre líneas se ve enorme si dejas el valor del cuerpo. Y cuanto más larga sea la línea, más altura necesita.

¿Cuándo conviene usar interletrado negativo?

Solo en titulares grandes, a partir de unos 32 px, y con valores muy pequeños: de -0.01em a -0.03em. A tamaños altos las letras parecen separarse de más y cerrar el espacio compacta la palabra. En texto pequeño el negativo pega las letras y cuesta leer. El positivo, de 0.05em a 0.12em, es lo contrario: va bien en palabras en mayúsculas y en etiquetas diminutas.

¿Es mala idea justificar el texto en una web?

Casi siempre. El navegador justifica estirando los espacios entre palabras y, sin guionado, en columnas estrechas se abren huecos enormes que forman ríos blancos verticales. Si aun así lo necesitas, activa hyphens: auto, declara el idioma en la etiqueta html y mantén la línea entre 60 y 75 caracteres.

¿Puedo usar cualquier tipografía en este generador?

En la vista previa solo aparecen las fuentes que ya carga este sitio, Fraunces e Instrument Sans, más las genéricas del sistema: aquí no se cargan fuentes externas. El CSS que copias funciona con cualquier tipografía; basta con cambiar el nombre en font-family por el de la fuente que tengas cargada con @font-face o desde tu servicio de fuentes.