La propriété CSS « font-size » contrôle la taille du texte rendu dans le navigateur. Tout comme CSS Italics, la taille de la police CSS n’est pas quelque chose que vous pensez pouvoir être délicat, mais néanmoins, elle a trouvé un moyen, grâce au grand nombre d’appareils naviguant sur le Web au 21e siècle. Cela ne fait aucun doute : le CSS peut être difficile. Non, ce n’est pas comme essayer de comprendre « des millions de nœuds et de points de données » difficiles, mais il est difficile de créer de belles pages Web réactives sur tous les appareils. Ne vous inquiétez pas, continuez à lire et toutes vos questions trouveront une réponse.

Révolution mobile

Il n’y a pas si longtemps, même les ordinateurs les plus avancés avaient des moniteurs de sortie avec une très mauvaise résolution. La résolution était si faible, en fait, que les pixels pouvaient être comptés à la main si besoin était. Par conséquent, il était tout à fait logique que les pixels soient la valeur par défaut standard pour mesurer les unités dans les sorties rendues dans le développement Web à l’aide de CSS. Encore à ce jour, les pixels définissent la taille des éléments HTML par défaut, y compris la taille de la police. Pour être précis, la taille de police par défaut est de 16 pixels dans le développement Web.

Les choses se sont compliquées à mesure que différents navigateurs sont arrivés sur le marché, que davantage de polices CSS ont été publiées et que la société dans son ensemble a commencé à s’éloigner de l’utilisation d’Internet à la maison sur de grands ordinateurs de bureau et à naviguer sur le Web sur leurs appareils mobiles. Ces appareils mobiles et tablettes ont des écrans tactiles beaucoup plus petits qui se présentent sous différentes formes, ce qui nous donne différentes largeurs de fenêtre. Au fur et à mesure que la forme des appareils changeait, CSS s’éloignait des valeurs de taille de police absolues pour se tourner vers des valeurs de taille de police relatives.

Les appareils dotés d’une connectivité Internet continuent de devenir plus largement disponibles, de sorte que les développeurs frontaux doivent constamment s’adapter à l’évolution du paysage pour offrir au mieux des applications professionnelles en ligne.

Aujourd’hui, les tailles de police CSS absolues sont considérées comme désuètes et mieux évitées, tandis que les tailles de police relatives sont privilégiées pour de nombreuses raisons. Continuez à lire ci-dessous pour savoir pourquoi!

Tailles de police CSS absolues

Comme nous l’avons mentionné précédemment, à l’origine, tout mesurer en pixels était suffisant pour les traitements de texte, les jeux vidéo et les pages Web. Heureusement pour tout le monde, les choses ont avancé et sont devenues beaucoup plus attrayantes visuellement. Pour les développeurs Web frontaux, cela signifiait apprendre à gérer un tout nouveau type d’unité de longueur, différent des unités absolues auxquelles ils étaient déjà habitués.

Les unités de mesure absolues sont des unités qui ne changent pas d’un appareil à l’autre. Les exemples comprennent:

Pixel – « px » – égal à 1 pixel de la fenêtre
Indiquer – « pt » – égal à 1/72 de pouce
Pica – « pc » – égal à 12 points

Ces unités rendront plus ou moins la même taille sur un moniteur 4K ultra large que sur un téléphone cellulaire Samsung ou un iPad Apple. L’exemple le plus connu pourrait être la balise d’en-tête

, qui a une taille de police par défaut de 16 pixels, quel que soit l’appareil sur lequel elle est affichée. En raison de cette valeur absolue par défaut, il est important d’utiliser un sélecteur CSS et de donner à chacun de vos éléments d’en-tête des tailles de police relatives s’ils seront rendus sur de nombreux appareils différents.

Une solution à ce problème est, bien sûr, les requêtes multimédias qui vérifient la taille de la fenêtre d’affichage et appliquent le style comme décrit. Dans le cas ci-dessus, nous pourrions écrire une requête multimédia qui recherche une fenêtre d’affichage extra-large, puis passe de pixel à pica pour représenter cet écran beaucoup plus grand. Cependant, les requêtes multimédias sont difficiles à écrire et sont généralement évitées à moins que cela ne soit absolument nécessaire. La solution a été l’introduction d’unités de mesure relatives dans CSS.

Tailles relatives des polices CSS

L’utilisation d’unités de mesure relatives comme meilleure pratique peut vous éviter bien des maux de tête ! La plupart des développeurs Web adoptent déjà une approche « mobile first design » ; ils conçoivent d’abord des applications Web dans une vue mobile plus petite, puis affinent ces éléments ultérieurement pour les tablettes et les ordinateurs de bureau. Le raisonnement est qu’il est beaucoup plus facile de prendre quelque chose de petit, de le rendre plus grand et de le garder beau. Mais il est difficile de prendre quelque chose de grand et de le réduire tout en conservant le même aspect – une autre raison pour laquelle le développement d’applications mobiles est généralement considéré comme un domaine différent du développement Web.

Quoi qu’il en soit, les unités de mesure relatives sont votre meilleur ami lors du style avec le CSS traditionnel. Cela est vrai lors de l’application d’un style de police ainsi que de la description de la taille, de la forme et de la position d’autres éléments sur le front-end de votre application. Vous ne ferez que faciliter les choses pour vous et vos utilisateurs en utilisant des unités relatives conformes aux dimensions de la fenêtre d’affichage, à moins qu’un élément ne doive avoir un nombre précis de pixels, de points ou de picas pour être rendu correctement.

La première unité relative dont nous parlerons est le pourcentage « % » utilisé pour décrire la hauteur et la largeur en CSS. Cette unité est un pourcentage de l’élément *parent*. Par exemple, notre élément principal a une taille de police par défaut de 100 %, ce qui équivaut à 16px ou 12pt — dont nous avons déjà parlé. Créer un élément enfant

à l’intérieur du et lui donner une taille de police de 50% en ferait 8px ou 6pt car il est relatif au parent.

Ensuite, nous avons les unités « em » qui, comme les pourcentages, sont relatives à leur élément parent. Par défaut, la balise a des valeurs 1em et 1rem pour son attribut de taille de police. Contrairement aux 16px et 12pt, cependant, ces unités seront mises à l’échelle en fonction de la taille de la fenêtre d’affichage. Encore une fois, cette unité « em » évolue en fonction de la taille de son parent.

Inversement, nous avons également les unités « rem », qui sont similaires aux pourcentages et aux unités em, car elles sont relatives et seront mises à l’échelle. Cependant, contrairement à percent et em, l’unité rem fait référence à l’attribut et à la valeur « racine » tout en ignorant leurs attributs et valeurs parents. Par exemple, une balise peut contenir du texte à 1rem avec un

attribué à 0,5rem de sorte qu’il soit la moitié de la taille de la racine. Pour démontrer, nous pourrions créer un élément supplémentaire à l’intérieur du

préexistant avec une taille de police de 1rem, qui serait le 1rem complet de la balise et non le 0,5rem de la balise

La taille de police CSS prend également des mots-clés comme valeurs pour l’attribut de taille de police. Très similaire à `color: blue`, nous pourrions écrire `font-size: xx-large`. Nous avons de nombreux mots-clés de taille pour la taille de la police, y compris xx petit, x petit, petit, moyen, grand, x grand et xx grand. Comme toutes ces valeurs sont relatives, elles seront mises à l’échelle en fonction des dimensions de la fenêtre et de la taille de leur élément parent.

Nous avons également « vw » et « vh », qui signifient respectivement « largeur de la fenêtre » et « hauteur de la fenêtre ». Chacune de ces unités est basée sur 1/100ème de la taille de la fenêtre. Ces types de mesures relatives sont particulièrement utiles lorsque vous travaillez avec une disposition de grille CSS, car tous les éléments existent dans des colonnes et des lignes évolutives. Enfin, il y a les « vmin » et « vmax », qui représentent chacun 1/100e des dimensions plus petites ou plus grandes de la fenêtre.

En conclusion

La plupart d’entre nous ne pensent pas trop souvent à la taille de la police, car nous sommes tellement habitués à la facilité d’utilisation des traitements de texte et des logiciels de présentation de diapositives. À un moment donné, il n’y a pas si longtemps, c’était beaucoup plus simple simplement parce que nous n’avions pas la technologie pour mettre des appareils mobiles haut de gamme dans les poches de tout le monde sur la planète. Aujourd’hui, cependant, nous le faisons, et cette avancée technologique n’a fait que s’accroître.

Aujourd’hui, nous avons fait un excellent travail en examinant comment appliquer la taille de police CSS dans nos projets de développement Web. Nous avons également discuté de la différence entre les unités de mesure absolues et les unités de mesure relatives. De plus, nous avons même profité de l’occasion pour apprécier l’importance des principes de conception réactive mobile et comment ils sont utilisés pour créer une expérience de navigation optimale pour tout le monde sur le Web.

Veuillez garder à l’esprit que HTML, CSS et JavaScript dominent le Web aujourd’hui, mais cela ne durera pas éternellement. Les appareils et les logiciels continueront chacun à se compliquer, poussant l’autre secteur à innover encore plus vite. Un bon exemple serait la sortie prochaine et l’adoption inévitable d’appareils mobiles pliables à l’avenir. Ces appareils pliants, et d’autres innovations à l’horizon dont nous ne pouvons que rêver, nécessiteront tous de nouvelles approches du développement de l’expérience utilisateur, de la conception de l’interface utilisateur et des exigences de développement pour l’ingénierie informatique. Cependant, avant de vous attaquer aux dispositifs de pliage, assurez-vous de comprendre les principes fondamentaux du CSS, comme la façon d’appliquer l’italique à vos polices.