Estilos de texto CSS: fuentes, tamaño, grosor, subrayado y alineación
Playground de estilos de texto CSS
Texto en CSS: fuente, tamaño, negrita, subrayado, centrado | We.Inc
Un playground en vivo para el texto en CSS: familia de fuente, tamaño en px, rem o clamp(), grosor, estilo de subrayado, alineación, interlineado y espaciado, con clases de Tailwind.
Da estilo al texto en CSS con unas pocas propiedades: font-family elige la tipografía, font-size fija el tamaño (rem es lo mejor), font-weight: 700 lo pone en negrita, text-decoration añade un subrayado y text-align: center lo centra. line-height y letter-spacing controlan el espaciado. Cambia cualquiera de ellas en el playground de abajo y copia el CSS.
Las propiedades que más vas a usar
Objetivo
CSS
Tailwind
Negrita
font-weight: 700
Cursiva
font-style: italic
Subrayado
text-decoration: underline
Centrar texto
text-align: center
Texto más grande
font-size: 1.25rem
Líneas más holgadas
line-height: 1.6
leading-relaxed (1.625)
En lugar de seis páginas de referencia distintas, este único playground cubre fuente, tamaño, grosor, estilo, detalles del subrayado, alineación, interlineado y espaciado entre letras a la vez, escribe el CSS y las clases de Tailwind mientras los cambias, y añade recetas probadas para centrar texto, pilas de fuentes y carga de fuentes web.
Escribe tu propia frase en el playground o deja el texto de ejemplo.
Cambia los controles de fuente, unidad de tamaño, grosor, decoración y espaciado. La vista previa y el CSS se actualizan al instante.
Copia el bloque de CSS, o las clases de Tailwind para los mismos ajustes.
Usa las recetas de más abajo para centrar, pilas de fuentes y @font-face.
El texto de cuerpo se lee mejor en torno a 16 a 18 píxeles, con un interlineado de 1.5 a 1.7 y líneas de unos 60 a 75 caracteres.
Define los tamaños de fuente en rem para que sigan la configuración del navegador del lector. Usa clamp() para encabezados que deban crecer con la pantalla.
Carga solo los grosores de fuente que uses. Cada grosor extra de una fuente web es otro archivo que descargar.
Evita subrayar texto que no sea un enlace. Los lectores esperan que las palabras subrayadas se puedan pulsar.
Preguntas frecuentes
¿Cómo pongo texto en negrita en CSS?
Usa font-weight: bold o un número como 600 o 700. Los números entre 100 y 900 eligen entre los grosores que ofrece la fuente. Si la fuente solo tiene grosor normal, el navegador simula la negrita engrosando las letras, lo que se ve más pesado y menos nítido que un archivo de negrita real.
¿Cómo centro el texto verticalmente?
text-align solo centra en horizontal. Para centrar en vertical dentro de una caja, convierte la caja en un contenedor flex o grid: display: grid; place-items: center; centra el texto en ambos sentidos en una línea. Para una sola línea en una barra de altura fija, también funciona un line-height igual a la altura de la barra.
¿Cómo cambio el color o el grosor del subrayado?
Usa text-decoration-color, text-decoration-thickness y text-underline-offset. Por ejemplo, text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; da un subrayado azul más grueso con espacio bajo las letras.
¿line-height debe llevar unidad?
Normalmente no. Un valor sin unidad como 1.5 se multiplica por el tamaño de fuente de cada elemento, así que los encabezados y la letra pequeña dentro del bloque mantienen un espaciado razonable. Un valor fijo como 24px se hereda tal cual y puede apretar el texto más grande.
¿Qué es una pila de fuentes?
Una lista de fuentes separadas por comas en font-family. El navegador usa la primera disponible y baja por la lista si falta, terminando en una familia genérica como sans-serif o serif que siempre existe.
Unidades de tamaño: px, rem y clamp()
Los píxeles dan un tamaño exacto que ignora el tamaño de texto preferido del lector. rem es relativo al tamaño de fuente raíz, 16px por defecto, así que 1.125rem son 18px para la mayoría y crece para quienes configuran un tamaño mayor por defecto.
clamp(min, preferido, max) sirve para tamaños que deben escalar con la ventana. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) nunca es menor de 28px ni mayor de 48px y se mueve con suavidad entre ambos. Mantén una parte en rem en el valor del medio para que el zoom del navegador y los ajustes de texto sigan teniendo efecto.
Valores legibles por defecto
La mayoría de los problemas de lectura vienen de tres ajustes: texto demasiado pequeño, líneas demasiado largas y líneas demasiado apretadas. Un max-width de unos 65ch en los párrafos, un tamaño de fuente de al menos 1rem y un interlineado cercano a 1.6 resuelven casi todos antes de cualquier otro estilo.
Los encabezados grandes piden lo contrario: un interlineado más ajustado, de 1.1 a 1.2, y a menudo un letter-spacing ligeramente negativo. Las etiquetas pequeñas en mayúsculas se leen mejor con un poco de letter-spacing positivo.
Cargar fuentes web sin ralentizar la página
Cada fuente web es una descarga que puede retrasar el texto. font-display: swap muestra la fuente de reserva de inmediato y la cambia cuando llega la fuente web, para que los lectores nunca se queden mirando texto invisible. Alojar tú mismo los archivos WOFF2 evita una conexión a otro dominio.
Si usas Google Fonts, pide solo las familias y grosores que necesites en un único enlace y añade las sugerencias de preconnect que recomienda. Elegir en la pila una fuente de reserva con proporciones parecidas reduce el salto cuando entra la fuente.
Centrar texto en horizontal y en vertical
Horizontal: text-align
text-align centra las líneas dentro del bloque. Para centrar el propio bloque, dale un ancho y margin-inline: auto.
En ambos sentidos: grid con place-items
Dos líneas de CSS en el contenedor centran cualquier contenido en las dos direcciones, sea cual sea su tamaño.
Subrayados con diseño
Color, grosor, desplazamiento y estilo
Las propiedades de decoración cambian el subrayado sin tocar el color del texto. text-decoration-skip-ink evita que las líneas atraviesen los trazos descendentes.
Cargar una fuente con @font-face o Google Fonts
Fuente alojada con @font-face
Apunta src a tu archivo WOFF2. Un bloque por cada grosor y estilo que realmente uses.
Enlace de Google Fonts
Pide solo los grosores que uses. display=swap configura font-display por ti.
Valores legibles para empezar
Una base de texto pequeña y sensata
Tamaño de cuerpo, interlineado y ancho de línea definidos una vez; encabezados más ajustados. Adapta los colores y tamaños a tu diseño.
Equivalentes en Tailwind
CSS y las clases de Tailwind correspondientes (tema por defecto)