C28Medir los contenedores de texto en unidades em

Por qué es importante

Un menú lateral de 150 píxeles o un campo de 20 píxeles de alto no cambian al ampliar la letra. El texto ampliado ya no cabe. Queda cortado, se sale de la caja o se monta sobre otros elementos.

Esto afecta a personas con baja visión que necesitan la letra al 200 %. También a quien aumenta el espaciado entre líneas o letras para leer mejor.

Cómo se hace

1. Indique en em o rem el ancho y el alto de menús, barras laterales y cajas de texto.
2. Haga lo mismo con los campos de formulario: input, select y textarea.
3. Use también em o rem para el tamaño de la letra de esos elementos.
4. Siempre que pueda, prefiera min-height a un height fijo. Así la caja crece si el texto lo necesita.

Cómo comprobarlo

1. Con las herramientas del navegador (tecla F12), revise las medidas de las cajas con texto y de los campos. Deben estar en em o rem.
2. Amplíe el texto al 200 %.
3. Compruebe que los menús, las cajas y los campos crecen con el texto.
4. Compruebe que ningún texto queda cortado ni montado sobre otro.

Ejemplo

Menú lateral y campo de búsqueda medidos en em.

#menu-lateral {
  width: 12em;
  font-size: 1em;
}
#buscador input {
  width: 20em;
  min-height: 2em;
  font-size: 1em;
}