Do I need to follow scale while defining typography in design system?

Question

I'm confused if I should use scale or not while defining our typography. While using it I'm not able to use 14px and 16px at the same time plus it's giving font sizes like '16.80'(just an example) and so on. I want to use them after rounding off, but i do not know if it's a good practice. Please let me know what can I do? And should I use a scale?

Answer 1

Yes, you should use a scaling system.

It's the first time I've come across the measures in your example being used for typography (with the exception of the Golden Ratio), but employing a scaling system is an excellent practice for two reasons:

1. The Typography Appears More Consistent: This makes it more aesthetically pleasing to the eye.
2. It Simplifies the Coding Process: Utilizing a scale helps maintain order and reduces complexity in development.

Now, as I mentioned, I'm not familiar with the specific examples you provided, so I can't comment extensively on them. However, they seem quite complex (and perhaps unnecessarily so). For instance, the only measure among those you listed that I recognize is the Golden Ratio, and I've never seen it applied in user interfaces throughout my nearly 30 years of experience (although using Fibonacci you can get to an approximation to it). I've never heard of the others.

That said, this doesn't mean you shouldn't use a scale! There are more common scales in UI design, such as the 8pt grid system. It essentially uses multiples of 8 for everything, from structure to fonts and spacing. Specifically, concerning fonts, you can define the base font at 8 (personally, I use 16, but the principle is the same).

For example, when defining the headings and paragraphs of a user interface, you could do this:

paragraph: 16px
h1: 72px
h2: 48px
h3: 32px
h4: 24px
h5: 16px

And in code, you can translate this to rem:

p: 2rem
h1: 9rem
h2: 6rem
h3: 4rem
h4: 3rem
h5: 2rem

As you can see, this approach is simple and easy to use: just divide the pixel value of the element by 8. But there's more: I also utilized another proportion in this system - the Fibonacci sequence. By setting the paragraph (which serves as the base) to 2rem, I was able to employ the Fibonacci sequence to derive the measurements for all the other headings: 0, 1, 1, 2, 3.

In summary: yes, definitely use a scaling system.

But I'd advice to consider something less complicated. You might find it beneficial to study the design systems of large companies to gain a better understanding.

Answer 2

In addition to Devin's answer, I'd like to address the "musical scales".

The interval ratios given aren't actually used in music anymore by and large. While 1.2 (or 6:5) is a just minor third, music tends to use equal temperament these days, which instead ends up at 2^(1/4), or 1.189, and in other systems it may have other values still. Which is to say, even in music there's no punishment to slightly tweaking exact fractions to make them easier to work with, and likewise: It's absolutely fine to round things if you're uncomfortable with fractional font sizes.

There's no penalty in usability for doing things either way; we're talking barely visible differences in either case.

---

Additionally, you don't have to use all steps in the sequence. In Devin's example, the scale skips certain steps (following the fibonacci sequence), but you can have other rules as well. The LGC typographic scale calculator has some more parameters to play around with, but note that not all rules are guaranteed to give you a visually pleasing result. For example, a "classical ratio ditonic scale composed of triangular numbers" sounds great but ends you up at a H4=H3=24pt, H2=68pt, H1=1536pt, which is extremely impractical.