La vue Typographie
Un spécimen en direct — titre, chapeau, corps, listes, formulaires — où chaque taille de police est un pas de l’échelle et chaque interligne repose sur la grille de ligne de base. Vous ne tapez pas de tailles ; vous sélectionnez un élément et le faites avancer le long de l’échelle.
La barre d’outils
- Base : Fixe / Fluide — la fixe utilise l’échelle telle quelle ; la fluide interpole la base entre deux largeurs de viewport (ci-dessous).
- Polices de titre / de corps — pile système par défaut, ou choix dans une liste soignée de Google Fonts ; les emplacements titre et corps sont indépendants.
- Unité CSS — rem ou px. L’échelle est définie par rapport à la base dans les deux cas ; rem la garde sensible aux préférences de l’utilisateur.
- Ligne de base — affiche l’unité de ligne de base dérivée avec sa
dérivation explicite :
8px (16/2). La ligne de base est base ÷ 2, fixée par l’échelle — la vue grille l’affiche mais ne la possède pas. - Grille — superpose la grille de colonnes du plus grand point de rupture en miroir en lecture seule (la vue Grille est l’unique propriétaire des colonnes).
Travailler dans le spécimen
Cliquez sur un bloc pour le sélectionner, double-cliquez pour modifier son texte. Puis :
- ↑ / ↓ — faites avancer la taille de police le long de l’échelle.
- ← / → — faites avancer l’interligne par incréments d’une demi-ligne de base.
- Maj+B — basculez la trame de ligne de base derrière le spécimen.
- Maj+G — basculez la superposition de colonnes.
Les éléments du même type sur la même ligne partagent leur taille — ajustez un titre de colonne et ses semblables suivent. Le texte du spécimen est lui-même du contenu : modifiez-le librement, les changements de langue ne l’écraseront pas.
La carte d’échelle
La barre latérale liste l’échelle générée complète avec les valeurs en rem ; des coches marquent les niveaux que le spécimen utilise réellement. C’est la même liste que contiendront vos exports — le spécimen est un aperçu des tokens, pas un artefact distinct.
Mode fluide
Le mode fluide interpole la base entre un viewport minimal et maximal (par défaut
16→18px de 375→1280). Chaque valeur d’échelle devient une expression CSS
clamp() ; la barre de viewport vous laisse balayer l’aperçu sur toute la
plage, avec les points de rupture de la grille marqués comme points de saut. Les
guides sur la typographie fluide expliquent quand le
fluide en vaut la peine et comment fonctionne le calcul.
Zoom
Le contrôle de zoom flottant met à l’échelle l’aperçu — ajuster, ou 50–150 %. C’est une loupe sur l’établi : le zoom ne touche jamais vos valeurs ni l’export.