Typographie - Typography

Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l'État . Leur usage crée une cohérence entre les interfaces et offre une expérience positive à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.

 

Les typographies Marianne et Spectral

Les typographies à utiliser dans le cadre du DSFR sont :

  • la police Marianne®(light, regular et bold), ainsi que les versions italiques (light italic, regular italic et bold italic) ;

  • la police Spectral (regular et extra-bold).

Les typographies de substitution sont :

  • l’Arial, pour la Marianne ;

  • la Georgia, pour la Spectral.

Utilisation des typographies

Pour commencer à utiliser le DSFR, il faut télécharger et installer les typographies :

  • Télécharger la typographie Marianne

La typographie Marianne est fournie dans une version finalisée mais non sécurisée. La version stable, sécurisée (auditée) et signée sera très bientôt disponible .
Le SIG ne pourra, en aucun cas, être tenu responsable des risques de sécurité quant à l'installation de cette font.

 

 

  • Télécharger la typographie Spectral




Chaque taille de typographie est convertie en rem dans le code à partir d’une valeur fixée à 16px. 1rem est donc égal à 16px.

Les différents styles de police sont proposés en version mobile jusqu’au point de rupture MD, au delà ils passent en version destkop (En savoir plus sur les points de ruptures )

 

Pour les designers :

  • Différents styles de texte et de titres, détaillés ci-dessous, vous sont proposés pour concevoir vos interfaces efficacement et assurer l’homogénéité entre les différents sites ;

  • Il faut privilégier l’usage de la typographie Marianne®. L’usage de la Spectral - et des polices serif en général - n’est pas recommandé en typo principale, mais en appoint pour certaines infos secondaires ou mineures.

Pour les développeurs :

  • Un set de base vous est proposé. Vous pouvez le modifier et personnaliser en utilisant le système de classes pour les titres, les styles de texte et les liens.

Titres et titres alternatifs - Heading and display

Titres - heading

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 important pour le référencement naturel de la page.

Niveau

Usages

Aperçu HTML

Balise associée

Attributs desktop

Attributs mobile

Niveau

Usages

Aperçu HTML

Balise associée

Attributs desktop

Attributs mobile

H1

Titre principal de la page : il ne peut y en avoir qu’un par page.

<h1>

Taille : 40 px
Line-height : 48 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 32 px
Line-height : 40 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

H2

Second niveau de titre de section/paragraphes. Leur nombre n’est pas limité.
Ils permettent de hiérarchiser les sections de texte et de paragraphes

<h2>

Taille : 32 px
Line-height : 40 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 28px
Line-height : 36 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

H3

Troisième niveau sous-titre de section/paragraphes. Leur nombre n’est pas limité.
Ils permettent de hiérarchiser les sections de texte et de paragraphes.

<h3>

Taille : 28px
Line-height : 36 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 24 px
Line-height : 32 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

H4

Quatrième niveau de sous-titre. Leur nombre n’est pas limité.

<h4>

Taille : 24 px
Line-height : 32 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 22 px
Line-height : 28 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

H5

Cinquième niveau de sous-titre. Leur nombre n’est pas limité.

<h5>

Taille : 22 px
Line-height : 28 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 20 px
Line-height : 28 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

H6

Sixième et plus petit niveau de sous-titre. Leur nombre n’est pas limité.

<h6>

Taille : 20 px
Line-height : 28 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 18 px
Line-height : 24 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

Titres alternatifs - Display

Pour donner une plus grande liberté éditoriale et graphique, sans nuire à la hiérarchie de l’information et au référencement nous vous proposons plusieurs niveaux de titres alternatifs (display). Vous pourrez les utiliser pour les mise en avant, les bannières etc…

Niveau

Aperçu HTML

Classe associée

Attributs desktop

Attributs mobile

Niveau

Aperçu HTML

Classe associée

Attributs desktop

Attributs mobile

Titre alternatif XL

fr-display-xl

Taille : 80 px
Line-height : 88 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 72 px
Line-height : 80 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

Titre alternatif LG

fr-display-lg

Taille : 72 px
Line-height : 80 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 64 px
Line-height : 72 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

Titre alternatif MD

fr-display-md

Taille : 64 px
Line-height : 72 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 56 px
Line-height : 64 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

Titre alternatif SM

fr-display-sm

Taille : 56 px
Line-height : 64 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 48 px
Line-height : 56 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

Titre alternatif XS

fr-display-xs

Taille : 48 px
Line-height : 56 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White
Taille : 40 px
Line-height : 48 px

Couleur sur fond clair : G800
Couleur sur fond foncé : White

Les titres alternatifs peuvent être associés selon votre besoin à un h1, un h2, un h3 ou un h4.

Personnalisation des titres

Cette grand modularité permet de répondre aux différents cas de figure que vous pouvez rencontrez. Il faut cependant créer son jeu typographique et la hiérarchisation de l’information en créant des récurrences sur un même site, afin de faciliter le confort de lecture et les repères.

Il est préférable afin pour garder une interface claire et lisible, de ne pas utiliser plus de 4 niveaux de titres.

Pour les développeurs
afin de personnaliser la taille de vos titres vous pouvez également utiliser les classes fr-h1, fr-h2,fr-h3, fr-h4, fr-h5, fr-h6.
Par exemple : <h3 class="fr-h1> aura pour effet de donner à votre titre h3, les caractéristiques graphique du h1, tout en préservant votre architecture de l’information.

Corps de texte - Body

Style de texte

Les styles de texte sont là pour vous aider à concevoir vos interfaces efficacement et assurer l’homogénéité entre les différents sites.

Niveau

Usage

Aperçu HTML

Classe associée

Attributs desktop

Attributs mobile

Niveau

Usage

Aperçu HTML

Classe associée

Attributs desktop

Attributs mobile

XL - Texte chapô

Chapô à utiliser pour les introductions ou accroches.

 

fr-text--lead

Taille : 22 px
Line-height: 36 px

Couleur sur fond clair : G700
Couleur sur fond foncé : G200
Taille : 20 px
Line-height: 32 px

Couleur sur fond clair : G700
Couleur sur fond foncé : G200

LG - Texte article

 

Corps de texte réservé aux usages éditoriaux (type : actualités, blog) afin d’amener un plus grand confort de lecture.

 

fr-text--lg

Taille : 20 px
Line-height : 32 px

Couleur sur fond clair : G700
Couleur sur fond foncé : G200
Taille : 18 px
Line-height : 28 px
Couleur sur fond clair : G700
Couleur sur fond foncé : G200

MD -

Texte standard

Corps de texte par défaut, à utiliser pour le texte courant et dans la majorité des cas.

C’est le style de texte utilisé par défaut dans le set développé.

 

<p>

fr-text

Taille : 16 px
Line-height : 24 px

Couleur sur fond clair : G700
Couleur sur fond foncé : G200

SM - Texte détail

 

À utiliser en corps de texte uniquement au sein de certains composants.

 

fr-text--sm

Taille : 14 px
Line-height : 24 px

Couleur sur fond clair : G700
Couleur sur fond foncé : G200

XS - Texte mention

 

À utiliser pour les mentions, légendes ou autres informations mineures, qui ne doivent pas perturber la lecture de l’information.

 

fr-text--xs

Taille : 12 px
Line-height : 20 px

Couleur sur fond clair : G600
Couleur sur fond foncé : G300

Dans le set de base pour les développeurs le style de paragraphe (<p>) est par défaut le corps de texte MD.

Les styles de textes LG, MD, SM, et XS sont également disponibles avec la typographie Spectral, en ajoutant la classe fr-text--alt. L’usage de la Spectral est limité à des informations secondaires, mineures ou à distinguer.

Listes

Les listes vous permettent de traiter différemment une série d’information et de la faire apparaitre clairement au lecteur.

Niveau

Usage

Aperçu HTML

Classe associée

Attributs

Niveau

Usage

Aperçu HTML

Classe associée

Attributs

Liste ordonnée

Liste d'éléments ordonnée

 

<ol><li>

Pixel : 16
Rem : 1
Line height : 1.5
Couleur sur fond clair : G700
Couleur sur fond foncé : G200

Liste

Liste d'éléments non ordonnée

 

<ul><li>

Pixel : 16
Rem : 1
Line height : 1.5
Couleur sur fond clair : G700
Couleur sur fond foncé : G200

Liens

Les liens contextualisés héritent du style du texte, ils sont présentés sur la page 'Liens' .

Règles d’utilisation

Usage

Hiérarchisation de l’information :

Les titres, graisses et tailles sont fondamentaux pour permettre une hiérarchisation de l’information. Il faut cependant en avoir un usage équilibré et uniforme au sein du site (taille de corps de texte, taille de titre).

Pour la hiérarchisation de la lecture vous pouvez également utiliser la mise en exergue , la mise en avant , le tableau .

Longueur du texte courant :

Il est recommandé de veiller à limiter le nombre de caractère par ligne. Nous vous recommandons d’utiliser un conteneur de maximum 8 colonnes pour les contenus.

Pour les tailles de typographies S et XS, il est recommandé d’utiliser un conteneur moins large : en effet des études montrent qu’entre 45 et 75 caractères la lecture est satisfaisante pour le desktop, 35 à 40 caractères pour le mobile.

Choix des couleurs :

Une couleur par défaut est recommandée. Si vous souhaitez la changer, veuillez choisir une couleur parmi les couleurs d’interface (voir couleurs - palette - color ).