Generates a harmonious typographic scale based on a base font size and a ratio (minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, golden ratio 1.618, etc.). Shows each step in pixels, rems, and ems with a live preview. Outputs as CSS custom properties or Tailwind theme configuration.
Choose a base size and ratio to generate a complete typographic scale with copy-ready CSS. Pair with the Spacing Scale Generator for a complete design system foundation.
Perfect fourth
Input
Base: 16px, Ratio: 1.333
Output
xs: 9px | sm: 12px | base: 16px | lg: 21px | xl: 28px | 2xl: 37px
Generate a consistent spacing scale for your design system.
Generate harmonious colour palettes from a base colour.
Generate linear, radial, and conic CSS gradients with live preview.
Count characters for page titles, meta descriptions, and social posts with visual limits.
Create CSS box shadows with live preview and code output.
Generate CSS border-radius values visually.
:root {
--text-xs: 0.563rem;
--text-sm: 0.750rem;
--text-base: 1.000rem;
--text-lg: 1.333rem;
--text-xl: 1.777rem;
--text-2xl: 2.369rem;
--text-3xl: 3.157rem;
--text-4xl: 4.209rem;
}