F69Texto que se corta o se pisa al agrandar la letra

Por qué es importante

Muchas personas con baja visión y muchas personas mayores agrandan la letra en el navegador para poder leer.

Si al hacerlo una frase queda cortada, un aviso se oculta o dos textos se superponen, esa información se pierde. Por ejemplo, el plazo de una convocatoria puede desaparecer dentro de una caja que no crece.

Cómo evitarlo

1. No fije la altura de las cajas que contienen texto. Use min-height en lugar de height.
2. Evite overflow: hidden en contenedores de texto.
3. Use unidades relativas, como rem o em, para la letra y los espacios.
4. Tenga cuidado con los elementos de posición absoluta y con las ventanas emergentes de tamaño fijo.
5. Deje que el contenido pase a la línea siguiente en vez de recortarlo.

Cómo comprobarlo

1. Aumente el zoom del navegador al 200 % con Ctrl y +.
2. Repita con solo el texto agrandado: en Firefox, menú Ver, Zoom, «Ampliar solo el texto»; en Chrome, Configuración, Aspecto, «Tamaño de fuente».
3. Recorra la página, incluidos menús, botones, tarjetas y ventanas emergentes.
4. Si algún texto queda cortado, oculto o encima de otro, hay fallo.

Ejemplo

Con altura fija y overflow oculto, el texto agrandado desaparece; con min-height, la caja crece.

/* Fallo: la caja no crece y el texto se corta */
.aviso {
  height: 60px;
  overflow: hidden;
}

/* Correcto: la caja se adapta al texto */
.aviso {
  min-height: 60px;
}