Typography Scale

A modular scale is a set of font sizes built using a mathematical ratio. The base size is multiplied by a factor for each successive level. For example, with a 16px base and a 1.25 ratio (Major Third): 16, 20, 25, 31.25px. This creates visual harmony and hierarchy.

For compact interfaces, try Minor Second (1.067) or Major Second (1.125). For content sites, try Minor Third (1.2) or Major Third (1.25). Perfect Fourth (1.333) and Golden Ratio (1.618) create strong contrast for headings. Choose based on content density.

Export the scale as CSS variables: --text-xs, --text-sm, --text-base, --text-lg, and so on. Use them in your styles: font-size: var(--text-lg). When you change the base size or ratio, all sizes update automatically through the cascade.

Yes. The generator exports a snippet for tailwind.config.js with a fontSize object. Copy it into theme.extend.fontSize—classes such as text-lg and text-xl will use values from your scale instead of the defaults.

Recommended. Large headings can take up too much space on mobile screens. Use a smaller scale factor or a base size for narrow screens with media queries. Fluid typography (clamp()) is an advanced way to scale smoothly without breakpoints.