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
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
text-*
, font-*
, tracking-*
& uppercase
. .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
h3.emphasized-text
em Réduire ma
span consommation
.scheme-vert-negatif
h3.emphasized-text
em Réduire ma
span consommation