etiquetas - que es h4 en html

Tamaños de fuente H1-H6 en HTML

Question

En HTML (y en tipografía en general, supongo), parece haber algunos tamaños definidos para los elementos H1-H6.

Es decir, si el tamaño de fuente de la línea base es 16px (o 100%), entonces h1 (w / c) podría ser 2.25em (36px). Y H2 (w / c) debería ser 1.5em (24px). Etcétera. ¿De dónde vienen estas variables? El H1 = 36px, H2 = 24px, H3 = 21px, H4 = 18px, H5 = 16px, H6 = 14px, es decir. (O, si lo desea, H1 = 2em, H2 = 1.5em, H3 = 1.17em, etc., el punto no son los números en sí, sino la relación entre ellos)

¿Hay alguna fórmula matemática para ellos? ¿Tiene algo que ver con la proporción de oro o fibonacci? No he podido encontrar información sobre esto.

EDITAR: para ser más específico, cuál es el patrón; ¿por qué va de 36 a 24 a 21, o comienza desde 36 para comenzar (o, si lo desea, de 2em a 1.5em a 1.17em, etc.)?

Oh, olvidé especificar dónde encontré los números originales, son de here

Answer 1

Algunas cifras nominales:

Hoja de estilo predeterminada para HTML 4 :

• h1: 2em
• h2: 1.5em
• h3: 1.17em
• h4: 1em
• h5: 0.83em
• h6: 0.75em

Firefox 3 y Safari 4 (en realidad, WebCore) :

• h1: 2em
• h2: 1.5em
• h3: 1.17em
• h4: 1em
• h5: 0.83em
• h6: 0.67em

Answer 2

Creo que depende del navegador, que incluso puede permitir que el usuario defina los tamaños de fuente (recuerdo que Opera hizo eso). La especificación de HTML no entra en mucho detalle:

Hay seis niveles de encabezados en HTML con H1 como el más importante y H6 como el menos. Los navegadores visuales generalmente representan encabezados más importantes en fuentes más grandes que los menos importantes.

Esto es intencional ya que HTML está diseñado para describir la estructura, no la presentación del documento.

Answer 3

De una manera más general, los tamaños relacionados como este a menudo se basan en una serie geométrica, es decir, cada número sucesivo es mayor por un factor constante (algo como 1.2, o sqrt (2)) del anterior. Hay el mismo tipo de progresión en el tamaño de las llaves y llaves hexagonales, o diámetros de tornillo, etc. en mecánica, o en la familia de tamaños de papel A5 / A4 / A3 ...

Answer 4

Es dependiente del navegador, como otros dicen.

En el otro lado, hay una regla en la tipografía para establecer los tamaños de fuente: si la fuente base tiene el tamaño X , las fuentes más grandes deben crecer exponencialmente; la forma habitual es tener tamaños X*sqrt(2) , X*sqrt(2)^2 , X*sqrt(2)^3 y así sucesivamente, pero puede cambiar la base.

Sin embargo, las fuentes de computadora tienen algunos requisitos especiales.

Solían proporcionarse solo en forma de mapa de bits (por lo que los tamaños eran fijos), e incluso cuando se proporcionaban en forma vectorial, algunos formatos preferían algunos tamaños especiales: divisibles por 2 o 5 (este era el caso con las antiguas fuentes vectoriales de Amiga) ... Agfa Intellifont?).

Incluso ahora a los motores de fuentes les gustan los tamaños de enteros más, porque sus algoritmos de sugerencia funcionan mejor.

Y la gente parece acostumbrarse a los valores elegidos debido a estas restricciones técnicas, aunque los motores de fuentes mejoraron mucho ahora.

Answer 5

Muchos de ellos dicen diferentes tamaños para las etiquetas de encabezado, pero hubo una variación de bootstrap a tamaño de fuente predeterminado. Aquí se mencionan los tamaños de fuente predeterminados:

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

Answer 6

Sé que este post es viejo. Lo encontré con la misma pregunta, ¿de dónde sacaron esto? Creo que lo encontré.

Es una derivación de una escala musical pentatónica. La escala de tipo es de todos modos. Los encabezados se toman de la escala de tipo, aunque no en un orden de 1: 1.

La escala va: 8 9 10 12 14 16 18 21 24 ... La escala se duplica en 5 pasos (12 a 24). Cada paso es la base (12) veces 2 (la escala [''se duplica'']) a la potencia de i (paso) dividida por 5 (pasos ttl) [''i / 5''], redondeada al más cercano.

Así que h4 es la base, h3 es el paso 1, h2 es el paso 3 y h1 es el paso 5, o el octivo de 12 en una escala pentatónica. h5 y h6 están a 1 y 3 pasos de la base de la otra manera. Si entiendo esto, sería el equivalente de un acorde mayor, E.

Eso me tomó cerca de 2 horas para descifrar con una hoja de cálculo y una explicación de las escalas musicales.

Answer 7

Se me ocurrió el siguiente algoritmo / cálculo después de ver varios métodos diferentes para el tamaño de fuente con H1 ~ H6, p, menús, etc. con html establecido en 100% (generalmente 16px) y lo siguiente en unidades rem. Esto se ha modificado con el ''número mágico'' de 1.14 / .875 que se usa con frecuencia. El mío es .8735, que parece funcionar bien con p a 16px / 1rem hasta H1 a 36px / 2.25rem y alcanza valores de px bastante "normales" en todos los lugares como 12, 14, 16, 18, 21, 24, 28, 32, 32, 36, etc. hasta 54 para Jumbotrons y hasta .zilch, que es una exageración, lo sé. Normalmente me quedo dentro de .huge y .micro. Básicamente, comienzo en p, que es igual a 1.0rem y se multiplica por 0.8735 sucesivamente para reducir o dividir sucesivamente para aumentar:

 item rem px pt
.giant 3.38 54.4 41
.huge 2.95 47.2 35
.big 2.58 41.3 31
h1 2.25 36.0 27
h2 1.97 31.5 24
h3 1.72 27.5 21
h4 1.50 24.0 18
h5 1.31 21.0 16
h6 1.15 18.4 14
p 1.00 16.0 12
.menus 0.87 13.9 10
.legal 0.76 12.2 9
.micro 0.67 10.7 8
.zilch 0.58 9.3 7
/* Font-Sizes using pt */
.giant { font-size:41pt; }
.huge { font-size:35pt; }
.big { font-size:31pt; }
h1 { font-size:27pt; margin-top:0; }
h2 { font-size:24pt; }
h3 { font-size:21pt; }
h4 { font-size:18pt; }
h5 { font-size:16pt; }
h6 { font-size:14pt; }
p { font-size:12pt; margin-bottom:15pt; }
.menus { font-size:10pt; }
.legal { font-size: 9pt; }
.micro { font-size: 8pt; }
.zilch { font-size: 7pt; }

Últimamente he estado usando puntos (pt) que, como puede ver, son incluso más fáciles de trabajar, y antes de que todos se vuelvan fuera de forma por no usar los de rem o em, diré que, francamente, en este punto (sin juego de palabras) Realmente no creo que importe. Comencé a usar lo que es más fácil para mí. Es más fácil trabajar con puntos que se calculan en enteros simples que en desorden con rems en puntos decimales.

Answer 8

Son definidos por cada creador de navegador de forma independiente.

No son uniformes en todos los navegadores y están ahí para la semántica (encabezado grande, encabezado ligeramente más pequeño, etc.).

Si observa la especificación de HTML 4 para estos , no se menciona cómo se deben estilizar, solo que deberían ser. De la especificación:

Visual browsers usually render more important headings in larger fonts than less important ones.

Si desea que sean consistentes, debe usar una hoja de estilo de restablecimiento que los defina.

Aunque w3 ha definido una hoja de estilo predeterminada sugerida para HTML 4 con los siguientes detalles, la mayoría de los navegadores ignoran esta sugerencia:

h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6 { font-weight: bolder }

(Sí, no veo font-size: para h4)

Answer 9

Un posible enfoque de progresión es usar raíces cuadradas, mediante una fórmula como 2 / sqrt [encabezado #]. Por lo tanto, tendrías:

H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816

Para una base de fuente de 12, eso sería lo suficientemente cerca de 24, 17, 14, 12, 11, 10. Para otras bases, los resultados pueden estar un poco más alejados de los enteros.

Fibonacci funcionaría bien con la base 16, así que tendrías que:

H1=32
H2=24
H3=19
H4=16
H5=14
H6=13

Answer 10

W3C sugirió una hoja de estilo de renderización predeterminada para que los navegadores la implementen.

Notarás que tus figuras difieren de ellas. Esto se debe a que los fabricantes de navegadores tienen el hábito de ignorar todo lo que dice W3C.

Answer 11

Para bootstrap, la variación de los tamaños de fuente de las etiquetas de encabezado en píxeles es la siguiente: verifique estos encabezados de bootstrap

h1 - 36px)
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px