Create a harmonious modular font scale, see it working on real content and copy responsive CSS tokens in seconds.
A thoughtful scale turns separate font sizes into one clear visual voice.
Good typography guides attention before a reader notices it. Start with comfortable body text, introduce contrast with a consistent ratio, and let every heading earn its place in the hierarchy.
Explore the scaleUse a mathematical starting point, then judge the result with your eyes. Every scale remains editable, responsive and ready for real product work.
Build related text sizes from one base value and a deliberate modular ratio.
Preview mobile and desktop sizes, then export smooth fluid typography with CSS clamp.
Copy named CSS custom properties or a Tailwind theme extension without manual calculations.
Start with 16px for most websites, or use 17-18px when reading comfort is the priority.
Use Minor Third for a compact interface, Major Third for a versatile website, or a larger ratio for expressive headings.
Drag the viewport control and switch preview fonts to see how your scale behaves on realistic content.
Export static or fluid CSS variables, or copy the same sizes into your Tailwind configuration.
Optical size changes between typefaces. Test your scale with the actual font, content and layout, then adjust any step that feels crowded or overly dramatic.
A modular typography scale is a sequence of font sizes connected by a ratio. With a 16px base and a 1.25 Major Third ratio, each step is 1.25 times the previous one: 16px, 20px, 25px, 31.25px and so on. The result gives body text, labels and headings a shared visual rhythm.
Smaller ratios create subtle changes and more usable intermediate sizes. They work well in dashboards, dense interfaces and mobile layouts. Larger ratios produce stronger contrast, making them useful for editorial pages, marketing sites and display-heavy designs. This online typography scale calculator lets you compare those personalities before you commit.
Fluid typography grows gradually between a minimum and maximum viewport instead of jumping at a breakpoint. CSS clamp() keeps each font size within safe limits while the middle value responds to screen width. Enable Fluid type to generate accessible, copy-ready values for every step in your scale.
It is a set of related font sizes built from a base size and a consistent ratio. A scale helps create clear hierarchy across headings, body text, labels and captions.
Minor Third (1.2) is compact and flexible. Major Third (1.25) is a versatile default. Perfect Fourth (1.333) and larger ratios create a more dramatic hierarchy with fewer intermediate sizes.
Yes. A 16px body size is a dependable starting point for websites. Depending on the font and audience, 17px or 18px can improve comfort for long-form reading.
Use clamp() with a readable minimum, a fluid viewport value and a controlled maximum. This tool calculates those responsive values automatically when Fluid type is enabled.
Yes. It is free, requires no account and generates the scale locally in your browser.
Keep refining your visual system with these free online design tools.