Mastering Type Scale
In our previous post, we discussed that as a designer, selecting a suitable typeface is essential to creating a visually appealing and readable design.
However, choosing the right font size and hierarchy can be tricky. That’s where type scale comes in. Type scale is a system that helps you to organize and prioritize fonts in your design.
What is a Type Scale?
Type scale is a system that helps you to select the appropriate font sizes and styles for your design. It is a range of font sizes that are proportionally related to each other, creating a harmonious layout. Type scale allows you to create a consistent look and feel for their designs, making it easier for users to read and navigate through their content.
How to Use Type Scale in Your Design?
- Choose a base font size- The first step in using a type scale is to choose a base font size. A good starting point is 16 pixels, which is the default font size for most browsers. From this base size, you can determine the size of the other fonts in your design.
- Use a Type Scale Tool- There are many type-scale tools available online that can help you to create a harmonious and proportional layout. Some popular ones include Grid Lover, Modular Scale, and Type Scale Calculator. These tools allow you to easily select the appropriate font sizes for your design.
- Stick to Whole Numbers- When selecting font sizes, it’s important to stick to whole numbers, such as 18px, 20px, and 24px. Avoid using fractional sizes like 18.5px, as they can make your design look uneven and unbalanced.
- Be Mindful of Line Spacing- When selecting font sizes, it’s important to be mindful of line spacing. The spacing between lines can affect the readability of your text, so make sure to choose a spacing that complements your font size.
What about ems and rems?
Ems and rems are relative units of measurement in CSS, while px is an absolute unit of measurement. This means that ems and rems are dependent on other values in the design, while px is a fixed value that does not change.
One em is equal to the font size being used. So, if you set the font size to 16px, then 1em will be equal to 16px. If you set the font size to 20px, then 1em will be equal to 20px. This means that em units scale with the font size of the parent element, making it a flexible and responsive unit.
Rem (short for “root em”) is similar to em, but instead of scaling with the font size of the parent element, it scales with the font size of the root element, which is typically the element.
1rem = 16px, so you should use a font base size of 16px, such that the developers will be able to create a clean and organized PX to REM conversion.
Just because a browser is set to 16px by default, doesn’t mean any user can’t change their preferences to 24px or 32px to correct for low vision or poor visibility (e.x. screen glare). Users can alter this root font size via the browser setting. If you base your units on REM, any user with a higher font size will see a proportionally larger site.
Borders will be bigger, padding will be bigger, margins will be bigger, and everything will scale up fluidly.
Hence, when defining the type scale, it’s important to decide what will be the base font size for the desktop view and the mobile view and define your font hierarchy such that it becomes easy to manage them at a broad level.
Remember, great design is all about the details, and type scale is just one of the many tools at your disposal to take your designs to the next level. Happy designing!
