Al tratar de lograr el recuento de letras "ideal" por línea, ¿cómo equilibra el tamaño del contenedor y el tamaño de la fuente?

“Cualquier cosa entre 45 y 75 caracteres se considera ampliamente como una longitud de línea satisfactoria para una página de una sola columna en una cara de texto serifada en un tamaño de texto. La línea de 66 caracteres (contando letras y espacios) se considera ideal. Para el trabajo de varias columnas, un mejor promedio es de 40 a 50 caracteres”.

Fuente: Los Elementos del Estilo Tipográfico Aplicados a la Web

Al diseñar un sitio web, predominantemente para escritorio, ¿cómo equilibra un tamaño de fuente razonable con el tamaño del contenedor? Particularmente en partes del sitio web que son bastante densas en información.

Con la imagen, esto se logra fácilmente usándola como punto de parada:

ingrese la descripción de la imagen aquí

Pero sin imagen, se vuelve muy denso en apariencia y más difícil de seguir de una línea a la siguiente:

ingrese la descripción de la imagen aquí

Para estas secciones densas, ¿debo reducir el ancho del envoltorio de contenido? ¿O agrandar el tamaño de la letra? En el documento real ya hay algunos cuadros de llamadas, listas e imágenes dispersas que ayudan. Pero para las porciones donde es solo texto, ¿cómo debería tratarse? He ventilado un poco el contenido, así que no quiero ajustar el ancho o el tamaño de fuente de todo el sitio solo por algunas secciones más densas, pero si todos piensan que esa es la única forma aceptable, entonces lo haré.

Respuestas (2)

En primer lugar, esta respuesta depende completamente del contenido del texto y la sensación que desea crear. Por tu pregunta, parece que es para algún tipo de blog o artículo informativo, pero no demasiado técnico. Mi respuesta reflejará esa perspectiva.

Para estas secciones densas, ¿debo reducir el ancho del envoltorio de contenido? ¿O agrandar el tamaño de la letra?

Es importante mantener la coherencia a lo largo de la página tanto como sea posible. Como tal, creo que estas secciones de texto deben tener el mismo estilo que el otro texto, lo que significa que debemos cambiar el estilo en general.

Mirándolo, parece que hay algunas cosas que mejoraría:

  • Aplique más relleno en el contenedor. El espacio en blanco es de vital importancia. Recomendaría ir del lado de demasiado en lugar de no tener suficiente. En algún lugar alrededor de 30-40px de relleno lateral parece funcionar mejor en mi experiencia.
  • Utilice una fuente un poco más grande. Parece que estás usando ~14px, te recomiendo usar alrededor de 16px en su lugar. Consulte esta publicación relacionada con UX.SE para obtener más detalles.
  • Use uno más grandeline-height : esta es la principal diferencia. Hacer que la altura de la línea sea más grande hace que la lectura de grandes bloques de texto sea mucho más fácil de leer.

un ejemplo de las sugerencias que hice Aquí hay una demostración con los cambios recomendados aplicados para que juegues.

Dicho esto, estas recomendaciones son principalmente para un sitio visto en una computadora de escritorio. Es probable que deba reducir el tamaño de los tres puntos anteriores para los usuarios móviles. Nuevamente, la publicación de UX relacionada puede proporcionar más información sobre el tema.

Puede crear divs para la copia del cuerpo. De esa manera, controla el ancho o lo hace relativo al tamaño de la pantalla pero manteniendo proporciones más pequeñas dentro de los divs. Para cada div que cree, puede establecer el ancho, el color, el intervalo, etc. Consulte esta página: http://www.w3schools.com/tags/tag_div.asp

Al tratar de lograr el recuento de letras "ideal" por línea, ¿cómo equilibra el tamaño del contenedor y el tamaño de la fuente?
RespuestasAquíPolítica de privacidad1y, 0v