Content is loading…
Modular type scale (golden ratio, perfect fourth, etc.).
:root {
--fs-2: 0.640rem; /* 10.2px */
--fs-1: 0.800rem; /* 12.8px */
--fs-base: 1.000rem; /* 16.0px */
--fs-1: 1.250rem; /* 20.0px */
--fs-2: 1.563rem; /* 25.0px */
--fs-3: 1.953rem; /* 31.3px */
--fs-4: 2.441rem; /* 39.1px */
--fs-5: 3.052rem; /* 48.8px */
--fs-6: 3.815rem; /* 61.0px */
--fs-7: 4.768rem; /* 76.3px */
}// tailwind.config.ts (or .css `@theme`)
fontSize: {
'xs': '0.640rem',
'sm': '0.800rem',
'base': '1.000rem',
'lg': '1.250rem',
'xl': '1.563rem',
'2xl': '1.953rem',
'3xl': '2.441rem',
'4xl': '3.052rem',
'5xl': '3.815rem',
'6xl': '4.768rem',
}Create a modular type scale for your design system. Pick a base size, ratio (minor second through golden ratio), and number of steps. Live preview with each step labeled and px values. Copy as CSS custom properties or Tailwind theme.
The Typography Scale Generator provides a streamlined way to establish a modular type scale for design systems using standard ratios ranging from minor second to the golden ratio. Users can instantly visualize font sizes, copy pixel values, and export output directly as CSS custom properties or a Tailwind theme. Operating entirely online without requiring installation or account creation, it speeds up the design-to-code workflow.
Good to know: Projects requiring deep editorial typography planning with complex multi-axis responsive scaling behaviors or extensive print layout rules may need more advanced design system software.
Create a professional modular type scale for your design system by configuring base sizes and mathematical ratios.
Set your base font size
Enter the starting pixel value for your body text, typically 16px, to serve as the foundation of the scale.
Select a modular scale ratio
Choose a mathematical ratio such as the Golden Ratio or Perfect Fourth to determine the size increments between steps.
Define the number of scale steps
Adjust the number of steps above and below your base size to generate the full range of headings and small text.
Preview and verify the type scale
Review the live preview to see how each step looks and check the calculated pixel values for accuracy.
Export as CSS or Tailwind code
Copy the generated code as CSS custom properties or a Tailwind theme configuration to use in your project.
Estimated time: PT2M
Share this tool
Check WCAG AA/AAA color contrast ratios for accessible web design.
Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.
Visually build CSS gradients and copy the CSS output.
Remove whitespace and comments to minify CSS code.
Convert colors between HEX, RGB, and HSL formats.
Upload an image and get all favicon sizes + HTML link tags.
Generate custom placeholder images with any size, color, and text.
Visually create CSS box shadows with live preview and one-click copy.
Design custom CSS border radius shapes with live preview.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Draw a Secret Santa with exclusions and share a private reveal link for each person.
Make custom bingo cards from your own words — play, print, or share a link.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
Rank anything with quick 1-v-1 matchups → a full ordered list you can share.
Convert Markdown to a fully customized, RTL-ready PDF.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
