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? enter image description here

  • Is there a reason why you're using music scales for typography?
    – Devin
    Aug 21 at 17:51
  • 1
    @Devin these are type scale. It's my first time creating a TYPOGRAPHY and i've been told in many articles to take reference from these sites for the responsive type scales. type-scale.com or modularscale.com
    – Kritarth
    Aug 21 at 18:59
  • never knew about that, in music those are music intervals so it got me confused, thank you for teh clarification and a new learning
    – Devin
    Aug 21 at 19:03
  • One thing to keep in mind is that strictly adhering to a scale might make your smallest type too small - you'd still want to do at least 13px on mobile, for example. And that doesn't mean your base should be larger than 16px. But in general, using a type scale produces good results, for the reasons @Devin mentions below.
    – Izquierdo
    Aug 21 at 19:59

2 Answers 2


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.

  • I tried using the scale, but it's giving me results like "13px, 25px, 31px,39px". I instead want to use numbers like"14,24,32,40" but I can't get these by using scale. Also, thanks for the link, I think I might go with the 8pt grid system. Also do let me know if there's any other way for me to scale these fonts.
    – Kritarth
    Aug 22 at 11:54
  • sorry, not sure what you mean. What I gave you is the 8pt grid, it's impossible it gives you odd numbers
    – Devin
    Aug 22 at 14:42

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.