Taille de police H1-H6 en HTML

En HTML (et en typographie en général, je suppose), il semble y avoir des tailles définies pour les éléments H1-H6.

Par exemple, si la taille de la police de base est 16px (ou 100%), alors h1 (w / c) devrait être 2.25em (36px). Et H2 (w / c) devrait être 1.5em (24px). Etc. D’où viennent ces variables? Le H1 = 36px, H2 = 24px, H3 = 21px, H4 = 18px, H5 = 16px, H6 = 14px, c’est-à-dire. (ou, si vous voulez, H1 = 2em, H2 = 1.5em, H3 = 1.17em, etc., le point n’est pas les nombres eux-mêmes, mais la relation entre eux)

Y a-t-il une formule mathématique pour eux? Cela a-t-il quelque chose à voir avec le nombre d’or ou le fibonacci? Je n’ai pas pu trouver d’informations à ce sujet.

EDIT: pour être plus précis, quel est le modèle; pourquoi cela va-t-il de 36 à 24 à 21, ou à partir de 36 pour commencer (ou, si vous voulez, de 2em à 1.5em à 1.17em, etc.)?

Oh, j’ai oublié de préciser où je suis venu avec les numéros originaux, ils sont d’ ici

Je sais que cet article est vieux. Je suis tombé sur la même question, d’où ils proviennent. Je pense que je l’ai trouvé.

C’est une dérivation d’une balance musicale pentatonique. L’échelle de type est de toute façon. Les titres sont pris à partir de l’échelle Type, mais pas dans un ordre 1: 1.

La balance va: 8 9 10 12 14 16 18 21 24 … La balance double en 5 étapes (12 à 24). Chaque pas est la base (12) fois 2 (l’échelle [«il double»]) à la puissance de i (pas) divisé par 5 (pas de ttl) [‘i / 5’] – arrondi au plus proche.

Donc h4 est la base, h3 est l’étape 1, h2 est l’étape 3 et h1 est l’étape 5, ou l’octive de 12 sur une échelle pentatonique. h5 et h6 sont à 1 et 3 pas de la base dans l’autre sens. Si je comprends bien, ce serait l’équivalent d’un accord majeur E.

Cela m’a pris environ 2 heures pour comprendre un tableur et une explication des gammes musicales.

Ils sont définis indépendamment par chaque créateur de navigateur.

Ils ne sont pas uniformes d’un navigateur à l’autre et sont là pour la sémantique (en-tête large, en-tête légèrement plus petit, etc.).

Si vous regardez la spécification HTML 4 pour ces derniers , il n’ya aucune mention de la façon dont ils sont censés être stylés, mais seulement de leur qualité . De la spécification:

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

Si vous souhaitez qu’elles soient cohérentes, vous devez utiliser une feuille de style de réinitialisation qui les définit.

Même si w3 a défini une feuille de style par défaut pour HTML 4 avec les détails suivants, la plupart des navigateurs ignorent cette suggestion:

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

(oui, je ne vois pas font-size: pour h4)

Il est dépendant du navigateur, comme d’autres disent.

D’un autre côté, il existe une règle de typographie pour définir les tailles de police: si la police de base a la taille X , les fonts plus grandes doivent croître de manière exponentielle; la manière habituelle est d’avoir les tailles X*sqrt(2) , X*sqrt(2)^2 , X*sqrt(2)^3 et ainsi de suite, mais vous pouvez changer la base.

Cependant, les fonts informatiques ont des exigences particulières.

Auparavant, ils étaient fournis sous forme bitmap (les tailles étaient donc fixes) et même sous forme de vecteurs – certains formats préféraient certaines tailles spéciales: divisible par 2 ou 5 (c’était le cas avec les anciennes fonts vectorielles d’Amiga). … Agfa Intellifont?).

Même maintenant, les moteurs de fontes sont de plus en plus des tailles entières, car leurs algorithmes d’indication fonctionnent mieux.

Et les gens semblent s’être habitués aux valeurs choisies à cause de ces ressortingctions techniques, même si les moteurs de fonts de caractères ont été améliorés maintenant.

Une approche de progression possible consiste à utiliser des racines carrées, via une formule telle que 2 / sqrt [rubrique #]. Par conséquent, vous auriez:

 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 

Pour une base de police de 12, ce serait assez proche de 24, 17, 14, 12, 11, 10. Pour les autres bases, les résultats peuvent être un peu plus éloignés des nombres entiers.

Fibonacci fonctionnerait bien avec la base 16, vous auriez donc:

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

Quelques chiffres nominaux:

Feuille de style par défaut pour HTML 4 :

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

Firefox 3 et Safari 4 (en fait, WebCore) :

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

Je suis venu avec l’algorithme / calcul suivant après avoir examiné plusieurs méthodes différentes pour la taille de la police avec H1 ~ H6, p, les menus, etc. avec html réglé à 100% (généralement 16px) et les unités in rem suivantes. Ceci est modifié à partir du «nombre magique» de 1,14 / 0,875 souvent utilisé. Le mien est .8735 qui semble fonctionner correctement avec p à 16px / 1rem jusqu’à H1 à 36px / 2.25rem et touche des valeurs de px assez normales comme 12, 14, 16, 18, 21, 24, 28, 32, 36, etc. jusqu’à 54 pour Jumbotrons et jusqu’à .zilch qui est excessif, je sais. Je rest généralement à l’intérieur de .huge et .micro. Fondamentalement je commence à p qui est égal à 1.0rem et multiplie par .8735 successivement pour devenir plus petit ou diviser par successivement pour devenir plus grand:

  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; } 

J’ai utilisé des points récemment (pt) qui, comme vous pouvez le voir, sont encore plus faciles à utiliser, et avant que tout le monde ne soit déformé de ne pas utiliser de rems, je dirai franchement, à ce stade (sans jeu de mots) ne pense pas vraiment que cela compte. J’ai commencé à utiliser ce qui est plus facile pour moi. Il est plus facile de travailler avec des points qui calculent des nombres entiers simples que de manipuler des rems en points décimaux.

D’une manière plus générale, les tailles associées comme celle-ci sont souvent basées sur une série géomésortingque, c’est-à-dire que chaque nombre successif est plus grand d’un facteur constant (quelque chose comme 1,2 ou sqrt (2)). Il y a le même type de progression dans la taille des clés et des clés hexagonales, ou des diamètres de vis, etc. en mécanique, ou dans la famille de formats de papier A5 / A4 / A3….

Beaucoup d’entre eux disent des tailles différentes pour les balises de titre, mais il y avait une variation de bootstrap à la taille de police par défaut.

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

Je pense que c’est au navigateur, qui peut même laisser l’utilisateur définir les tailles de police (je me souviens de l’opéra qui le fait). La spécification HTML n’entre pas dans les détails:

Il y a six niveaux de titres en HTML avec H1 comme le plus important et H6 le moins. Les navigateurs visuels rendent généralement les en-têtes plus importants dans les fonts plus grandes que les fonts moins importantes.

Ceci est intentionnel puisque HTML est conçu pour décrire la structure et non la présentation du document.

W3C a suggéré une feuille de style de rendu par défaut pour les navigateurs à implémenter.

Vous remarquerez que vos chiffres diffèrent d’eux. C’est parce que les fabricants de navigateurs ont l’habitude d’ignorer tout ce que dit le W3C.

Pour le bootstrap, la variation des balises de taille de police en pixels sont les suivantes:

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