Mejorando la legibilidad con CSS

Las imágenes, los íconos y los videos son una parte integral en el diseño web actual, pero el texto aún constituye la mayoría del contenido en la mayoría de los sitios web. Es importante pasar un tiempo aplicando estilos, probando y ajustando las propiedades de las fuentes, ya que el texto debe ser legible sin importar el dispositivo.

El tamaño de la fuente

Hubo un tiempo en que un tamaño de fuente de 12px para el texto del cuerpo era estándar, pero con el aumento de dispositivos con resoluciones más altas, el tamaño de fuente promedio se ubicó en algún lugar entre 15 y 18px por un tiempo. En los últimos años, ha subido nuevamente a 20px y más. El texto debe ser lo suficientemente grande para leer en los teléfonos inteligentes y aumentar con el tamaño de la pantalla para que pueda leerse a distancia en pantallas grandes como los televisores.

https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/

Ajuste de altura de línea

La altura de línea predeterminada en los navegadores es aproximadamente 1.2. De acuerdo con las Pautas de Accesibilidad al Contenido en la Web , debe estar al menos 1.5

Propiedad de línea de altura CSS

Alineando texto

Aunque algunos de nosotros preferimos el texto justificado sobre el texto alineado a la izquierda o a la derecha porque se ve mejor, se considera una mala práctica.
text-align: justify modifica el espaciado de palabras para crear líneas de la misma longitud. Esos espacios desiguales pueden dañar la legibilidad y distraer mucho.

Los tipógrafos han escrito sobre la relación entre el movimiento horizontal y vertical del ojo durante casi un siglo. En 1928, Jan Tschichold descartó el texto centrado y abogó por un texto alineado a la izquierda. Argumentó que esto ayudaría a los lectores al proporcionar un borde izquierdo (vertical) consistente para que el ojo regrese después de terminar cada línea (horizontal).

Anchos de párrafo

De acuerdo con varias fuentes, los diseñadores deben esforzarse por 45 a 85 caracteres por línea, ya que el ancho ideal para un párrafo es supuestamente 65 caracteres.

James Craig en su libro Designing With Type (publicado originalmente en 1971, ahora es su quinta edición):
La lectura de una línea larga de tipos causa fatiga: el lector debe mover la cabeza al final de cada línea y buscar el comienzo de la línea siguiente.… Una línea demasiado corta divide las palabras o frases.
65 caracteres (2,5 veces el alfabeto romano) a menudo se conocen como la medida perfecta. todos los diseñadores deben esforzarse por: 45 a 75 caracteres (incluidos espacios y puntuación) por línea.

Control preciso sobre tipografía responsiva