Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Responsive Typography

Responsive web design is a methodology to create websites that scales and adapts depending on the size of the screen and capabilities of the device on which the website is being viewed. For example, content and images scale to best fit the screen, navigation pattern changes according to the capabilities of the device. Therefore, it is crucial for typography to adopt the responsive nature of the design to make the content legible and appealing on all devices.

As designers, there are a few things we can do to help developers craft a consistent and optimized experience for users on different devices.

Select The Right Typeface

The first step is to select the right typeface for your design, which we have covered in a previous lesson.

Once you have chosen your typeface, you have to develop a responsive typography scale.

Selecting A Typography Scale For Your Website

Depending on the type of website you are designing for, typography needs to have larger or smaller contrast to accommodate for the need of content.

For example, if you are designing a marketing homepage, a product page or ecommerce website, your typography contrast needs to be bigger because these websites tends to rely more on photography, video and illustrations. Typography contrast has to be bigger in order to establish great visual hierarchy. It’s also due to the fact that there is more space to work with given the brevity of text.

If you are designing for a dashboard, the typography contrast ratio doesn’t need to be as big because a lot of information needs to appear in one screen at the same time.

If you are designing for a news website or a blog, the contrast ratio can be somewhere in the middle.

You can use your own visual judgment to decide what size each level of typography can be. For example, you can say that for your project in desktop view, it looks best when the Heading Level 1, which is the largest heading, is at 60px; Heading Level 2 is at 40px while body text is at 20px.

It doesn’t have to follow a fixed ratio if you are using custom visual judgement.

But if you’d rather follow a more predictable scale and have everything automated, you can use typography scale websites like type-scale.com. Websites like this provides a playground for designers to experiment with typography at different ratios and pick the one that fits their project the most. You can start off with a scale preset and customize the levels based on the need of your project.

Once you establish a typography contrast scale for one screen size, you can extrapolate it to other screen sizes.

You can change the base font size for multiple breakpoints and use the same scaling ratio or you can use the same base font size and change the scaling ratio for multiple breakpoints.

Responsive Typography Units

Dealing with type on the web can be a challenge, especially when you have to account for the ever-changing range of screen sizes. Ultimately the font size(s) you use for headings, body copy, and whatever else directly effects the layout of you page, and when you’re dealing with dozens, or even hundreds of pages with differing content, you need a flexible way to control type, while also keeping everything consistent.

In design programs, we usually use points or pixels to quantify the size of fonts.

So what is the difference between points and pixels?

A pixel (px) at 96DPI (dots per inch) is equal to 0.2645835‬ millimeters, 0.010416675‬ inches, or 0.75 point. It is a measurement of how tall a font is in pixels which are visible on your computer screen. So, if a font is 12 pixels in height, that means it takes up 12 pixels on your screen from the top of the letter, to the bottom, which also includes the characters that have sections which are under the guide line, such as a “p” character.

A point (pt) is equal to 0.352778 millimeters, 0.0138889 inches, or 1.333 pixels. Because millimeters and inches are measurements of physical items, they are not ideal to use with computer or mobile based applications because they don’t always represent the correct size because of differences in screen resolution. The point is a unit of length and is mostly used when you want to measure the height of a font.

Pixels are great for digital design while points are great for print design.

However, both of them have a problem for responsive design. They don’t automatically scale according to screen size changes. It is possible to use pixels as typography unit with multiple media queries in CSS codes, but it is not as native and convenient.

That’s why in web design, we now have modular scales, such as rem and em to help with this.

What’s the difference between em and rem?

Both rem and em are scalable units of size, but with em, the unit is relative to the font size of its parent element, while rem unit is only relative to root font size of the HTML document.

Ems and rems do not have fixed sizes. They are scalable, and for that reason ems are good for mobile and web development.

The best parts about the rem unit is that it allows you to quickly scale an entire project, across resolutions, just by setting the root font-size once per media query, and then scaling from there.

However, rem does restrict our control of individual elements. For example, the above headings look great on larger screens, but once you drop down to mobile the headers are a bit too large.

There’s a few ways to solve this, including using rem for global elements and em for local elements.

There isn’t an industry standard way of handling responsive typography yet, with some preferring to use em, some rem, and others a combination of the two. There’s even a growing group of designers and developers that say to never use pixels for font sizes because it doesn’t allow the user to increase or decrease font size in their browser settings. For now, it’s best to use the method that makes sense for the project you’re working on and the audience that it’s for.

Scroll to Top