Les autres propriétés CSS liées à la police

Les propriétés CSS de type font- vont nous permettre de modifier l’apparence des caractères de notre police d’écriture.

Dans la leçon précédente, nous avons étudié la propriété font-family qui sert à définir une police d’écriture qui devra être utilisée pour nos textes.

Il existe d’autres propriétés CSS de type font- qu’il est bon de connaitre. Dans cette nouvelle leçon, nous allons présenter les propriétés suivantes :

• La propriété font-size qui va nous permettre de modifier la taille de notre police ;
• La propriété font-weight qui va nous permettre de modifier le poids de notre police ;
• La propriété font-style qui va nous permettre de modifier l’inclinaison de notre police.

Notez déjà que les propriétés qui modifient le comportement des polices vont être soumises à la police qu’elles modifient : certaines polices ne supportent pas certaines modifications et les propriétés en question seront alors ignorées.

 

La propriété font-size

La propriété CSS font-size va nous permettre de modifier la taille de notre police d’écriture lors de l’affichage des différents textes. Cette première propriété va pouvoir s’appliquer à toutes les polices puisque toutes les polices supportent un changement de taille aujourd’hui.

Cette propriété va accepter deux grands types de valeurs : des valeurs absolues et des valeurs relatives. Chaque type de valeur va posséder des avantages et des inconvénients et on utilisera plutôt une valeur ou une autre selon la situation. Vous pouvez déjà trouver la liste des différentes valeurs acceptées ci-dessous :

Une valeur dite « absolue » est une valeur qui ne va pas dépendre d’autres éléments dans la page tandis qu’une valeur « relative » va au contraire être calculée en fonction de la valeur d’autres éléments dans la page.

Attention ici : une valeur absolue n’est pas forcément fixe ou statique puisque certaines valeurs absolues vont dépendre des réglages par défaut de l’utilisateur. « Absolu » ici veut simplement dire que la valeur ne va pas être calculée en fonction des autres éléments dans la page.

Les valeurs « mot clef »

On va donc déjà pouvoir passer un mot clef à la propriété font-size. Les mots clefs suivants correspondent à des valeurs absolues de police mais qui sont relatives aux réglages faits par l’utilisateur dans son navigateur.

Notez ici que la taille utilisée par défaut par les navigateurs (sans réglage spécifique de l’utilisateur donc) est généralement égale à 16px pour un paragraphe mais va être plus grande pour un titre.

• xx-small : la taille de la police sera égale à la moitié de celle définie dans le navigateur ;
• x-small : la taille de la police sera égale à 60% de celle définie dans le navigateur ;
• small : la taille de la police sera égale à 80% de celle définie dans le navigateur ;
• medium : la taille de la police sera égale à celle définie dans le navigateur ;
• large : la taille de la police sera 10% plus grande que celle définie dans le navigateur ;
• x-large : la taille de la police sera 50% plus grande que celle définie dans le navigateur ;
• xx-large : la taille de la police sera deux fois plus grande que celle définie dans le navigateur.

See the Pen Cours HTML CSS 4.2.1 by Pierre (@pierregiraud) on CodePen.

Les mots clefs suivants permettent de définir une taille de police relativement à celle de l’élément parent :

• smaller : la taille de la police de l’élément sera plus petite que celle de son élément parent ;
• larger : la taille de la police de l’élément sera plus grande que celle de son élément parent.

See the Pen Cours HTML CSS 4.2.2 by Pierre (@pierregiraud) on CodePen.

Ici, la taille de la police des paragraphes p1 et p2 dépend de la taille de la police de leur élément parent qui est dans ce cas l’élément body et qui a été réglée à font-size: xx-large.

Notez également qu’ici notre titre h1 hérite de la valeur de la propriété de son parent, c’est-à-dire font-size: xx-large et va donc s’afficher en très gros puisque le réglage par défaut des navigateurs pour un titre h1 définit généralement une taille de police deux fois plus grande que pour un paragraphe.

Les valeurs « longueur »

On va également pouvoir passer une longueur en valeur de la propriété font-size. Une longueur peut être exprimée en px (pixels). Dans ce cas, la taille de la police sera absolue et statiques c’est-à-dire indépendante de tout réglage de l’utilisateur ou des valeurs par défaut du navigateur.

Utiliser des valeurs en px permet donc d’avoir un résultat très prévisible mais empêche les utilisateurs d’adapter la taille du texte selon leurs réglages, ce qui va être très problématique pour les utilisateurs souffrant de déficiences visuelles.

See the Pen Cours HTML CSS 4.2.3 by Pierre (@pierregiraud) on CodePen.

Une longueur peut également être exprimée en em ou plus rarement en ex. Les valeurs en em (et en ex) vont être dynamiques et relatives à la valeur de l’élément parent pour la propriété concernée.

En déclarant font-size : 1em pour un élément on demande à ce que la valeur de la propriété soit la même que celle définie pour l’élément parent, en déclarant font-size : 1.5em on demande à ce que la valeur de la propriété soit égale à 1,5 fois celle définie pour l’élément parent et etc.

Note : Attention ici à bien utiliser des points à la place des virgules (notations anglo-saxonnes) lorsque vous préciser des valeurs non entières en CSS !

Si aucune taille n’a été définie pour l’élément parent alors la taille définie dans le navigateur sera utilisée (généralement 16px par défaut sauf réglage utilisateur spécifique).

Les valeurs en em possèdent donc l’avantage de pouvoir s’adapter mais peuvent entrainer des problèmes de composition ou de cohérence / d’homogénéisation. En effet, imaginons qu’un attribue un font-size : 1.5em pour un type d’éléments comme les éléments span par exemple.

Si dans ce cas un élément span contient lui-même un élément span, les tailles de police des différents éléments span vont être différentes puisque la police du span contenu dans l’autre span va être égale à 1,5 fois le taille du span parent.

See the Pen Cours HTML CSS 4.2.4 by Pierre (@pierregiraud) on CodePen.

Ici, la taille de la police du premier span dans notre paragraphe est égale à 1,5 fois celle du paragraphe (qui est son parent) tandis que la taille de la police du span enfant dans le span parent est égale à 1,5 fois celle du span parent.

Souvent, ce ne sera pas le comportement souhaité et ce genre de situations est ce qui rend ce type de valeurs (et les valeurs relatives en général) très difficile à manier en pratique.

Pour pallier ce problème, nous pouvons plutôt utiliser l’unité rem. Les valeurs fournies en rem vont être relatives à la taille définie pour la propriété de l’élément racine html et non pas à la taille définie pour l’élément parent.

See the Pen Cours HTML CSS 4.2.5 by Pierre (@pierregiraud) on CodePen.

Les valeurs « pourcentage »

Nous allons enfin également pouvoir passer un pourcentage en valeur de la propriété font-size. Les valeurs exprimées en pourcentage vont être proportionnelles à la valeur renseignée pour la propriété dans l’élément parent.

See the Pen Cours HTML CSS 4.2.6 by Pierre (@pierregiraud) on CodePen.

Les unités en em et les % vont donc être équivalent pour définir la taille de la police d’un élément. Cependant, notez bien que ces unités vont pouvoir être réutilisées avec d’autres propriétés et dans ce cas elles ne vont plus l’être puisque les unités en em vont toujours être exprimées en fonction de la taille de la police.

Regardez plutôt l’exemple suivant. La propriété width sert ici à définir la largeur d’un élément et peut accepter des valeurs aussi bien en em qu’en % :

See the Pen Cours HTML CSS 4.2.7 by Pierre (@pierregiraud) on CodePen.

Ici, la largeur d’un de nos éléments div est égale à deux fois la taille de la police définie dans l’élément (width : 2em) tandis que la largeur de l’autre div est égale à la moitié de la largeur de son élément parent (width : 50%).

Les valeurs universelles

On va également bien évidemment pouvoir passer une valeur universelle à la propriété font-size comme inherit ou initial par exemple pour que la propriété hérite du comportement défini dans un élément parent ou pour qu’elle soit réinitialisée à sa valeur d’origine définie dans la feuille de style par défaut du navigateur.

Note importante : les valeurs inherit, initial et unset sont des valeurs dites « globales » ou « universelles » car elles vont fonctionner avec toutes les propriétés CSS. Dans la suite de ce cours, je ne préciserai donc pas pour chaque propriété étudiée qu’elle peut utiliser ces valeurs car cela est évident.

 

La propriété font-weight

La propriété CSS font-weight va nous permettre de définir le poids d’une police, c’est-à-dire son épaisseur.

Cette propriété va pouvoir prendre un mot clef ou un chiffre exprimé en centaine(s) en valeur. Nous allons ainsi pouvoir choisir parmi les valeurs suivantes :

• Le mot clef normal : valeur par défaut qui correspond à un poids de police « normal » ;
• Le mot clef lighter qui va définir une police d’écriture plus fine que pour la valeur normal ;
• Le mot clef bold qui va définir une police d’écriture plus épaisse que pour la valeur normal ;
• Le mot clef bolder qui va définir une police d’écriture très épaisse ;
• Une centaine entre 100 (qui correspond à une police très fine) et 900 (pour une police très épaisse). En termes d’équivalence avec les mots clefs, vous pouvez retenir que la valeur 400 est équivalente au mot clef normal et que la valeur 700 est équivalente au mot clef bold.

Notez bien ici que toutes les valeurs évoquées ci-dessus ne vont pas toujours pouvoir être appliquées : en effet, certaines polices ne supportent tout simplement pas de manière intrinsèque certains poids.

Dans le cas où l’on passe une valeur à la propriété font-weight qui ne peut pas être appliquée à une certaine police, alors elle sera tout simplement ignorée.

Les deux valeurs généralement bien supportées sont font-weight : normal ou font-weight : 400 et font-weight : bold ou font-weight : 700.

See the Pen Cours HTML CSS 4.2.8 by Pierre (@pierregiraud) on CodePen.

 

La propriété font-style

La propriété font-style va nous permettre de gérer l’inclinaison de notre police.

On va pouvoir lui passer l’une des valeurs suivantes :

• normal : valeur par défaut, les caractères seront droits ;
• italic : la police va s’afficher en italique ;
• oblique : la police va être tordue pour être rendue de façon oblique.

Les valeurs italic et oblique produisent souvent un résultat très similaire. Sachez cependant qu’elles ne sont pas strictement équivalentes pour autant.

En effet, certaines polices ne supportent pas l’état italique (car elles n’ont pas été conçues pour pouvoir être rendues en italique). Dans ces cas-là, si on passe la valeur italic à la propriété font-style alors celle-ci sera simplement ignorée.

La valeur oblique, au contraire, va forcer l’inclinaison de n’importe quelles polices et mêmes de celles qui n’ont pas été conçues pour pouvoir être rendues de façon oblique. Dans ce cas-là, cette valeur va « casser » la police afin de la rendre quand même oblique (ce qui peut amener à un rendu visuel non optimal).

See the Pen Cours HTML CSS 4.2.9 by Pierre (@pierregiraud) on CodePen.

 

La notation raccourcie font

Les différentes propriétés de type font- peuvent être combinées en une seule qui représente leur notation raccourcie ou « short hand » en anglais et qui va être tout simplement la propriété font.

Nous reparlerons de l’utilisation des propriétés short-hand plus tard dans ce cours plus en détail.

Pour le moment, retenez simplement qu’une notation raccourcie ou « short-hand » va se définir par opposition à la version complète ou « long hand » des propriétés.

Les notations short-hand vont être un condensées de différentes propriétés et vont donc nous permettre d’écrire notre code CSS plus rapidement en déclarant d’un coup les valeurs relatives à plusieurs propriétés.

Cependant, ici, il faudra souvent respecter un ordre précis de déclarations des différentes valeurs relatives aux propriétés long-hand agrégées dans la version short-hand afin qu’il n’y ait pas d’ambiguïté sur ce à quoi va correspondre chaque valeur déclarée.

Nous allons pouvoir passer les valeurs suivantes à la notation short-hand font (dans l’ordre donné ci-après) :

1. La valeur relative à la propriété font-style (facultatif) ;
2. La valeur relative à la propriété font-variant (facultatif) ;
3. La valeur relative à la propriété font-weight (facultatif) ;
4. La valeur relative à la propriété font-size (obligatoire)/line-height (facultatif) ;
5. La valeur relative à la propriété font-family (obligatoire).

La propriété font-variant n’est pas beaucoup utilisée et c’est la raiosn pour laquelle je n’en ai pas parlé pour le moment. Pour faire simple, elle est elle-même une notation raccourcie des sous propriétés font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures et font-variant-east-asian qui permettent d’utiliser des glyphes alternatifs pour les différents caractères d’une police.

La propriété line-height permet de définir la taille de l’espace entre les lignes (interligne). Nous étudierons cette propriété en détail plus tard dans cette partie.

Notez que pour que font fonctionne correctement, il faudra obligatoirement à minima préciser les valeurs liées aux propriétés font-size et font-family. Les autres valeurs sont facultatives et pourront être omises.

Voilà comment nous allons pouvoir utiliser cette propriété raccourcie en pratique :

See the Pen Cours HTML CSS 4.2.10 by Pierre (@pierregiraud) on CodePen.

Expliquons rapidement le code ci-dessus. Ma première définition de font liée au sélecteur #p1 est complète : j’ai passé les valeurs relatives à toutes les propriétés décrites ci-dessus et celles-ci vont donc être appliquées à l’élément portant ld’id="p1". Notez que les valeurs relatives aux propriétés font-size et line-height doivent être séparées par un slash.

Dans mon sélecteur #p2, cependant, j’ai omis certaines valeurs qui sont facultatives et n’ai passé que les valeurs relatives aux propriétés font-style, font-size et font-family.

Vous devriez avoir une question par rapport à cette deuxième déclaration : comment savoir à quelle propriété correspond une valeur lorsque celle-ci n’est pas unique à la propriété ?

Imaginons ici que j’ai écrit normal à la place de italic. Comment savoir si cette valeur normal a été déclarée comme valeur pour ma propriété font-style, font-variant ou font-weight ?

Le CSS va en fait lire l’ensemble des valeurs fournies à la notation short hand font et, s’il y a ambiguïté, les valeurs fournies vont être liées à la première propriété qui l’accepte. C’est tout l’intérêt d’avoir défini un ordre des valeurs et de le respecter. Ainsi, dans le cas présent, comme font-style accepte la valeur normal, celle-ci lui sera attribuée.

Notez qu’ici ce n’est pas impactant puisque dans tous les cas la valeur normal est la valeur par défaut pour les trois propriétés font-style, font-variant ou font-weight mais ça pourra l’être dans d’autres cas où des propriétés partagent des valeurs en commun qui ne sont pas leurs valeurs par défaut.

Notez également qu’il est généralement déconseillé d’utiliser à la fois les notations short-hand et long-hand pour définir le comportement des mêmes propriétés car cela peut mener à de nombreux problèmes dans le code.

Si pour une raison ou une autre vous devez redéfinir vos propriétés de cette manière, retenez bien que pour toute notation long-hand déclarée avant la version short-hand associée sera ignorée même dans le cas où la version short-hand ne définit pas de comportement pour la propriété long-hand en question de manière explicite.

See the Pen Cours HTML CSS 4.2.11 by Pierre (@pierregiraud) on CodePen.