The Typography Scale tool calculates a modular type scale from a base font size and a ratio. It lets you preview every step in the scale with live text, then copy the output as CSS custom properties or a Tailwind config object.
How to use #
- Open the etchKit panel and find Typography Scale in the library (it is under the Design category), or search for it by name.
- Click the card to open the tool inside the panel.
- Set your base font size (for example, 16px).
- Choose a ratio from the available presets. Common options include Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), and Augmented Fourth (1.414), among others.
- The tool generates all the scale steps in real time. Each step shows the calculated size and a live text preview so you can see how it looks.
- Copy the output in your preferred format: CSS custom properties or Tailwind config.
When to use it #
Setting up a new project’s type system is the main use case. Instead of guessing font sizes or copying values from another site, you pick a base and a ratio and get a mathematically consistent scale.
It is also useful when you want to test a different ratio on an existing project. You can compare how a 1.25 scale looks versus a 1.333 scale side by side in the tool before committing to changes in your code.
Output formats #
CSS custom properties gives you a set of --font-size-* variables ready to paste into your stylesheet or ACSS settings.
Tailwind config gives you a JavaScript object formatted for the fontSize key in your tailwind.config.js file.
Both outputs update in real time as you adjust the base size or ratio.
