C20Usar medidas relativas para fijar la anchura de las columnas de modo que las líneas tengan de media 80 caracteres o menos cuando se cambia el tamaño del navegador

Aplicabilidad

CSS

Descripción

El propósito de esta técnica es garantizar que CSS se utilice de forma que permita a los usuarios ver el contenido de modo que la longitud de línea pueda ser, de media, de 80 caracteres o menos. Esto hace posible que los usuarios con determinadas discapacidades de lectura o de visión, que tienen dificultades para no perder el punto de lectura en líneas de texto largas, puedan ver el contenido e interactuar con él de forma más eficaz. Esta técnica también permite que la anchura de las columnas aumente a medida que crece el tamaño de la fuente, lo que reduce la posibilidad de que el texto quede recortado al aumentar su tamaño.

Tenga en cuenta que esta técnica no exige a los autores utilizar CSS para limitar la anchura de las líneas de texto a menos de 80 caracteres en la vista predeterminada. Más bien, la recomendación de usar medidas relativas en las maquetaciones CSS ayuda a garantizar que los autores no fijen la anchura de las columnas de un modo que impida a los usuarios ver el contenido con líneas de 80 caracteres o menos.

Ejemplos

#main-content {max-width: 70em}

<div id="main-content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

#main-content {width: 90%}

<div id="main-content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

Pruebas

Recursos

• CSS Box Model Module Level 3
• Fixed, fluid and elastic layouts (maquetaciones fijas, fluidas y elásticas)
• Choose a comfortable measure - The Elements of Typographic Style Applied to the Web (elegir una medida de línea cómoda)