Content is loading…
Share
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.
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.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
Load and compare multiple URLs side by side in resizable iframes.
Convert Markdown to a fully customized, RTL-ready PDF.
Play local or online videos with HLS stream support, subtitles, playlist, and bookmarks.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Convert Markdown to a formatted Word .docx — live preview, RTL, tables, page setup, all client-side.
Buy social media marketing services — followers, likes, views and more.
