Guide de typographie
Crée et visualise ton guide de polices avec headlines, paragraphes et labels.
Titres
Paragraphes
Labels / UI
Règles typographiques
À propos : Guide de typographie
Le guide de typographie sert à poser les styles de texte d'un projet : titres, paragraphes et labels d'interface. Pour chaque style, tu définis la police, la graisse, la taille et l'interligne, et tu vois le rendu sur l'alphabet, les chiffres, les caractères spéciaux et une phrase d'exemple. Ajoute tes règles d'usage, puis copie le guide en texte brut pour le coller dans une documentation, un ticket ou une passation entre design et développement.
Fonctionnalités
- Trois catégories, titres, paragraphes et labels/UI, avec autant de styles que nécessaire, à réordonner avec des flèches.
- Réglage de la police, du nom du style, de la graisse (100 à 900), de la taille en pixels et de l'interligne.
- Aperçu en direct sur l'alphabet, les chiffres, les caractères spéciaux et une phrase ou un paragraphe d'exemple.
- Zone de règles typographiques, une par ligne, reprises dans le guide généré.
- Guide complet en texte brut à copier, copie des styles d'une catégorie, et annuler ou rétablir à tout moment.
Comment l'utiliser
- Dans chaque section, renseigne la police, le nom du style, la graisse, la taille et l'interligne.
- Ajoute d'autres styles avec « Ajouter un style » et range-les avec les flèches.
- Écris tes règles d'usage dans la zone dédiée, une par ligne.
- Copie le guide généré en bas de page pour le partager.
Questions relatives à l'utilisation
L'aperçu utilise les polices disponibles dans ton navigateur : la police doit être installée sur ton ordinateur ou faire partie des polices système, car l'outil ne télécharge aucune police web. Sinon, le navigateur se rabat sur une autre police. Tu peux indiquer une pile comme « Inter, Roboto, sans-serif ».
Pour du texte courant, un interligne de 1,4 à 1,6 est une valeur répandue, et le critère WCAG 1.4.12 demande qu'une page reste lisible quand l'utilisateur le passe à 1,5. Les grands titres se contentent souvent de 1,1 à 1,3, car leurs lignes sont plus courtes.
En CSS, la graisse 400 correspond à normal et 700 à bold. Les valeurs vont de 100 (thin) à 900 (black) par pas de 100. Une police n'affiche une graisse que si elle la fournit ; sinon le navigateur prend la plus proche ou simule le gras.