¿Cuáles son los tamaños de fuente más comunes para las etiquetas H1-H6? [Cerrado]

107

Siempre he estado inseguro de por dónde empezar como referencia general de mejores prácticas. Sí, sé que depende de tu diseño, pero ¿qué es lo más común?

Esto es lo que tengo actualmente como entrante:

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}

Sí, no utilizamos EM en mi trabajo actual.

Gracias

html css frontend

— rsturim
fuente

no crea que esta es una pregunta apropiada ya que no hay respuesta ..

— Treemonkey

Treemonkey, ¿de verdad? ¿No está bien pedir opiniones?

— rsturim

Lo que más me gusta es cuando busco algo en Google, el resultado principal es una publicación de StackOverflow y la pregunta está cerrada o en espera. Nada como la encapsulación rancia del conocimiento para resistir la prueba del tiempo.

— Kyle Kelley

No, @rsturim, no está bien pedir opiniones

— Liam

Busqué una pregunta como esta, así que mientras estaba fuera de tema para esta pila en particular, la encontré útil. Tener esta pregunta cerrada significa que no se pueden agregar más diálogos, debates o respuestas, lo que reduce el valor de esta pregunta para la comunidad en general. He visto otras preguntas fuera del tema migradas a pilas más apropiadas. ¿Se puede hacer esto para esta pregunta? Saludos ~

— Pete

Respuestas:

213

Dependería de la hoja de estilo predeterminada del navegador. Puede ver una tabla (no oficial) de los valores predeterminados de la hoja de estilo del agente de usuario CSS2.1 aquí .

Según la página mencionada anteriormente, los tamaños predeterminados se parecen a esto:

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

También vale la pena echarle un vistazo a la hoja de estilo predeterminada para HTML 4 . El W3C recomienda utilizar estos estilos como predeterminados. Un extracto resumido:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Espero que esta información sea útil.

— Rosquilla
fuente

La recomendación HTML 4 para H6 se ha ignorado y se han ganado 0.67em; hoy en día, WebKit y FF usan los mismos emtamaños que IE8. w3.org/TR/html-markup/h6.html también dice que la pantalla "típica" es 0.67em.

— Beni Cherniavsky-Paskin

¿Algún razonamiento detrás de esto o algún tipo al azar dijo una vez "habrá títulos en estos tamaños"?

— rzb

Sería una buena idea actualizar la respuesta para incluir los valores predeterminados de HTML5.

— Moha el camello todopoderoso

Aquí en HTML5 w3.org/TR/html5/rendering.html#sections-and-headings

— Sirens

@ BeniCherniavsky-Paskinthe enlace está roto, ¿pueden publicar uno nuevo?

— kuldeep

Los títulos suelen estar en negrita; que se ha desactivado para esta demostración de correspondencia de tamaño. MSIE y Opera interpretan estos tamaños de la misma manera, pero tenga en cuenta que los navegadores Gecko y Chrome interpretan el Título 6 como 11 píxeles en lugar de 10 píxeles / tamaño de fuente 1, y el Título 3 como 19 píxeles en lugar de 18 píxeles / tamaño de fuente 4 (aunque es difícil de notar la diferencia incluso en una comparación directa e imposible de usar). Parece que Gecko también limita el texto a no menos de 10 píxeles.

— Sujit Agarwal
fuente