Typography is the cornerstone of the web making up approximately 95% of all things web.
The EM's have it
The easiest and most common way to ensure that you maintain Responsive Typography is through the use of EM's. Em's come from an old print measure and the name was originally just "M" being the widest possible letter and therefore what the type was measured from.
On the web the use of EM's in typography (and also element widths and media queries) are based upon the root pixel value. This is done by setting the html or body tag to font-size: 16px; which aligns with what most (all) browsers set as the default font size.
This means that 1em
= 16px
, 5em
= 80px
, 37.5em
= 600px
, 60em = 960px
etc etc. Some people, however, prefer to work a little too closely to the base 10 decimal system and will set the base font size to accommodate this. For example if you set the base font size like so html { font-size: 62.5%;}
then our ems would look more like this 1em
= 10px
, 5em
= 50px
, 37.5em
= 375px
, 60em
= 600px
. This was originally done with the idea that people could associate an EM value of 1.6em
with the corresponding pixel value font size of with 16px
.
This is a bad idea... for two reasons.
First of all you're changing the standard font size for browsers and reducing it by 37.5% after the browser folk spent oh so long working out what the perfect standard font size was..... oh won't someone think of the browser folk. You are taking what your users are expecting as a norm and reducing it significantly, and to then bring that back up you need to adjust your CSS to make everything a regular size again. Personally I think the p element makes more sense to be 1em than 1.6em.
Secondly, we've moved away from using pixels to set fonts (and in some cases on media queries and container widths), so why on Earth would we then look to mimic the old measurement. You should be building your websites from the content out, meaning that you start with a perfect paragraph and work outwards. This allows for your p tags to be 1em, and everything else is relative to that size, providing you with a beautiful scaling typographic scale (tools such as xyz and xyz will help with your typographic scale). When the user decides to increase the text size in the browser, or if you need to change the font size when moving across media queries, we only need to change the base font size and watch everything scale accordingly.
Margins & Padding
There is still a strong desire for designers to still use pixels in some shape or form, but in a truly responsive design this comes as a detriment to the layout. When you set your margins and padding around your typographic elements (p, blockquote, h1-h6, li etc) be sure to keep them as EM measurements... and don't forget to maintain the same rules when it comes to line-height.
Before you leave
I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?
We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 97,590 subscribers and an almost 50% weekly open rate later, it looks like we did it.
Delivered to 97,590 developers every Monday

Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.

Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.

John Hawley
@johnhawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!

Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.

Muhammad
@mhashim6_
Literally the only newsletter I’m waiting for every week.

Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.

Mitchell Wright
@mitchellbwright
I know I've said it before, but @tylermcginnis doesn't miss with the Bytes email. If you're a developer, you really need to subscribe

Ali Spittel
@aspittel
Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.

Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.