¿Cuáles son las proporciones estándar para la tipografía en la web?


25

Al diseñar un diseño web, a menudo trato de asegurarme de que mi tipografía sea proporcional y consistente. Sin embargo, no he podido encontrar ningún artículo o recurso definitivo sobre qué proporciones y tamaños deberían usarse. Específicamente, cuáles son las prácticas recomendadas o estándar para:

  • Tamaño de fuente
  • Altura de la línea
  • Ancho de línea
  • Espaciado entre líneas

Tenga en cuenta tanto el párrafo como el texto del encabezado en sus respuestas. Además, cualquier estudio sobre la efectividad de varias proporciones o métricas sería muy útil.

Respuestas:


18

Elementos de estilo tipográfico de Robert Bringhurst es una referencia completa y maravillosa para cosas como esta. Es largo pero muy valioso.

Muchos diseñadores recomiendan una cuadrícula de líneas estándar para que una línea + relleno siempre quepa en, digamos, 16 píxeles. Entonces, cualquier cosa menor que eso tendría una altura de línea de 16, todo lo que esté arriba tendría una altura de línea 32.

La longitud ideal de una línea para leer texto es de 45 caracteres para algunos y de 55-75 para otras fuentes.

Aquí hay algunos promedios comunes de los sitios web: patrones de diseño tipográfico y mejores prácticas


1

Yo diría que comience con el párrafo en 16px y use la secuencia de Fibonacci para calcular el resto. Parece que los principales navegadores están utilizando esta lógica. A lo largo de los años (para futuras investigaciones, utilizando los "Elementos del estilo tipográfico: versión 4.0" de Robert Bringhurst, Hartley y Marks), el líder se estableció en 12 puntos para una fuente de 10 puntos.

Convirtiendo 12pt a píxeles obtenemos una fuente base de 16px.

La mayoría de las hojas de estilo predeterminadas de los navegadores usan 16 píxeles para el texto de su párrafo, ya que puede inspeccionarlo usted mismo en el DOM o leyendo https://www.w3.org/TR/CSS21/sample.html y las listas http: //. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

El problema que tenemos hoy es precisamente que estamos hablando de un nuevo tipo de tipografía. La tipografía web actual que necesita adaptarse a diferentes dispositivos es completamente diferente de los conceptos pasados, como los que se muestran en los Elementos del estilo tipográfico de Robert Bringhurst. A pesar de que este es un libro excelente, la realidad es que el diseñador moderno necesita código. Por lo general, considero una matriz estándar de las principales hojas de estilo del navegador al crear un esqueleto de un archivo HTML con el h1, h2, h3, h4, h5, h6, párrafo, pie de página básicos. Inspecciono la hoja de estilo del navegador para comprender el tamaño del tamaño de píxel estándar que usan la altura de línea y la jerarquía en los encabezados. Antes de que el tamaño de la tipografía web fuera regulado por el tipo móvil de metal / madera, pero a partir de 1985, con el acuerdo entre Adobe y Apple, las cosas comenzaron a cambiar. Considero que hoy, los principales reguladores de los conceptos de tipografía son Apple, Safari, Windows, con Internet Explorer, Chrome, Firefox ... Tendrás que mirar las hojas de estilo de su navegador para acomodar tu tipografía a lo que realmente se representará y en diferentes dispositivos Aún debe seguir las prácticas de Elementos del estilo tipográfico de Robert Bringhurst, que es un excelente libro, o seguir el sistema de secuencia de Fibonacci. Normalmente me mantengo al día con los cambios en las hojas de estilo de los navegadores y leo las especificaciones de w3 aquí: Aún debe seguir las prácticas de Elementos del estilo tipográfico de Robert Bringhurst, que es un excelente libro, o seguir el sistema de secuencia de Fibonacci. Normalmente me mantengo al día con los cambios en las hojas de estilo de los navegadores y leo las especificaciones de w3 aquí: Aún debe seguir las prácticas de Elementos del estilo tipográfico de Robert Bringhurst, que es un excelente libro, o seguir el sistema de secuencia de Fibonacci. Normalmente me mantengo al día con los cambios en las hojas de estilo de los navegadores y leo las especificaciones de w3 aquí:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Sin embargo, creo que el campo Diseño necesita tener esto en cuenta y creo que la educación en la práctica no se actualiza con Realidades actuales. También puede leer más aquí en mi blog: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Hola @EstelaG y bienvenido a GD.SE! Tenemos reglas estrictas para spam y respuestas en enlaces. Odiaría ver tu respuesta marcada. Debería editar su pregunta para resumir los puntos principales del artículo.
curioso
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.