C36No fijar la altura de los bloques de texto para que admitan más espaciado

Por qué es importante

Personas con baja visión o con dislexia leen mejor con más espacio entre líneas, palabras y letras. Para ello usan extensiones o estilos propios en el navegador.

Con más espaciado, el texto necesita más altura. Si la caja tiene height fija, las últimas líneas de una noticia o de una tarjeta de servicio quedan cortadas o se montan sobre el bloque de abajo.

Cómo se hace

1. No ponga height en párrafos, tarjetas, avisos ni otros bloques de texto que pueden ocupar varias líneas.
2. Si necesita un tamaño mínimo por diseño, use min-height, que deja crecer la caja.
3. Evite overflow: hidden en contenedores de texto, porque esconde lo que no cabe.
4. Mida los espacios en unidades relativas como em o rem.
5. En idiomas que se escriben en vertical, la caja debe poder crecer a lo ancho.

Cómo comprobarlo

1. Ponga el zoom del navegador al 100 %.
2. Aplique el espaciado ampliado con un marcador como «Text Spacing Bookmarklet» o una extensión de estilos de usuario.
3. Revise párrafos, tarjetas y avisos. Todo el texto debe verse completo, sin cortes ni solapes.
4. En las herramientas del navegador (tecla F12), busque height fijas en contenedores de texto.

Ejemplo

Tarjeta de servicio con altura mínima en lugar de altura fija.

<style>
  .tarjeta { min-height: 8em; padding: 1em; border: 1px solid #666; }
  /* Evitar: .tarjeta { height: 8em; overflow: hidden; } */
</style>
<div class="tarjeta">
  <h3>Padrón municipal</h3>
  <p>Solicite el certificado de empadronamiento en línea.</p>
</div>