Family

Le projet permet l'utilisation de 1 à 3 fonts différentes (en fonction des besoins) :

$ff1 : Roboto
$ff2 : $ff1
$ff3 : $ff1

Dans notre cas, une seule font couvre les besoins du projet.

Le tableau suivant liste les différentes typographies dans les différentes variations de graissage disponibles.

Variante	Graissage	`$ff1`	`$ff2`	`$ff3`
Thin	`100`
Light	`300`
Regular	`400`	Lorem ipsum italique	Lorem ipsum italique	Lorem ipsum italique
Medium	`500`
SemiBold	`600`
Bold	`700`	Lorem ipsum italique	Lorem ipsum italique	Lorem ipsum italique
ExtraBold	`800`
Black	`900`	Lorem ipsum italique	Lorem ipsum italique	Lorem ipsum italique

À noter la création de 3 mixins et de 3 classes dédiées (.ff1, .ff2, .ff3) pour invoquer ces fonts en cas de besoin.

/* FF1 - 400 - Regular */
@font-face {
    font-family:'Roboto'; font-style:normal; font-display:swap;
    src: 
        url("../fonts/roboto-regular-webfont.woff2") format("woff2"),
        url("../fonts/roboto-regular-webfont.woff") format("woff");
    font-weight:400;
}
/* FF1 - 700 - Bold */
@font-face {
    font-family:'Roboto'; font-style:normal; font-display:swap;
    src: 
        url("../fonts/roboto-bold-webfont.woff2") format("woff2"),
        url("../fonts/roboto-bold-webfont.woff") format("woff");
    font-weight:700;
}
/* FF1 - 900 - Black */
@font-face {
    font-family:'Roboto'; font-style:normal; font-display:swap;
    src: 
        url("../fonts/roboto-black-webfont.woff2") format("woff2"),
        url("../fonts/roboto-black-webfont.woff") format("woff");
    font-weight:900;
}
$ff1: 'Roboto', sans-serif;

// FF2
// ------------------------------
$ff2: $ff1;

// FF3
// ------------------------------
$ff3: $ff1;

// Mixins & Classes
// ------------------------------
@mixin ff1() { font-family:$ff1; }
@mixin ff2() { font-family:$ff2; }
@mixin ff3() { font-family:$ff3; }

.ff1 { @include ff1(); }
.ff2 { @include ff2(); }
.ff3 { @include ff3(); }

La font de base est alors distribuée dans le fichier de variables général comme ceci :

$font-family-sans-serif: $ff1;

Usages prédéfinis

Une fois les fonts définies, il convient de les affecter à certains usages particuliers dont celui des titres. Dans notre cas, la typo est la même mais nous avons prévu de l'encapsuler dans une variable pour faciliter les éventuelles modifications à venir.

$ff-title : $ff1;

Cette variable est alors distribuée dans le fichier de variables général comme ceci :

$headings-font-family: $ff-title;

Size

Le site utilise un root natif, c'est à dire que la size de base est portée par la balise html et que toute référence en rem aura cette base.
Par défaut cette valeur est de 16px.

Pour ne pas être dépendant de cette valeur, nous pouvons définir les tailles en utilisant une mixin :

$rem-base:16;
@function rem($value) {
  $remValue: ($value/$rem-base)+rem;
  @return $remValue;
}
// exemple : .lipsum { padding:rem(20); } // cela donnera du 20px

Il faut établir et disposer d'une grille de possibilités de tailles afin de garantir la cohérence graphique et la simplicité de mise en œuvre de tout nouvel élément.
La neutralisation des variables via des tailles de t-shirt permet de cataloguer les tailles disponibles (de xxx-s à xxx-l).

Taille de base du site : 16px $font-size-base.

Variable / Mixin	Size (px)	`.ff1` 400/700	Body	Heading
`fs-xxxs`	10px	Lorem ipsum	X
`fs-xxs`	12px	Lorem ipsum	X
`fs-xs`	14px	Lorem ipsum	X
`fs-s`	`16px`	Lorem ipsum	X	`.t6`
`fs-m`	20px	Lorem ipsum	X	`.t5`
`fs-l`	24px	Lorem ipsum		`.t4`
`fs-xl`	28px	Lorem ipsum		`.t3`
`fs-xxl`	32px	Lorem ipsum		`.t2`
`fs-xxxl`	40px	Lorem ipsum		`.t2`

Un petit coup d'œil en arrière-boutique pour bien comprendre la mise en œuvre.

// FONT SIZE
// ------------------------------
$fs-xxxs:               10;
$fs-xxs:                12;
$fs-xs:                 14;
$fs-s:                  16;
$fs-m:                  20;
$fs-l:                  24;
$fs-xl:                 28;
$fs-xxl:                32;
$fs-xxxl:               40;

@mixin fs($size) {
    font-size: rem($size);
}

@mixin fs-xxxs() { @include fs($fs-xxxs); }
.fs-xxxs { @include fs-xxxs(); }

@mixin fs-xxs() { @include fs($fs-xxs); }
.fs-xxs { @include fs-xxs(); }

@mixin fs-xs() { @include fs($fs-xs); }
.fs-xs { @include fs-xs(); }

@mixin fs-s() { @include fs($fs-s); }
.fs-s { @include fs-s(); }

@mixin fs-m() { @include fs($fs-m); }
.fs-m { @include fs-m(); }

@mixin fs-l() { @include fs($fs-l); }
.fs-l { @include fs-l(); }

@mixin fs-xl() { @include fs($fs-xl); }
.fs-xl { @include fs-xl(); }

@mixin fs-xxl() { @include fs($fs-xxl); }
.fs-xxl { @include fs-xxl(); }

@mixin fs-xxxl() { @include fs($fs-xxxl); }
.fs-xxxl { @include fs-xxxl(); }

// exemple : .lipsum { @include fs-s; }

Headings

Les titres de h1 à h6 sont disponibles.

Titres natifs

h1 Lorem ipsum Bootstrap heading

h2 Lorem ipsum Bootstrap heading

h3 Lorem ipsum Bootstrap heading

h4 Lorem ipsum Bootstrap heading

h5 Lorem ipsum Bootstrap heading

h6 Lorem ipsum Bootstrap heading

Pseudo titres et SEO optimisation

Il est possible d'utiliser les classe .h1 à .h6 pour obtenir le même résultat que les titres natifs sur n'importe quelle balise.
Il est également possible de mettre une classe .h4 sur une balise h1. Cela permet de dissocier la sémantique de l'affichage.

.h1 Lorem ipsum Bootstrap heading

.h2 Lorem ipsum Bootstrap heading

.h3 Lorem ipsum Bootstrap heading

.h4 Lorem ipsum Bootstrap heading

.h5 Lorem ipsum Bootstrap heading

.h6 Lorem ipsum Bootstrap heading

<p class="h1">.h1 Lorem ipsum Bootstrap heading</p>
<p class="h2">.h2 Lorem ipsum Bootstrap heading</p>
<p class="h3">.h3 Lorem ipsum Bootstrap heading</p>
<p class="h4">.h4 Lorem ipsum Bootstrap heading</p>
<p class="h5">.h5 Lorem ipsum Bootstrap heading</p>
<p class="h6">.h6 Lorem ipsum Bootstrap heading</p>

Tout est paramétrable suivant les variables suivantes :

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;

$headings-margin-bottom:      $spacer * .5 !default;
$headings-font-family:        null !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              null !default;

Titres "Display"

Il est possible d'utiliser les classes .display-1 à .display-6 pour afficher des titres distinctifs des titres de base.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Tout est paramétrable suivant les variables suivantes :

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Wording de base

Cliquez ici pour en savoir plus sur le reboot du site.

Base

Texte normal / Texte en gras / Texte plus gros / Texte plus petit / Texte petit et italique / Lorem ipsum ^{texte en exposant} / lien de base / mark.

Paragraphe

∑

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus dolor nec fermentum volutpat. Praesent vehicula orci nec urna fermentum convallis. Mauris eu luctus orci. Aliquam erat volutpat. Sed fringilla finibus purus, at pharetra dui euismod eu. Sed bibendum, mauris eget rutrum viverra, leo erat volutpat ipsum, ac aliquet lorem ligula ut tellus. Nullam pulvinar, neque quis posuere eleifend, elit est blandit diam, nec sagittis risus turpis eu ligula.

Nullam a ante faucibus, imperdiet nisl ac, eleifend arcu. Praesent ac odio a augue sodales tristique. Praesent eget mollis ipsum. Curabitur ullamcorper massa vel dui venenatis rutrum in a ligula. Aenean sit amet nisi nisi. Cras volutpat convallis arcu a pellentesque. In luctus placerat pretium.

Liste

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque laoreet magna vitae nibh rutrum finibus.
Morbi eleifend lorem in interdum volutpat.
Vestibulum eu nisl eget ex euismod faucibus id sed lectus.

HR / Séparateurs

La classe .lead est prévue pour les paragraphes d'introduction. Ils se distinguent des paragraphes ordinaires.

<hr>
<div class="text-success"><hr></div>
<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Lead

This is a lead paragraph. It stands out from regular paragraphs.

<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>

Cas particuliers de paragraphes / textes

Vous pouvez utiliser l'étiquette de marque pour souligner du texte.

~~Cette ligne de texte doit être considérée comme du texte supprimé.~~

~~Cette ligne de texte est considérée comme obsolète.~~

Cette ligne de texte doit être considérée comme un ajout au document.

Cette ligne de texte apparaîtra soulignée.

Cette ligne de texte est à considérer comme une mention en petits caractères.

Cette ligne est affichée en gras.

Cette ligne est affichée en italique.

<p>Vous pouvez utiliser l'étiquette de marque pour <mark>souligner</mark> du texte.</p>
<p><del>Cette ligne de texte doit être considérée comme du texte supprimé.</del></p>
<p><s>Cette ligne de texte est considérée comme obsolète.</s></p>
<p><ins>Cette ligne de texte doit être considérée comme un ajout au document.</ins></p>
<p><u>Cette ligne de texte apparaîtra soulignée.</u></p>
<p><small>Cette ligne de texte est à considérer comme une mention en petits caractères.</small></p>
<p><strong>Cette ligne est affichée en gras.</strong></p>
<p><em>Cette ligne est affichée en italique.</em></p>

RFS (Responsive Font Size) : taille de typo adaptative

Dans Bootstrap 5, les tailles de police adaptatives sont activées par défaut, permettant ainsi au texte de s'ajuster plus naturellement à la taille de l'écran et de la fenêtre.
En savoir plus sur RFS

Headings customisés avec mixins

A l'image des classes .h1 à .h6, l'équivalent a été créé avec mise à disposition de mixins de .t1 à .t6. Il est possible d'utiliser ces classes de façon indépendante de la sémantique de la balise (une balise h1 peut avoir le style d'un t3).

t1 La qualité pour tous