Font Size Scale Generator

Create a harmonious type scale by selecting a base size and a ratio.

Generated Scale

Building a Harmonious User Interface: The Power of a Type Scale

A type scale is a system of font sizes that creates a visual hierarchy, ensuring a consistent and harmonious look across your entire website or application.


In design and typography, a **type scale** isn't just a random list of font sizes. It's a carefully crafted system that uses mathematical ratios to create a logical and aesthetically pleasing visual hierarchy. Without a type scale, a designer might end up with a dozen different font sizes, leading to a disorganized and inconsistent user interface.

By defining a base font size (often $16px$) and applying a specific ratio, you can generate a series of font sizes that are all related. This creates a natural rhythm and ensures that headings, subheadings, and body text are all in proportion to one another.

Common Ratios

This calculator uses several well-known typographic ratios, including:

  • **Golden Ratio ($1.618$):** A classic aesthetic choice found in art and nature, often resulting in elegant and well-balanced designs.
  • **Major Third ($1.25$):** Creates a strong, but not overwhelming, sense of hierarchy.
  • **Perfect Fourth ($1.333$):** A stable and dependable scale that is easy on the eyes.

Modern design systems like **Tailwind CSS** and **Material UI** also rely on predefined scales to ensure consistency. While their exact ratios may vary, they all follow the same principle of generating a coherent scale from a base value. Using a tool like this helps you understand those relationships and customize a scale to fit your project's unique needs, while staying within a proven system.

Explore More Helpful Tools