Generatore Scala Tipografica
Anteprima scala
Codice
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}Domande Frequenti
Tutto sulla tipografia e le scale modulari
Cos'è una scala tipografica?
Una scala tipografica è un insieme di dimensioni di testo proporzionalmente correlate tra loro tramite un rapporto fisso (ratio). Usare una scala coerente crea armonia visiva nel design, poiché ogni dimensione è matematicamente correlata alle altre.
Quale ratio scegliere?
Per interfacce digitali, il Perfect Fourth (1.333) e il Major Third (1.250) sono le scelte più comuni: offrono un contrasto visibile senza essere eccessivo. Il Golden Ratio (1.618) crea contrasti molto marcati, ideale per titoli e landing page. Minor Second (1.125) è sottile, per UI molto dense.
Come si usa l'output CSS?
Copia le variabili CSS nel tuo file di stile globale (es. `app.css`). Poi usale con `font-size: var(--text-lg)`. Per Tailwind, incolla la configurazione nel blocco `fontSize` del tuo `tailwind.config.js`.
什么是排版比例？
排版比例是通过固定比率按比例相互关联的一组文字大小。使用一致的比例可在设计中创造视觉和谐，因为每个大小在数学上与其他大小相关。
如何使用 CSS 输出？
将 CSS 变量复制到全局样式文件（例如 `app.css`）。然后使用 `font-size: var(--text-lg)` 调用它们。对于 Tailwind，将配置粘贴到 `tailwind.config.js` 的 `fontSize` 块中。