Scalability

The scalability of typography sizes is key to maintaining a consistent visual experience across the entire interface. There are various methods and formulas for achieving proper scalability, but in Quantum Design, we rely on two fundamental principles: Base and Scale.

Base

The base is the smallest size we estimate to use in the interface. In Quantum, we define one base size for headings and another for body text.

Scale

To achieve scalability, we use three universal rules in typographic scaling: High Contrast, Medium Contrast, and Low Contrast. Each of these rules creates a contrast between text sizes, depending on the purpose and specific needs of the interface size.

• High Contrast (1.41) Useful for large screen devices, providing a clear distinction between text sizes for better readability in expansive layouts.

• Medium Contrast (1.22) Creates a contrast between text sizes that's not too drastic, allowing for a harmonious fit in interfaces with more content.

• Low Contrast (1.12) Ideal for versatile designs like dashboards and mobile apps, as it allows the content to remain flexible and adaptable to different screen sizes.

---

Scale sizes

The first thing you need to do is select a base size, both for body text and headings. Then, choose the type of contrast you want to use. As you can see, each contrast has an assigned number. Next, multiply the base size by the contrast number, and the result should be multiplied by the contrast number again. Repeat this process successively until you reach the desired number of sizes.

Example: let's choose 14px as the base for headings and Medium Contrast (1.22) as the scaling system.

(14 x 1.22) = 17
(17 x 1.22) = 20,7
(20,7 x 1.22) = 25,2
(25,2 x 1.22) = 30,7
(30,7 x 1.22) = 37,4

Here we can define that 14 will be the smallest heading size, and 37.4 will be the largest. You can also round the numbers to have only two or three digits.

---

Scale line-heigt

The line-height is responsible for providing consistency to the size of each typography. For this, we use a scalable system that adds points based on the text size, starting with 4 points and adding 2 additional points for each size increase.

Example: Following the previous exercise, the smallest size is 14px. We add 4 points to this, resulting in a line-height of 18px. For the next size, which is 17px, the line-height won't be 4 points; instead, we'll add 2 more points, i.e., 6 points. Therefore, the line-height for this size will be 23px. And so on with each size.

(14 + 4) = 18
(17 + 6) = 23
(21 + 8) = 29
(25 + 10) = 35
(31 + 12) = 43
(37 + 14) = 51

Here we can define that 14 will be the smallest title size and 45.6 will be the largest. You can also round it to have only a two or three-digit number.