Speed Curve Smashing Magazine Report

RWD Podcast Episode 10: Responsive Typography

  • Episode

    RWD Podcast Episode 10: Responsive Typography

  • Length



This week we take a look at responsive typography, setting your type in EM's and making it modular and scalable across multiple breakpoints.

Download MP3 Subscribe on iTunes

Listen to episode

Today I shot out a request for what people wanted me to cover this week and there were some great suggestions.

  • Typography in more depth
  • CSS Image building in html emails
  • Google Glass and Smart Watches

I chose typography. Why you might as?

Fundamentally the web is about information. Although a picture tells 1000 words, the fact is the 1000 words is going to tell a better story in our lives.

Typographic Scale & Ratio

TypeSetting Modular Type

Back in 2011 Tim Brown wrote an article for 

more meaningful typograhpy — Tim Brown

Modular Scale — Tim Brown

Font Size – Important size (image), but it could be the size of the heading text when you think it’s just right.

It’s all about the EMs

Set your body font to 16px, font-sizes to EMs.

One EM is equal to your base font size.

Because you’ve created a modular scale, like vectors, it will grow.

If everything is based on Ems, you only need to update your font size in a media query and the remaining font-sizes for all of your elements will scale perfectly.

If you’re setting EM for padding or margins of layout remember this will change too.

14px – 16px for mobile

16px for tablet/desktop

18px for larger screens (because you could be further away from a larger screen)

It depends on your content.


Typography Performance

Typography, watch for performance if you’re using custom fonts too.

Speed Curve Smashing Magazine Report
SpeedCurve Smashing Magazine Report showing that images and font files make up 90% of the page weight.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.