Tailles 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.
C'est-à-dire, si la taille de la police de base est de 16 pixels (ou 100%), alors h1 (w/c) devrait être de 2,25 em (36 pixels). 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 les fibonacci? Je n'ai pas pu trouver d'informations à ce sujet.
EDIT: pour être plus précis, quel est le motif; pourquoi passe-t-il de 36 à 24 à 21, ou commence à partir de 36 pour commencer (ou, si vous le souhaitez, de 2em à 1,5em à 1,17em, etc.)?
Oh, j'ai oublié de préciser où j'ai trouvé les numéros originaux, ils viennent de ici
Je sais que ce message est ancien. Je suis tombé dessus avec la même question, d'où tirent-ils cela. Je pense que je l'ai trouvé.
C'est une dérivation d'une gamme de musique pentatonique. L'échelle de type est de toute façon. Les en-têtes sont tirés de l'échelle Type, mais pas dans un ordre 1: 1.
L'échelle va: 8 9 10 12 14 16 18 21 24 ... L'échelle double en 5 étapes (12 à 24). Chaque étape est la base (12) fois 2 (l'échelle ['elle double']) à la puissance de i(step) divisé par 5 (étapes 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 en mi majeur.
Cela m'a pris environ 2 heures pour comprendre avec un tableur et une explication des gammes musicales.
Ils sont définis par chaque fabricant de navigateur indépendamment.
Ils ne sont pas uniformes entre les navigateurs et sont là pour la sémantique (grand en-tête, en-tête légèrement plus petit, etc.).
Si vous regardez la spécification HTML 4 pour ceux-ci , il n'y a aucune mention de comment ils sont censés être stylisés, seulement cela ils devraient être. De la spécification:
Visual browsers usually render more important headings in larger fonts than less important ones.
Si vous voulez qu'elles soient cohérentes, vous devez utiliser une réinitialiser la feuille de style qui les définit.
Même si w3 a défini une suggestion feuille de style par défaut pour HTML 4 avec les détails suivants, la plupart des navigateurs ignorent cette suggestion:
h1 {taille de police: 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; marge: 1,67em 0}
h1, h2, h3, h4,
h5, h6 {font-weight: bolder}
(oui, je ne vois pas font-size: pour h4)
Une approche de progression possible consiste à utiliser des racines carrées, via une formule telle que 2/sqrt [en-tête #]. 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 polices de 12, ce serait assez proche de 24, 17, 14, 12, 11, 10. Pour d'autres bases, les résultats peuvent être un peu plus éloignés des entiers.
Fibonacci fonctionnerait bien avec la base 16, vous auriez donc:
H1=32
H2=24
H3=19
H4=16
H5=14
H6=13
Cela dépend du navigateur, comme d'autres disent.
De l'autre côté, il existe une règle en typographie pour définir les tailles de police: si la police de base a la taille X, les polices plus grandes devraient croître de façon exponentielle; la manière habituelle est d'avoir des tailles X*sqrt(2), X*sqrt(2)^2, X*sqrt(2)^3 et ainsi de suite, mais vous pouvez changer la base.
Cependant, les polices informatiques ont des exigences particulières.
Auparavant, ils étaient fournis uniquement sous forme de bitmap (donc les tailles étaient fixes), et même lorsqu'ils étaient fournis sous forme vectorielle - certains formats préféraient certaines tailles spéciales: divisibles par 2 ou 5 (c'était le cas avec les anciennes polices vectorielles d'Amiga ... Agfa Intellifont?).
Même maintenant, les moteurs de polices préfèrent les tailles entières, car leurs algorithmes de conseil fonctionnent mieux.
Et les gens semblent s'être habitués aux valeurs choisies en raison de ces restrictions techniques, même si les moteurs de polices se sont beaucoup améliorés maintenant.
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 et Safari 4 (en fait, WebCore) :
- h1: 2em
- h2: 1.5em
- h3: 1.17em
- h4: 1em
- h5: 0,83em
- h6: 0,67em
J'ai trouvé l'algorithme/calcul suivant après avoir examiné plusieurs méthodes différentes de taille de police avec H1 ~ H6, p, menus, etc. avec html réglé à 100% (généralement 16 pixels) et les unités rem suivantes. Ceci est modifié à partir du nombre magique de 1,14/0,875 souvent utilisé. Le mien est .8735 qui semble bien fonctionner avec p à 16px/1rem jusqu'à H1 à 36px/2.25rem et frappe des valeurs px assez `` normales '' tout au long comme 12, 14, 16, 18, 21, 24, 28, 32, 36, etc. jusqu'à 54 pour les Jumbotrons et jusqu'à .zilch qui est exagéré, je sais. Je reste généralement dans .huge et .micro. Fondamentalement, je commence à p qui est égal à 1,0rem et je le multiplie par 0,8735 successivement pour devenir plus petit ou je le divise 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 à travailler, et avant que tout le monde ne se plie pour ne pas utiliser les rem ou les em, je dirai franchement qu'à ce stade (sans jeu de mots), je ne pense vraiment pas que cela importe. J'ai commencé à utiliser ce qui est plus facile pour moi. Il est plus facile de travailler avec des points qui calculent en entiers simples que de jouer avec des rems en points décimaux.
De manière plus générale, les tailles liées comme celle-ci sont souvent basées sur une série géométrique, c'est-à-dire que chaque nombre successif est plus grand d'un facteur constant (quelque chose comme 1,2 ou sqrt (2)) par rapport au précédent. Il y a le même type de progression dans la taille des clés et 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. Voici les tailles 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;}
Pour bootstrap la variation des tailles de police des balises de titre en pixels est la suivante, vérifiez ceci bootstrap headings
h1 - 36px)
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px
Je pense que cela dépend du navigateur, qui peut même laisser l'utilisateur définir les tailles de police (je me souviens opera faisant cela). Le spécification HTML ne entrer dans les détails:
Il existe six niveaux de titres en HTML, H1 étant le plus important et H6 le moins. Les navigateurs visuels affichent généralement des titres plus importants dans des polices plus grandes que des titres moins importants.
Ceci est intentionnel car HTML est conçu pour décrire la structure, pas la présentation du document.
Le W3C a suggéré ne 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.