Typography Scale Generator
Generate a modular type scale with ratios from Minor Second (1.067) to Golden Ratio (1.618). Outputs CSS custom properties in px or rem.
How to Use Typography Scale Generator
The Typography Scale Generator creates harmonious font size systems based on mathematical ratios. Choose a base font size (default 16px), select a scale ratio from Minor Second (1.067) to Golden Ratio (1.618), and specify how many steps to generate. The tool produces a complete type scale with sizes in px or rem, visual previews of each size, and ready-to-use CSS custom properties. Popular ratios include Major Third (1.25) for body text, Perfect Fourth (1.333) for editorial, and Golden Ratio (1.618) for dramatic headlines. Essential for designers and developers establishing consistent typography systems for websites and applications.
Step-by-Step Instructions
- Set the base font size in pixels (default 16)
- Select a scale ratio from the presets
- Choose the number of steps and output unit (px or rem)
- Click Generate Scale and copy the CSS custom properties
Related Tools
Color Picker
Pick colors and get HEX, RGB, and HSL values simultaneously.
Gradient Generator
Create CSS linear and radial gradients with live preview.
Palette Generator
Generate 5 complementary colors from any base color.
Image to Base64 Converter
Convert PNG, JPEG, GIF, WEBP, and SVG images to Base64 strings.