Qu'est-ce que Testeur de typographie ?

Le testeur de typographie permet d'ajuster les propriétés de police et de voir le résultat en temps réel. Choisissez une famille de polices, réglez la taille, la graisse, l'interligne et l'espacement, puis copiez le CSS directement dans votre projet.

L'outil permet d'ajuster la famille de police, la taille, la graisse (100 à 900), la hauteur de ligne, l'interlettrage, l'inter-mot, l'alignement, la transformation de texte et la couleur. Le texte d'exemple est modifiable, vous prévisualisez donc vos vrais titres ou paragraphes, et le panneau CSS s'exporte d'un clic pour être collé dans une feuille de style ou un styled component.

Comment utiliser

1. Saisissez ou collez votre texte d'exemple dans la zone de prévisualisation.
2. Ajustez les contrôles typographiques : famille de polices, taille, graisse, interligne, espacement entre lettres et entre mots.
3. Copiez le code CSS généré pour utiliser les réglages typographiques directement dans votre projet.

Quand l'utiliser

• Régler le corps d'un article jusqu'à ce qu'Inter 18 px en interligne 1,6 se lise confortablement sur mobile.
• Tester un long article en 16, 17 et 18 px pour voir quelle taille retient le lecteur.
• Vérifier si augmenter l'interlettrage corrige l'allure tassée d'un bouton tout en capitales.

Résultat

Un designer web teste la police « Inter » en 18px avec un interligne de 1,6 et un espacement de lettres de 0,02em, puis copie le CSS pour la feuille de style de son blog.

FAQ

Quel interligne convient pour un texte courant ?

Pour des paragraphes longs en 16 à 18 px, un interligne entre 1,5 et 1,7 se lit avec aisance à l'écran. Les titres respirent mieux avec des valeurs serrées, généralement 1,1 à 1,3. Tapez titre et paragraphe dans la zone d'exemple pour comparer.

Pourquoi l'interlettrage est-il en em et pas en px ?

Em s'échelonne avec la taille de police, donc 0,02 em garde la même proportion que le texte soit en 14 px ou 48 px. Une valeur en pixels paraît correcte à une taille, étrange à une autre.

Quelles graisses sont fiables sur le web ?

Les Google Fonts récentes et les polices variables couvrent 100 à 900, mais certaines polices auto-hébergées n'embarquent que 400 et 700. Si l'aperçu ne bouge plus quand vous changez de graisse, la police ne possède pas ce poids et le navigateur synthétise un faux style.

Puis-je tester des polices non préchargées par la page ?

Choisissez dans le menu de polices intégré : il propose une recherche et des filtres Sans / Serif / Monospace / Système, et toute Google Font sélectionnée se charge toute seule. Passez en vue Galerie pour voir votre texte d'exemple dans toutes les polices d'un coup, ou activez Comparer pour mettre deux polices côte à côte. L'envoi d'un fichier de police personnalisé n'est pas pris en charge ici ; pour cela, il faut passer par un @font-face sur votre site.

Comment porter le CSS dans un projet React ou Tailwind ?

Cliquez sur Copier CSS pour récupérer chaque propriété en déclaration standard. En React, collez dans un template literal de styled-components ou convertissez chaque ligne en clé camelCase. En Tailwind, mappez taille et graisse à des classes utilitaires et conservez les espacements personnalisés via la syntaxe à valeur arbitraire.

Outils similaires