Hiérarchisation

Hiérarchiser le contenu typographique clairement & simplement

Introduction

La hiérarchisation du contenu est importante pour une bonne lisibilité du contenu. Cette page décrit les styles typographiques des titres ainsi que des éléments de corps de textes.

Titres

Les différents niveaux de titres au sein d'une même page.

Titre - H1

Lorem ipsum dolor sit amet

  • Famille : Fira Sans Variante : ExtraBold
  • Taille : 50px Interlignage : 50px Paragraphe : 25px
  • Couleur : couleur de l'univers primary_ {{ univers }}

Positionnement

Les grands titres H1 sont toujours centrés dans la page.

Titre - H2

Lorem ipsum dolor sit amet

  • Famille : Fira Sans Variante : ExtraBold
  • Taille : 35px Interlignage : 40px Paragraphe : 20px
  • Couleur : grey_1

Titre - H3

Lorem ipsum dolor sit amet

  • Famille : Fira Sans Variante : ExtraBold
  • Taille : 25px Interlignage : 30px Paragraphe : 15px
  • Couleur : grey_1

Titre - H4

Lorem ipsum dolor sit amet

  • Famille : Fira Sans Variante : ExtraBold
  • Taille : 20px Interlignage : 25px Paragraphe : 15px
  • Couleur : grey_1

Positionnement

Tous les titres H2, H3, H4 sont toujours ferrés à gauche à l’exception du H2 avant le composant « mise en avant » qui est centré.

Corps de textes

Les différentes variantes de paragraphe au sein des pages IGN.

Paragraphe - P

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ab soluta eligendi sed earum maxime possimus quae vero sapiente voluptates minima at cum nisi quia, porro in temporibus quas obcaecati.

Sed sed finibus mi. Curabitur maximus purus et ex vestibulum, quis pulvinar mauris ullamcorper. Donec porta dolor nisl, at rutrum velit faucibus sit amet. Praesent sagittis, diam quis hendrerit consequat.

  • Famille : Open Sans Variante : Regular (Les autres variantes Open Sans peuvent être utilisées)
  • Taille : 15px Interlignage : 30px Paragraphe : 15px
  • Couleur : grey_1

Citation - Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non suscipit magna. Nullam varius gravida augue, sed commodo nunc tempor eu. In eget feugiat eros, eu ultricies mi.

  • Famille : Open Sans Variante : Bold Italic
  • Taille : 18px Interlignage : 25px Paragraphe : 15px
  • Couleur : grey_1

Sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non suscipit magna. Nullam varius gravida augue, sed commodo nunc tempor eu. In eget feugiat eros, eu ultricies mi.

  • Famille : Open Sans Variante : Semi bold
  • Taille : 18px Interlignage : 30px Paragraphe : 15px
  • Couleur : grey_1

Legende - Legend

Agent de l'IGN sur le terrain / Photos: Ryan Holiday
  • Famille : Open Sans Variante : Regular Italic
  • Taille : 15px Interlignage : 25px Paragraphe : 15px
  • Couleur : grey_3

Utilisation

La légende ne peut être utilisée qu'avec une image. Ex.:

<figure role="group" aria-labelledby="figcaption-001">
   <img src="http://..." alt="Agent de l'IGN sur le terrain">
   <figcaption class="figure-caption text-right" id="figcaption-001">Agent de l'IGN sur le terrain / Photos: Ryan Holiday</figcaption>
</figure>

Autres

D'autres éléments typographiques sont disponibles dans ce design system (liens, boutons, formulaires…). Veuillez vous reporter aux sections associées.