web-dev-qa-db-fra.com

Dois-je définir la taille de police par défaut sur le corps ou l'élément html?

J'aime travailler dans ems lors de la création de sites Web. J'ai donc défini une valeur par défaut font-size de 100.01% sur l'élément body.

Ma question est la suivante: dois-je définir la valeur par défaut font-size sur l'élément body ou html? Quels sont les avantages et les inconvénients (le cas échéant) des deux?

htmlcssfont-size
50
joshnh

Maintenant que l'unité rem commence à devenir populaire, il est conseillé de définir la taille de police de base sur l'élément racine (balise html) (rem signifie r oot em).

38
joshnh

Je ne pense pas qu'il y ait un avantage ou un inconvénient à définir la base font-size sur html ou body pour permettre le dimensionnement avec ems; ils auront tous deux le même effet.

Pas lié à la question:

Je suggérerais cependant d'utiliser une autre valeur par défaut font-size. Je le définirais comme:

body {
    font-size: 62.5%;
}

Cela réduit la valeur par défaut font-size de 16px jusqu'à 10px. Cela rend alors le choix de font-size beaucoup plus facile car il n'y a pas besoin de calculs difficiles. Cela signifie que 1em est égal à 10px et donc calculer la taille px est une question de multiplication par 10:

  • 1.0em = 10px
  • 1.4em = 14px
  • 1.8em = 18px
  • 2.2em = 22px
20
tw16

Si vous voulez vraiment suivre les règles tout en conservant de la flexibilité, vous devriez considérer ceci:

  • La taille de police de html est la taille de police root, ce qui signifie qu'elle sera utilisée comme base pour le calcul de rem, mais c'est tout, rien d'autre. Il ne doit pas être utilisé pour le calcul de la taille réelle du texte: c'est juste une sorte d'astuce pour certains navigateurs.
  • La taille de police de body est la taille de police par défaut du texte: tout votre texte doit avoir cette taille, sauf si la définition est prioritaire
  • les éléments spéciaux doivent avoir des tailles in rem, avec un repli en pixels

Voilà à quoi cela ressemble en CSS:

html {
    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
}

body {
    font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */
}

h1 { /* or whatever element you want to change the font size of */
    font-size: 20px; /* for browsers that don't understand the "rem" unit */
    font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */
}

Notez que, bien que tous les éléments de la page doivent hériter de la définition body, vous pouvez utiliser une définition incluant toutes les balises à la place, comme on le voit souvent dans les réinitialisations HTML:

a,
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-size: 0.75rem;
}

Je ne recommande cependant pas cette réinitialisation. Des normes sont faites pour vous aider à éviter ce genre de trucs.

18
Ninj