Guideline Typography (WIP)

La gestion des typos est importante dans un projet, c'est la première chose à configurer. Voici un système appliquable, sur n'importe quel type de projet :

• Wordpress
• Shopify
• Symfony / Laravel

Concernant le FSE et la

---

Nombres de font

Nous vous demanderons de respecter à un nombre de font maximum de 4, sinon dans l'idéal 2 fonts.

Les formats de font

Utiliser prioritairement des typos en woff2, c'est léger et moderne. Des convertisseurs existent !

Des fonts local !

Pour plus de performance, il est primordial d'utiliser des fonts local... Les font distantes sont interdites ! Si votre stack utilise ViteJS, placer les fonts dans : /front/public/fonts

Appeler les fonts

Notez que le dossiers "fonts" ci-dessous dans l'url correspond à celui du dossier public qui est build par ViteJS.

fonts.js
--------------------------
@font-face {
    font-family: 'Museo';
    font-style: normal;
    font-display: swap;
    src: url('fonts/MuseoModerno-SemiBold.woff2') format('woff2');
}

Configuration de Tailwind

tailwind.config.js
--------------------------
...
theme: {
    ...,
    fontFamily: {
        sansSerif: ['Manrope', 'sans-serif'],
        museo: ['Museo', 'sans-serif'],
    },
}
...

---

Tailles des fonts

Le styleguide typography est necessaire, car il permet d'avoir des tailles de typo constantes d'un breakpoint à un autre, sauf cas exceptionnel.

Un maximum 5 tailles de font comme suit, avec des variables comme nom.

De figma au front

Tableau attendu au commencement du dev. Ce tableau est relatif aux diférents

Nom de la variable	Mobile > 479px	Tablet > 768px	Desktop	Big Desktop
S	0.75rem	0.85rem	0.85rem	0.95rem
M	0.85rem	1rem	1rem	1.1rem
L	Text	Text
XL	Text	Text
XXL	Text	Text

Configuration tailwind

Le but étant d'avoir des tailles de titres & textes toujours équivalent