Guide de style - Typographie
Typographie
Il est d'usage d'attribuer à chaque élément textuel une police, une taille et une font-weight par défaut (ceux-ci peuvent toujours être surchargés si besoin par une classe utilitaire ou une personnalisation en CSS).
Famille de police
La police retenue et appliquée dans tout ce Système de Design est la Futura PT.
Futura PT
Book (400)
Medium (500)
Demi (600)
Bold (700)
AÀÂBCÇDEÈÉÊËFGHIÎÏJKLMNOÔPQRSTUÙÛÜVWXYŸZ
aàâbcçdeèéêëfghiîïjklmnoôpqrstuùûüvwxyÿz
1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
La police de substitution est l'Arial.
Titres
Les titres sont utilisés pour créer une hiérarchie visuelle dans la page, et permettent de trouver facilement une information. Cette hiérarchisation est également importante pour le référencement naturel de la page et l'accessibilité.
Attention : les couleurs, tailles de police et graisse des titres ne doivent jamais être modifiés par une classe utilitaire ni par une surcharge CSS.
Titre H1 - Lorem ipsum dolor sit amet
Titre H2 - Lorem ipsum dolor sit amet consectetur adipisicing elit
Titre H3 - Lorem ipsum dolor sit amet consectetur adipisicing elit
Titre H4 - Lorem ipsum dolor sit amet consectetur adipisicing elit
Titre H5 - Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elit
Titre H6 - Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elit
Surtitre et Chapô
Ils viennent apporter un complément d'information aux titres et sous-titres.
Attention : les couleurs, tailles de police et graisse des surtitres et chapôs ne doivent jamais être modifiés par une classe utilitaire ni par une surcharge CSS.
Surtitre. Lorem ipsum dolor
Chapô. Lorem ipsum dolor sit amet consectetur adipisicing elit. [b] Magni ab soluta eligendi sed earum [strong] maxime possimus quae vero [em] sapiente voluptates minima at cum nisi quia, [i] porro in temporibus quas obcaecati.
Corps de texte
Paragraphe par défaut
Par défaut, le style de texte du paragraphe a un font-size: 18px; et un color: $gray-700; (#697097).
Lorem ipsum dolor sit amet consectetur adipisicing elit. [b] Magni ab soluta eligendi sed earum [strong] maxime possimus quae vero [em] sapiente voluptates minima at cum nisi quia, [i] porro in temporibus quas obcaecati.
Autres tailles de paragraphe
La classe utilitaire .ftz-16 donne un font-size: 16px;, utile pour les mentions, notes, etc.
Le symbole * indique les champs obligatoires
Lien
Les liens contextualisés héritent du style du texte, ils sont présentés sur la page lien.