Font size
Utilité
Taille de la police, quelle unité choisir
Infos utiles
La taille de la police peut être définie en px, em, rem ou vw
Taille en px permet de contrôler la taille du texte, l'utilisateur ne peut modifier qu'en zoomant sur la page
Taille en rem 1rem c'est la taille de référence de votre texte (dans le thème margot on peut choisir la taille du texte dans la configuration graphique) - en appliquant des multiples de cette taille de référence aux différents niveaux de titres, on peut définir une hiérarchie. L'utilisateur aura la possibilité de modifier la taille du texte dans son navigateur et les proportions seront préservées.
Taille en em 1em est un multiple de la taille de la police de l'élement à style
Si on a un bloc pour lequel font-size=20px et qu'on applique padding:1.5em, la marge intérieure sera de 1.5*20px = 30px
L'élément avec une taille en em hérite de la taille de son parent
En résumé, il est plus pertinent de définir les tailles des textes en rem, ainsi on conserve une hiérarchie basée sur la taille de la police par défaut. En revanche, la marge autour d'un bloc peut être définie en em ainsi elle sera influencée par la taille du texte dans le bloc parent.
Taille en px permet de contrôler la taille du texte, l'utilisateur ne peut modifier qu'en zoomant sur la page
Taille en rem 1rem c'est la taille de référence de votre texte (dans le thème margot on peut choisir la taille du texte dans la configuration graphique) - en appliquant des multiples de cette taille de référence aux différents niveaux de titres, on peut définir une hiérarchie. L'utilisateur aura la possibilité de modifier la taille du texte dans son navigateur et les proportions seront préservées.
Taille en em 1em est un multiple de la taille de la police de l'élement à style
Si on a un bloc pour lequel font-size=20px et qu'on applique padding:1.5em, la marge intérieure sera de 1.5*20px = 30px
L'élément avec une taille en em hérite de la taille de son parent
En résumé, il est plus pertinent de définir les tailles des textes en rem, ainsi on conserve une hiérarchie basée sur la taille de la police par défaut. En revanche, la marge autour d'un bloc peut être définie en em ainsi elle sera influencée par la taille du texte dans le bloc parent.
Exemple de code
Taille du titre = 3.2 * 17 = 54.4px
body{font-size:17px;}
h1{font-size:3.2rem;}
Taille du titre = 3.2 * 17 = 54.4px
Langage
CSS