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 se deben usar. Específicamente, ¿cuáles son las prácticas recomendadas o estándar para:
Considere tanto el párrafo como el texto del encabezado en sus respuestas. Además, cualquier estudio sobre la efectividad de varios índices o métricas sería muy útil.
Elements of Typographic Style 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 dentro de, digamos, 16 píxeles. Entonces, cualquier cosa menor que eso tendría una altura de línea de 16, todo lo que esté por encima de eso tendría una altura de línea de 32.
Algunas fuentes sostienen que la longitud ideal de una línea para leer un texto es de 45 caracteres y de 55 a 75 caracteres.
Aquí hay algunos promedios comunes de sitios web: Patrones de diseño tipográfico y mejores prácticas
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 usando esta lógica. A lo largo de los años (para investigaciones futuras, utilizando "Los elementos del estilo tipográfico: versión 4.0" de Robert Bringhurst, Hartley and Marks), el interlineado 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 sus párrafos, como puede inspeccionar en el DOM usted mismo o leyendo https://www.w3.org/TR/CSS21/sample.html y http://lists. 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 debe adaptarse a diferentes dispositivos es completamente diferente de los conceptos anteriores, como los que se muestran en los Elementos de estilo tipográfico de Robert Bringhurst. A pesar de que 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 creando un esqueleto de un archivo HTML con el básico h1, h2, h3, h4, h5, h6, párrafo, pie de página. Inspecciono la hoja de estilo del navegador para comprender el tamaño del píxel estándar que usan, la altura de línea y la jerarquía en los encabezados. Antes el tamaño de la tipografía web estaba regulado por el tipo móvil de metal/madera pero a partir de 1985, con el acuerdo entre Adobe y Apple las cosas empezaron a cambiar. Considero que hoy en día, los principales reguladores de los conceptos tipográficos son Apple, Safari, Windows, con Internet Explorer, Chrome, Firefox... Tendrás que mirar las hojas de estilo de sus navegadores para acomodar tu tipografía a lo que realmente se renderizará y en diferentes dispositivos. Aún debe seguir las prácticas de Elements of Typographic Style de Robert Bringhurst, que es un libro excelente, o seguir el sistema de secuencia de Fibonacci. Por lo general, me mantengo actualizado sobre 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 Elements of Typographic Style de Robert Bringhurst, que es un libro excelente, o seguir el sistema de secuencia de Fibonacci. Por lo general, me mantengo actualizado sobre 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 Elements of Typographic Style de Robert Bringhurst, que es un libro excelente, o seguir el sistema de secuencia de Fibonacci. Por lo general, me mantengo actualizado sobre 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 de diseño debe tener esto en cuenta y encuentro 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/
curioso