Styles des textes
Apprenez à agrémenter vos pages avec les règles de taille de police, le responsive design, les styles de textes et bien plus encore02. A propos de polices
Polices absolues (non-responsive)
Non recommandé : Le pixel px est une unité de mesure absolue qui signifie qu’1px correspond à 1px de l’écran. Pour le responsive il nous oblige à redéfinir manuellement toutes les valeurs sur les différents écrans.
Polices relatives (responsive)
Vw (largeur de la fenêtre) et vh (hauteur de la fenêtre) sont des unités de longueur qui représentent exactement 1% de la taille de la fenêtre quelles que soient ses mesures.
Em (cadratin) est une unité qui historiquement correspondait à la hauteur d’un caractère de plomb utilisé dans l’imprimerie. En web cette unité est relative à la taille de police de son parent. Un “em” est définit par convention à body {font-size: 16px}. Partant de là un élément de 2em aura une taille de 32px.
Rem (abréviation de «root em») tire son nom de la valeur de la taille de police racine de la balise <html> ou <body>. Ce qui permet d’avoir un comportement beaucoup plus prévisible que le em. Malheureusement, le rem n’est pas supporté par IE8 et Opera mini.
% est une unité équivalente à “em” mais exprimée en pourcentage par exemple 1.5em = 150%.
Quelques règles à connaître
Les règles pour une meilleure lisibilité sur le web
- Avoir un corps de texte suffisamment élevé. En général on évitera de descendre sous 10px.
- Eviter les lignes trop longues. Un affichage de 45 à 75 signes par ligne semble correct. (formule : largeur colonne = 30 x Corps de texte).
- Opter pour un line-height assez élevé qui ne descendra pas sous 1.2 en moyenne (là encore, tout dépend de la police utilisée et de la mise en page). En général nous voyons des valeurs comprises entre 1.3 et 1.6.
- Polices optimisées pour les écrans avec une hauteur d’x confortable (exemple : Verdana, Georgia).
- Préférer les unités relatives (em) aux unités fixes (px, pt).
- Aérer au maximum le contenu en plaçant des espaces blancs de chaque côté du texte.
Norme ISO 9241-300 utilisé dans l'UX
La norme ISO recommande une hauteur de police de 2,8 mm pour une distance de lecture de 50 cm. Autrement dit, la taille totale de la police (de sa hampe jusqu’au jambage) doit faire 2,8 mm si l’utilisateur lit à une distance d’environ 50 cm.
On aura ainsi ces équivalences :
| Distance en cm | Taille minimale | Densité de l’appareil | Taille minimale |
|---|---|---|---|
| 30 (mobile) | 1,68 mm | 264 | 25px ≈ 12pt |
| 40 (tablette sur jambes) | 2,2 mm | 264 | 33px ≈ 16pt |
| 50 (ordinateur de bureau) | 2,8 mm | 96 | 12px ≈ 9pt |
| 60 (ordinateur de bureau) | 3,4 mm | 96 | 13px ≈ 10pt |
| 70 (ordinateur de bureau) | 4 mm | 96 | 15px ≈ 11pt |
| 80 (ordinateur de bureau) | 4,5 mm | 96 | 17px ≈ 13pt |
Le W3C définit aussi des tailles absolues à l’aide des mots-clés suivants :
- xx-small (6,9pt)
- x-small (8,3pt)
- small (10pt)
- medium (12pt)
- large (14,4pt)
- x-large (17,28pt)
- xx-large (20,7pt)
Tailles prédéfinies par le W3C
Le W3C définit aussi des tailles absolues à l’aide des mots-clés suivants :
- xx-small (6,9pt)
- x-small (8,3pt)
- small (10pt)
- medium (12pt)
- large (14,4pt)
- x-large (17,28pt)
- xx-large (20,7pt)
Module texte
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
Infobox (Tooltip)
Tooltip à gauche : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tooltip en haut : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Boutons
Bascule (Toogle)
Bascule ligne basse fermé
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Bascule ligne basse ouvert
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Bascule cadre fermé
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Bascule cadre ouvert
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Bascule cadre couleur fermé
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Bascule cadre couleur ouvert
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Accordéons
Your Title Goes Here 1
Your Title Goes Here 2
Your Title Goes Here 1
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here 2
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Onglet 1
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Onglet 2
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Onglet 3
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
