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+