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 encore

02. 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)

?
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 à 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.

?
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.

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 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.

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.

Aide

Page principale de la rubrique Aide

Retour