Ir al contenido

CSS Texto adaptable

De WikiJournal

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+