Build a harmonious CSS type scale — choose your base font size, modular ratio and font family to generate a complete typographic hierarchy. Copy the CSS custom properties instantly.
A modular type scale multiplies a base font size by a fixed ratio to produce each step. Common ratios include Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333) and Golden Ratio (1.618) — larger ratios create more dramatic hierarchy, smaller ones feel subtle and refined. Defining your scale as CSS custom properties (e.g. --text-lg: 1.25rem) centralizes typographic decisions and makes scaling for different viewports straightforward. A consistent scale ensures that heading sizes always feel proportionally related, which is one of the fastest ways to make a design feel more intentional and polished.