CSS Texto adaptable

CSS Texto adaptable es un enfoque para el diseño de contenido textual que garantiza una visualización óptima del texto en diversos dispositivos y pantallas. Esta tecnología es una parte esencial del diseño web responsivo.

Unidades de medida principales

Unidades relativas

em – unidad relativa que depende del tamaño de fuente del elemento padre
rem – unidad relativa que depende del tamaño de fuente del elemento raíz (root em)
vw – unidad equivalente al 1% del ancho del viewport
vh – unidad equivalente al 1% de la altura del viewport
vmin – el menor valor entre vw y vh
vmax – el mayor valor entre vw y vh

Unidades absolutas

px – píxeles
pt – puntos
pc – picas

Propiedades

font-size — tamaño de la fuente.
line-height — altura de línea.
font-weight — grosor de la fuente.
text-align — alineación del texto.
word-wrap y overflow-wrap — control de salto de línea en las palabras.

Técnicas de adaptación

Tipografía fluida (Fluid Typography)

Fluid Typography permite escalar el texto de manera fluida según el tamaño de la pantalla:

.fluid-text {
    font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Media Queries

Las Media Queries permiten definir diferentes estilos según el tamaño de la pantalla:

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }
}

La función calc()

La función calc() permite combinar diferentes unidades de medida:

.adaptive-heading {
    font-size: calc(16px + 2vw);
    line-height: calc(1.1em + 0.5vw);
}

Funciones modernas de CSS

clamp()

La función clamp() establece valores mínimos, preferidos y máximos:

.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

min() y max()

Las funciones min() y max() ayudan a establecer límites dinámicos:

.paragraph {
    width: min(65ch, 100%);
    font-size: max(1rem, 2vw);
}

Ejemplos de uso

Título adaptable

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: calc(1rem + 2vw);
}

Párrafo legible

p {
    font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
    line-height: 1.6;
    max-width: 65ch;
    margin: 0 auto;
}

Resultado del texto legible:

Pruebe el código en una página separada

Consejos prácticos

Utiliza unidades de medida relativas en lugar de absolutas
Combina diferentes técnicas para obtener resultados óptimos
Prueba el diseño en distintos dispositivos
Considera la legibilidad del texto
Establece valores mínimos y máximos para evitar tamaños extremos

Compatibilidad con navegadores

Función	Chrome	Firefox	Safari	Edge
clamp()	79+	75+	13.1+	79+
calc()	19+	4+	6+	12+
vw/vh	20+	19+	6+	12+