Create a harmonious type scale by selecting a base size and a ratio.
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.
This calculator uses several well-known typographic ratios, including:
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.