CSS Texto adaptable
Apariencia
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 padrerem
– unidad relativa que depende del tamaño de fuente del elemento raíz (root em)vw
– unidad equivalente al 1% del ancho del viewportvh
– unidad equivalente al 1% de la altura del viewportvmin
– el menor valor entre vw y vhvmax
– el mayor valor entre vw y vh
Unidades absolutas
px
– píxelespt
– puntospc
– 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
yoverflow-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:
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
Función | Chrome | Firefox | Safari | Edge |
---|---|---|---|---|
clamp() | 79+ | 75+ | 13.1+ | 79+ |
calc() | 19+ | 4+ | 6+ | 12+ |
vw/vh | 20+ | 19+ | 6+ | 12+ |