Parto quasi sempre da un modular scale con un ratio di 1.25 (Major Third) per siti corporate e 1.333 (Perfect Fourth) per siti più editoriali o con molto testo. Il ratio determina quanto saltano i passi della scala — un ratio alto crea gerarchia forte ma può essere difficile da bilanciare su mobile. Il ratio basso è più subdolo ma più flessibile.
La base è sempre 16px (1rem) per il body text — è la dimensione che i browser usano di default ed è ben studiata per la leggibilità. Da lì calcolo verso il basso (14px per UI secondaria, 12px per label e caption) e verso l'alto seguendo il modular scale. Non uso mai più di 5-6 passi in una direzione sola — una scala con 10 dimensioni diverse è impossibile da usare in modo coerente.
Line height è altrettanto importante quanto la dimensione. Per body text uso 1.6-1.7, per headings grandi uso 1.1-1.2 (altrimenti l'interlinea diventa enorme), per UI e button text uso 1.3-1.4. Letter spacing: leggermente negativo (-0.02em) per headings grandi, neutro per body, leggermente positivo (0.05em) per testo in maiuscolo o label. Questi valori vengono da anni di affinamento su progetti reali, non da un manuale.
Tutto questo lo codificio come CSS custom properties (variabili) prima di iniziare qualsiasi componente. In un progetto Tailwind, estendo la config con i valori calcolati invece di usare le classi predefinite di Tailwind per la tipografia — che sono buone di default ma raramente perfette per un brand specifico. Una volta che la scala è in Tailwind config, applicarla è meccanico e consistente per tutta la durata del progetto.