Typography

Titres

Les titres sont intégrés de manière "fluide" c'est à dire qu'ils diminuent progressivement en fonction de la taille d'écran.

Pour les utiliser on peut utiliser directement la balise html qui convient ou une classe h1.h5-size

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
lorem
lorem ipsum
lorem ipsum dolor
lorem ipsum dolor sit
lorem ipsum dolor sit amet, consectetur
lorem ipsum dolor sit amet, consectetur adipiscing elit.
1337

lorem ipsum dolor sit amet, consectetur adipiscing elit.

lorem ipsum dolor sit amet, consectetur adipiscing elit.

lorem ipsum dolor sit amet, consectetur

lorem ipsum dolor sit amet, consectetur

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

lorem ipsum dolor sit

lorem ipsum dolor sit

lorem ipsum dolor

lorem ipsum dolor

lorem ipsum

lorem ipsum

lorem

h1 Heading 1
h2 Heading 2
h3 Heading 3
h4 Heading 4
h5 Heading 5
h6 Heading 6

div.h1-size lorem
div.h2-size lorem ipsum
div.h3-size lorem ipsum dolor
div.h4-size lorem ipsum dolor sit
div.h5-size lorem ipsum dolor sit amet, consectetur
div.h6-size lorem ipsum dolor sit amet, consectetur adipiscing elit.

div.big-number-size 1337

p.text-xs lorem ipsum dolor sit amet, consectetur adipiscing elit.
p.text-sm lorem ipsum dolor sit amet, consectetur adipiscing elit.
p.text-base lorem ipsum dolor sit amet, consectetur
p.text-lg lorem ipsum dolor sit amet, consectetur
p.text-xl lorem ipsum dolor sit amet
p.text-2xl lorem ipsum dolor sit amet
p.text-3xl lorem ipsum dolor sit
p.text-4xl lorem ipsum dolor sit
p.text-5xl lorem ipsum dolor
p.text-6xl lorem ipsum dolor
p.text-7xl lorem ipsum
p.text-8xl lorem ipsum
p.text-9xl lorem

UI

DÉPRÉCIÉ On leur préférera les classes utilitaires text-*font-*tracking-* & uppercase.
text-xl + font-medium
text-base + font-medium
text-base + font-normal
text-sm + font-semibold
text-sm + font-medium
text-sm + font-normal
text-xs + uppercase + gris-foncé
text-sm + font-normal + uppercase + title-font + tracking-wide
.ui-l-semi text-xl + font-medium

.ui-m-med text-base + font-medium
.ui-m-reg text-base + font-normal

.ui-s-semi text-sm + font-semibold
.ui-s-med text-sm + font-medium
.ui-s-reg text-sm + font-normal

.ui-label-reg text-xs + uppercase + gris-foncé
.ui-button-m text-sm + font-normal + uppercase + title-font + tracking-wide

Texte bicolore

Réduire maconsommation

Réduire maconsommation

h3.emphasized-text
  em Réduire ma
  span consommation

.scheme-vert-negatif
  h3.emphasized-text
    em Réduire ma
    span consommation