Scala Font Generator
Generate typographic scales H1-H6 with mathematical ratios. Export CSS variables, Tailwind configuration and CSS in JS.
:root {
--text-h1: 4.209rem;
--text-h2: 3.158rem;
--text-h3: 2.369rem;
--text-h4: 1.777rem;
--text-h5: 1.333rem;
--text-h6: 1rem;
}Come utilizzare Generatore Scala Tipografica
Base and root font size
Specify the base width in pixels (typically text body, e.g., 16px) and the root document font size (usually 16px, used for conversion to rem).
Choose a mathematical relationship
Select the ratio between levels H1-H6: from Minor Second (1.067, compact scale) to Golden Ratio (1.618, strongly marked scale).
Check the preview
Each level from H1 to H6 is shown with pixel and rem dimensions and a sample text, so you can visually evaluate the contrast between levels before exporting.
Export in desired format
Choose between CSS variables, Tailwind config or JavaScript/CSS-in-JS and copy the generated code with a single click.
Suggerimenti
- Be concise — keep similar length. Use a minimum font size of 16px, as recommended by accessibility guidelines for body text.
- If the generated scale seems too extreme between h1 and h6, try a smaller ratio instead of manually adjusting individual values: it maintains mathematical coherence.
- CSS variables can be overridden for different breakpoints (e.g., via media query) to adapt typographic scaling for mobile and desktop.
Domande frequenti
How does modular typography scale work?
Part of the base size (e.g., body text) and is multiplied repeatedly by a fixed ratio to generate higher level headings (h5, h4, h3, h2, h1). Each level is multiplied by the ratio from the previous one, resulting in an harmonic progression instead of randomly chosen sizes.
What ratio should I choose?
Minor second to minor second (1.067, 1.125) for sober interfaces or technical documentation. Major second to major second (1.333, 1.618) for strong title contrast on landing pages and editorials.
Why is the tool converting pixels to rems?
Use em units instead of px for typography to make scaling relative to the root document's font size, respecting the user's browser accessibility settings (zoom, system font) over fixed absolute dimensions.
What's the difference between the three export formats?
CSS Vars generates a block ":root" with custom properties ready to be included in a global stylesheet. Tailwind creates the section "fontSize" to paste into "theme.extend" of the configuration file. JS Object generates an exportable constant to use in CSS-in-JS or design token TypeScript.
Can I use this scale for body text or just headings?
The generated hierarchy covers levels h1-h6, designed for titles. Body text typically remains at the base level you set (or slightly lower), while generated levels should be applied to titles and subtitles to create a coherent visual hierarchy.