Loading…
Loading…
A type scale (or modular type scale) is a sequence of font sizes derived from a consistent mathematical ratio. Rather than picking arbitrary pixel values, a type scale multiplies a base size by a ratio to generate each step. This concept, popularized by Robert Bringhurst and applied to web by Tim Brown, creates proportional relationships between text sizes that feel naturally harmonious—similar to musical intervals. Common ratios include the major second (1.125), major third (1.25), perfect fourth (1.333), and golden ratio (1.618).
stellae.design
A type scale is a predefined set of font sizes based on a consistent ratio that establishes clear visual hierarchy and vertical rhythm across an interface. Without a scale, teams accumulate arbitrary font sizes that create visual noise, inconsistent hierarchy, and maintenance overhead. A well-defined type scale makes design decisions faster, ensures cross-screen consistency, and produces interfaces that feel cohesive and professional.
A product team establishes a base size of 16px with a 1.25 ratio, producing a scale of 12.8, 16, 20, 25, 31.25, and 39px which they round to clean values and assign semantic names. Every text element in the design system maps to one of these steps, and designers never specify arbitrary font sizes. The result is a consistent visual rhythm that holds across dozens of features built by different team members.
A developer implements headings using `clamp(1.5rem, 1rem + 2vw, 2.5rem)` so the size scales fluidly between a minimum on small screens and a maximum on large screens. Each step in the scale has a corresponding clamp declaration that maintains the proportional relationship at every viewport width. The approach eliminates the need for discrete breakpoint overrides and produces a smooth reading experience across devices.
A codebase contains 23 distinct font-size declarations ranging from 10px to 42px with no discernible pattern or naming convention. Developers copy-paste pixel values from design files without referencing a shared scale, and designers introduce new sizes whenever existing ones do not feel quite right. The result is an interface where visual hierarchy is inconsistent, maintenance is expensive, and global typographic changes require modifying dozens of files.
• A frequent mistake is choosing a scale ratio that is too dramatic for the content type, such as using a 1.5 ratio for a data-dense dashboard where the large jumps between sizes waste space and reduce information density. Another error is defining the scale in pixels without providing relative alternatives, which breaks when users adjust their browser's default font size. Teams also often neglect to adjust the scale or base size for mobile viewports, resulting in headings that are disproportionately large on small screens.
Was this article helpful?