Maintenant que vous savez coder en HTML et CSS, nous allons voir l'ensemble des propriétés et balises possibles.
Le prochain chapitre est consacré au texte, et sa mise en forme : taille, police, interlettrage, interlignage, …
font-family
L'un des éléments le plus important du webdesign est la ou les typos utilisées.
Historiquement, il n'existe que très peu de polices utlisables sur un site internet :
- Arial
- Times
- Times New Roman
- Palatino
- Garamond
- Bookman
- Avant Garde
- Courier
- Courier New
Pourquoi cette liste est-elle si réduite ? Tout simplement parce que ces polices sont installées avec le système Windows ET macOS. En utilisant l'une de ces typos (appelées Safe Web Font), vous êtes sur qu'un utilisateur Apple ou Windows la verra bien.
Pour choisir une de ces polices, nous allons utiliser par propriété CSS font-family :
body{
font-family: Arial;
}
Appliquer une police à la body permet de l'appliquer à tout notre site internet.
Nous verront dans un autre chapitre intitulé Les polices de caractères comment ajouter d'autres typos à notre liste.
font-weight
La propriété font-weight permet de contrôler la graisse de notre texte. Par exemple, pour avoir un mot en gras, nous allons le mettre entre balise <span> :
<p>
Texte avec un <span>mot</span> en gras.
</p>
Pour ensuite lui appliquer le CSS suivant :
span{
font-weight: bold;
}
Résultat :
Texte avec un mot en gras.
Voilà la liste des valeurs possibles :
- normal : Niveau de graisse regular.
- bold : Niveau de graisse gras.
- lighter : Diminue d'un niveau la valeur de graisse.
- bolder : Augmente d'un niveau la valeur de graisse.
Il est aussi possible de donner une valeur comprise en 0 et 1000 :
font-weight: 100; /* Thin (Hairline) */
font-weight: 200; /* Extra Light (Ultra Light) */
font-weight: 300; /* Light*/
font-weight: 400; /* Normal */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold (Demi Bold) */
font-weight: 700; /* Bold */
font-weight: 800; /* Extra Bold (Ultra Bold) */
font-weight: 900; /* Black (Heavy) */
font-style
La propriété font-style permet d'utiliser une version italique de la police de caractère où, à défaut, de pencher artificiellement le texte.
Pour utiliser la version italique d'une typo, nous allons écrire :
p{
font-style: italic;
}
Résultat :
Un exemple de texte italic.
Pour un texte en oblique, nous allons utiliser oblique. De cete manière, le navigateur va pencher les glyphes ; ce qui en général n'est pas très joli … À éviter donc :
p{
font-style: oblique;
}
Résultat :
Un exemple de texte oblique.
font-size
La propriété font-size permet de définir une taille à notre texte.
Il est possible d'utiliser plusieurs unités :
- Les pixels : ils permettent de définir une valeur fixe, absolue et identique sur tous les navigateurs.
- Les ems : ils permettent de définir une valeur dynamique basée sur la taille de l'élément parent.
-
Les rems : ils permettent de définir une valeur dynamique basée sur la taille de l'élément
<html>. - Les mots clefs : comme les pixels, ils permettent de définir une valeur fixe, absolue et identique sur tous les navigateurs.
Voilà la liste des valeurs possibles :
/* Valeurs avec mots-clef : */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: larger;
font-size: smaller;
/* Valeurs de longueurs */
font-size: 14px;
font-size: 0.8em;
font-size: 0.8rem;
Différences entre rem et em
Imaginons que la taille de base de notre texte soit 16px.
Nous avons ensuite une <div> à laquelle nous allons appliquer une taille de 20px, dans laquelle nous avons deux paragraphes :
<div>
<p class="rem">
Texte avec une valeur de 2rem.
</p><!-- .rem -->
<p class="em">
Texte avec une valeur de 2em.
</p><!-- .em -->
<div>
Nous allons maintenant appliquer une valeur de 2rem au premier, et 2em au second :
html{
font-size: 16px;
}
div{
font-size: 20px;
}
p.rem{
font-size: 2rem;
}
p.em{
font-size: 2em;
}
Notre premier paragraphe aura une taille 2 fois suppérieure (2rem) à celle de notre document (16px).
Elle sera donc de : 16 x 2 = 32px
En revanche, le second paragraphe aura une taille deux fois suppérieure (2em) à celle de son parent, donc la div (20px).
Elle sera donc de : 20 x 2 = 40px
Résultat :
Texte avec une valeur de 2rem.
Texte avec une valeur de 2em.
font-stretch
La propriété font-stretch permet de choisir entre une forme normale, condensée ou étendue d'une police :
/* Liste des valeurs possibles */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
/* Exemple */
p{
font-stretch: expanded;
}