🎨
design
Color Wheel Interactive
Pick colors from an interactive wheel and explore complementary, analogous, triadic, and split-complementary harmonies.
color wheel
Use Tool → 🔤
design
Typography Scale
Calculate harmonious font size scales. Choose ratios like Golden Ratio, Perfect Fourth, or Major Third. Export CSS custom properties.
typography scaletype scalefont size calculatormodular scaletypography calculator
Base size defines body. Each heading scales up from that base; small scales down by the same ratio.
Base
16px
Ratio
1.125
Largest
32.42px
Scale preview
h1 → smallCSS custom properties
How to use
How to Use the Typography Scale
- 1 Set a base font size (typically 16px) and choose a scale ratio.
- 2 View the calculated sizes from h1 down to small text, each step multiplied by your ratio.
- 3 Preview with sample text and copy CSS custom properties for your stylesheet.
A typographic scale creates visual harmony by using mathematically related font sizes. Popular ratios include the Golden Ratio (1.618), Perfect Fourth (1.333), and Major Third (1.250).
Using a consistent type scale throughout your project creates professional, cohesive typography. The generated CSS custom properties make it easy to implement and maintain.
More Design tools
Related tools
You might also like
🎮
design
Pixel Art Maker
Create pixel art with a grid-based drawing canvas. Features draw, erase, and fill tools, 10-color palette, mirror mode, and PNG export at multiple scales.
pixel art
Use Tool → 🎨
design
Color Palette from Image
Extract a color palette from any uploaded image using K-means clustering. Get dominant colors as HEX and RGB values with CSS variable code ready to copy.
color palette from image
Use Tool → 📊
converter
JSON to CSV Converter
Convert JSON arrays to CSV and CSV to JSON instantly in your browser. Download CSV files with one click.
json to csv
Use Tool →