PhpBB Lab Académie

Continuer avec le même petit site et la même feuille styles.css, définir une base typographique commune pour les trois pages, découvrir font-family, font-size et line-height, comprendre l’unité rem et améliorer la lisibilité du texte sans modifier la structure HTML construite précédemment.

Avant de commencer

Dans les trois premières leçons, vous avez commencé à construire la présentation du même petit site.

Votre dossier :

mon-premier-site

contient toujours :

index.html
apropos.html
contact.html
ordinateur.jpg
styles.css

Votre feuille

styles.css

peut maintenant contenir :

h1 {
    color: darkblue;
}

h2 {
    color: darkgreen;
}

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

La classe

.nom-site

continue de présenter le texte :

Mon premier site HTML

dans l’en-tête de nos trois pages.

Vous savez déjà :

- relier une feuille CSS à plusieurs pages ;
- utiliser un sélecteur d’élément ;
- utiliser une classe ;
- placer plusieurs déclarations dans une même règle.

Nous allons maintenant utiliser ces connaissances pour améliorer la lisibilité du texte sur l’ensemble du site.

Dans cette leçon, nous allons répondre à quatre questions :

- Comment choisir une famille de caractères pour le site ?
- Comment définir une taille de texte adaptable ?
- Comment améliorer l’espace entre les lignes ?
- Comment conserver une hiérarchie visuelle cohérente entre le texte courant et les titres ?

À la fin de cette leçon, les trois pages partageront une base typographique commune.

1. Pourquoi travailler sur la typographie ?

Une page peut être correctement structurée et pourtant rester difficile à lire.

La lisibilité dépend notamment :

- de la famille de caractères ;
- de la taille du texte ;
- de l’espace entre les lignes ;
- de la longueur des lignes ;
- des couleurs et du contraste.

Nous n’allons pas tout modifier en une seule leçon.

Pour commencer, nous allons nous concentrer sur trois propriétés :

font-family
font-size
line-height

Nous continuerons ensuite à améliorer progressivement le même site.

2. Utiliser body comme base

Dans chacune de nos pages, le contenu visible se trouve dans :

body

Nous pouvons donc créer une règle pour cet élément.

Dans

styles.css

, ajoutez au début :

body {
    font-family: Arial, sans-serif;
}

Le sélecteur :

body

est un sélecteur d’élément.

Vous connaissez déjà ce principe grâce à :

h1

et :

h2

Nous utilisons simplement un autre élément HTML.

3. Comprendre font-family

La propriété :

font-family

permet de choisir la famille de caractères utilisée pour afficher le texte.

Nous avons écrit :

font-family: Arial, sans-serif;

Cette déclaration contient plusieurs valeurs séparées par une virgule :

Arial

sans-serif

Le navigateur essaie d’abord d’utiliser :

Arial

Si cette police n’est pas disponible, il peut utiliser une police appartenant à la famille générique :

sans-serif

Nous pouvons donc lire la déclaration ainsi :

Utilise Arial si elle est disponible.

Sinon, utilise une police sans empattement disponible sur l’appareil.

4. Pourquoi prévoir une famille de secours ?

Toutes les polices ne sont pas forcément disponibles sur tous les ordinateurs ou appareils.

Si nous écrivions seulement :

font-family: Arial;

nous dépendrions davantage de la présence de cette police.

En ajoutant :

sans-serif

nous indiquons au navigateur qu’il peut choisir une autre police du même grand type si nécessaire.

Pour notre petit site, cette écriture est suffisante pour commencer :

font-family: Arial, sans-serif;

5. Vérifier le résultat sur les trois pages

Enregistrez

styles.css

.

Ouvrez ensuite successivement :

index.html
apropos.html
contact.html

La famille de caractères utilisée par le texte doit maintenant être cohérente sur les trois pages.

Nous avons ajouté cette déclaration une seule fois :

body {
    font-family: Arial, sans-serif;
}

et les trois pages chargent le même fichier CSS.

Nous continuons donc à utiliser une seule feuille pour présenter l’ensemble du site.

6. Ajouter une taille de texte de base

Nous allons maintenant découvrir une deuxième propriété :

font-size

La propriété

font-size

permet de définir la taille du texte.

Nous allons ajouter :

font-size: 1rem;

dans la règle

body

.

Elle devient :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
}

Avant d’aller plus loin, nous devons comprendre l’unité :

rem

7. Comprendre l’unité rem

En CSS, certaines valeurs de taille ont besoin d’une unité.

L’unité :

rem

est une unité relative.

Elle est calculée à partir de la taille de texte de l’élément racine du document.

Pour commencer, retenez surtout ceci :

1rem = taille de référence

2rem = deux fois cette taille de référence

1.5rem = une fois et demie cette taille de référence

L’intérêt d’une unité relative est de construire une présentation qui reste plus facilement adaptable aux réglages de taille de texte.

Nous utiliserons donc

rem

régulièrement dans ce cours.

8. Pourquoi ne pas choisir une petite taille fixe ?

Il serait techniquement possible de réduire fortement le texte.

Mais notre objectif n’est pas de faire tenir le plus de contenu possible à l’écran.

Le texte doit rester confortable à lire.

Nous allons donc conserver une taille de base simple :

font-size: 1rem;

Nous pourrons ensuite utiliser des tailles plus importantes pour les titres.

9. Ajouter la hauteur de ligne

Nous allons maintenant découvrir une troisième propriété :

line-height

Elle contrôle la hauteur de ligne.

Autrement dit, elle influence l’espace vertical disponible entre les lignes de texte.

Ajoutez :

line-height: 1.5;

dans la règle

body

.

Vous obtenez :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

La valeur :

1.5

n’a ici pas besoin d’unité.

Elle permet à la hauteur de ligne de s’adapter à la taille du texte.

10. Observer la différence sur le contenu réel

Enregistrez puis ouvrez

index.html

.

Regardez notamment les paragraphes présents dans :

Ce que j’ai appris

Mes notes de progression

Mon espace de travail

Le texte doit maintenant disposer d’un espacement vertical plus confortable entre les lignes.

Ouvrez ensuite :

apropos.html

puis :

contact.html

La même base typographique s’applique aux trois pages.

11. Une base commune ne remplace pas les règles plus précises

Nous avons maintenant :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

Mais nous conservons aussi :

h1 {
    color: darkblue;
}

h2 {
    color: darkgreen;
}

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

La nouvelle règle

body

ne supprime pas les règles précédentes.

Nous continuons simplement à enrichir la feuille CSS.

Certaines propriétés placées sur

body

servent de base au texte de la page.

Nous étudierons plus tard le mécanisme précis qui permet à certaines valeurs de se transmettre aux éléments contenus dans un autre élément.

Pour le moment, retenez simplement que

body

est un endroit pratique pour définir une base typographique commune.

12. Donner une taille au h1

Notre titre principal doit rester clairement identifiable.

Nous allons donc enrichir la règle

h1

.

Elle contient actuellement :

h1 {
    color: darkblue;
}

Ajoutez :

font-size: 2rem;

Vous obtenez :

h1 {
    color: darkblue;
    font-size: 2rem;
}

Nous pouvons lire :

2rem = deux fois la taille de référence

Le titre principal devient ainsi plus grand que le texte courant.

13. Donner une taille au h2

Nous allons faire la même chose avec les titres de niveau 2.

La règle actuelle est :

h2 {
    color: darkgreen;
}

Ajoutez :

font-size: 1.5rem;

Vous obtenez :

h2 {
    color: darkgreen;
    font-size: 1.5rem;
}

Nous avons maintenant une progression simple :

texte courant = 1rem

h2 = 1.5rem

h1 = 2rem

Cette progression renforce visuellement la hiérarchie déjà présente dans le document HTML.

14. La taille visuelle ne crée pas la hiérarchie HTML

Il est important de conserver la distinction apprise dans le cours précédent.

Un texte très grand n’est pas automatiquement un titre.

Par exemple :

<p>Accueil</p>

reste un paragraphe, même si CSS lui donne une taille très importante.

Notre page utilise correctement :

<h1>Accueil</h1>

parce que

Accueil

est réellement le titre principal.

CSS vient seulement renforcer visuellement cette hiérarchie.

Retenez :

HTML définit le rôle du contenu.

CSS peut renforcer visuellement ce rôle.

15. Conserver une échelle simple

Nous avons choisi :

1rem
1.5rem
2rem

Ces valeurs forment une petite échelle facile à comprendre.

Nous pourrions utiliser beaucoup d’autres valeurs.

Mais au début, il est préférable de conserver une progression simple plutôt que de choisir une taille différente au hasard pour chaque élément.

Cette méthode rend la feuille CSS plus facile à lire et à maintenir.

16. Vérifier le zoom

Une bonne présentation doit rester utilisable lorsque le contenu est agrandi.

Augmentez le zoom de votre navigateur.

Vérifiez notamment :

- que les paragraphes restent lisibles ;
- que les titres restent clairement identifiables ;
- que le texte ne se superpose pas ;
- que les informations ne disparaissent pas.

Nous travaillerons plus tard plus précisément sur les mises en page adaptables.

Pour le moment, prenez simplement l’habitude de vérifier que vos choix typographiques restent utilisables lorsque la taille d’affichage augmente.

17. Vérifier les trois pages

Ne testez pas uniquement

index.html

.

Ouvrez également :

apropos.html
contact.html

Sur chaque page, vérifiez :

- la famille de caractères ;
- la taille générale du texte ;
- l’espace entre les lignes ;
- la taille du

h1

;
- la cohérence avec le reste du site.

Sur

index.html

, vérifiez également les

h2

.

Le but est de conserver une présentation cohérente sur tout le projet.

18. Notre feuille styles.css à la fin de la leçon

Votre fichier peut maintenant contenir :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1 {
    color: darkblue;
    font-size: 2rem;
}

h2 {
    color: darkgreen;
    font-size: 1.5rem;
}

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Nous n’avons supprimé aucune règle apprise précédemment.

Nous avons ajouté une base typographique et enrichi les titres avec une taille adaptée à leur niveau.

19. Lire la règle body avec méthode

Prenons :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

Nous pouvons la lire ainsi :

body = sélecteur

font-family = famille de caractères

font-size = taille du texte

line-height = hauteur de ligne

Vous connaissez maintenant le rôle de chaque propriété présente dans cette règle.

20. Préparer la prochaine étape

Nous avons commencé à améliorer la lisibilité du site grâce à la typographie.

Mais une autre partie importante de la lecture reste encore à étudier :

les couleurs et le contraste

Nous utilisons déjà plusieurs couleurs :

darkblue
darkgreen
darkslateblue

Jusqu’à présent, elles nous ont surtout permis d’observer facilement les effets de CSS.

Dans la prochaine leçon, nous allons apprendre à choisir et vérifier les couleurs de manière plus rigoureuse.

Nous verrons notamment qu’une couleur ne doit pas être choisie uniquement parce qu’elle semble agréable.

Elle doit aussi rester suffisamment lisible sur son arrière-plan.

21. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- le rôle de

font-family

;
- pourquoi une liste de polices peut prévoir une solution de secours ;
- le rôle de

font-size

;
- ce qu’est l’unité relative

rem

;
- pourquoi nous utilisons une taille de base simple ;
- le rôle de

line-height

;
- pourquoi une hauteur de ligne suffisante améliore la lecture ;
- pourquoi la taille visuelle ne remplace pas la hiérarchie HTML ;
- pourquoi nous utilisons ici une petite échelle cohérente pour le texte et les titres ;
- pourquoi il est utile de tester le zoom.

Dans la prochaine leçon, nous continuerons avec le même site et le même fichier

styles.css

.

Nous étudierons les couleurs et le contraste afin de conserver une présentation lisible et accessible.

Reprenons la feuille

styles.css

construite dans les trois premières leçons.

Nous ajoutons d’abord une base pour le texte :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

Nous conservons ensuite les règles déjà présentes et nous complétons les tailles des titres :

h1 {
    color: darkblue;
    font-size: 2rem;
}

h2 {
    color: darkgreen;
    font-size: 1.5rem;
}

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

La règle

body

fournit une base typographique commune aux trois pages.

Le

h1

et les

h2

utilisent des tailles plus importantes afin de renforcer visuellement la hiérarchie déjà définie dans HTML.

La structure du site ne change pas.

Nous améliorons uniquement sa présentation et sa lisibilité.

Continuez avec le même petit site et le même fichier

styles.css

.

1. Ajouter une règle body

Au début de la feuille, ajoutez :

body {
    font-family: Arial, sans-serif;
}

Enregistrez puis actualisez

index.html

.

2. Ajouter font-size

Dans le même bloc, ajoutez :

font-size: 1rem;

Vous obtenez :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
}

3. Ajouter line-height

Ajoutez ensuite :

line-height: 1.5;

La règle devient :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

Enregistrez puis observez notamment les paragraphes de

index.html

.

4. Enrichir h1

Dans la règle

h1

existante, ajoutez :

font-size: 2rem;

Vous devez obtenir :

h1 {
    color: darkblue;
    font-size: 2rem;
}

5. Enrichir h2

Dans la règle

h2

, ajoutez :

font-size: 1.5rem;

Vous obtenez :

h2 {
    color: darkgreen;
    font-size: 1.5rem;
}

6. Vérifier les trois pages

Ouvrez :

index.html
apropos.html
contact.html

Vérifiez que la typographie reste cohérente sur tout le site.

Sur

index.html

, observez également la différence entre :

h1
h2
texte courant

7. Tester le zoom

Augmentez le zoom du navigateur.

Vérifiez que :

- les textes restent lisibles ;
- les titres restent identifiables ;
- les lignes ne se superposent pas ;
- aucune information ne disparaît.

8. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. à quoi sert

font-family

;
2. pourquoi nous écrivons

Arial, sans-serif

;
3. à quoi sert

font-size

;
4. ce que signifie

1rem

;
5. à quoi sert

line-height

;
6. pourquoi un

h1

reste un vrai titre même si CSS est désactivé ;
7. pourquoi nous testons le zoom.

Dans cette leçon, nous avons commencé à construire une base typographique commune pour les trois pages du site.

Nous avons ajouté :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

La propriété :

font-family

définit la famille de caractères.

La propriété :

font-size

définit la taille du texte.

Nous avons utilisé l’unité relative :

rem

pour conserver des tailles plus facilement adaptables.

La propriété :

line-height

contrôle la hauteur de ligne.

Nous avons également complété les titres :

h1 {
    color: darkblue;
    font-size: 2rem;
}

h2 {
    color: darkgreen;
    font-size: 1.5rem;
}

Cette présentation renforce visuellement la hiérarchie déjà définie par HTML sans la remplacer.

Dans la prochaine leçon, nous continuerons avec le même site et la même feuille

styles.css

.

Nous étudierons les couleurs et le contraste afin de conserver un texte lisible et accessible.