Responsive Typography

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.