Typography Scaling From the Design Perspective
- What is a modular scale?
- How do I use it?
- Sketch setup.
What is modular scale?
Have you heard about the so-called golden ratio or golden mean? In ancient Greek philosophy, it was also known as the golden middle and was representing the desirable middle between two extremes.
Several meaningful ratios have been rooted in geometry, music, history, and nature through time. One such ratio is the famous proportion of 1:1.618.
If put into a sequence of numbers, ratios can form a modular scale. So, basically, a modular scale is a series of numbers that are harmoniously proportional to each other.
Using a modular scale on the web means choosing numbers from the scale for font sizes, line height, line length, margins, column widths, and more. Thus, modular scales are most effective when the inputs are relevant for the given project’s design and messaging.
This is best described visually:
The typography scale is a great component in a design system especially in terms of creating a harmonious and lean design. You can use a modular scale calculator to decide your desired ratios and create a modular scale for your project.
The reasons for using a modular scale are different:
- It gives a harmonic view to the typography I’m using
- It works great in responsive design
- It makes me choose specific font sizes which helps avoid overlapping design (since designers love using a lot of font sizes)
How do I use it?
Personally, I start with choosing the base font size which I consider best for a paragraph (this might vary from project to project). So, for example, it’s 16px. In a modular scale, I set it for {base font size}. Then I choose the ratio, for example, {major third 4:5(1,25)}. I choose exactly this ratio cause it creates the best combination of font sizes that satisfies me. But you can choose whatever you want and whatever fits your project. It can be project-specific so for example if you are designing a news website you can use the {perfect fifth 3:2 (1,5)} for using big fonts on your website. As a result, you calculate the typography scale based on the modular scale. So with this, you can see that your H1 is 48.828px or 3.052em, H2 is 39.063px or 2.441em etc.
Next, I choose the base font size for mobile. This way I am basically scaling down the font size for the mobile view. For example it’s 14px. In the modular scale calculator, you should add one more column for mobile and then choose the same ratio as you had for the desktop view. So, as a result, I get 42.725px as H1. So if on the desktop, I use 48pt as H1, then on mobile it will scale automatically to 42pt.
This is great since your design will be consistent and easy to automate.
You can also add one more column for tablet view and choose another base font size for it. But I think that having 2 columns is enough for responsive typography.
Note*
Make sure not to miss any item from the grid so if your base font size is 16px and the ratio is 1,25, H1 cannot be some size other than 48.828px. Each new heading should be bigger than the previous one by exactly the same ratio.
But also note that actually, I can use only 2 or 3 sizes in my design, for example, H1, H5, and paragraph. But I should have all these sizes set in advance.
So, in my design system file, the typography page will look like this. You can download the Sketch file from here.
How to set up this system in a Sketch file?
You most probably know how to create a text style in Sketch. If not, you can check this Sketch tutorial.
So I set text styles for all of my font sizes:
For desktop view
H1 , H2 , H3 , H4 , H5 , Paragraph(P), Paragraph small (PS) and Paragraph tiny (PT)
For mobile view
H1 , H2 , H3 , H4 , H5 , Paragraph(P), Paragraph small (PS) and Paragraph tiny (PT)
I’m grouping them so that it will be easy for me not to confuse styles.
So in Sketch, you will see this:
What are the perks here?
When creating a design, you don’t have to remember all the font sizes that you should use. You can just select which kind of text it is: H1, H2, or paragraph?
And the same for responsiveness: you will see that there is set H1 and you should just change it to mobile H1. This way, everything in typography will be consistent in your file.
However, Sketch has some issues related to text styles. But I think that those issues will be fixed in the nearest future :)
At SFL, we are implementing typography scaling in our projects and it’s just awesome to have a clear and consistent design.
About the author: Tatev Mayilyan is a UI/UX designer at SFL. She is passionate about designing products that people love and coming up with solutions that help make our lives easier.
Check out our open roles at https://sflpro.com/job/.
Read More:
