VBlog

I recently watched Aquent’s Responsive Web Design course, and  one part especially catched my attention: Web Typography. This topic has always been confusing for me, and at the end of this course I finally have some ground rules for building a responsive and scalable typography for any website, which I’m sharing with you today.

1. Starting from a clean slate

The first thing to do, and I bet you already do it on your projects, is to reset your styles so you can start building a typography that will render the same on every browser and device.

Including normalize.css stylesheet in your page will do the trick, in association with this CSS code :

html {
    font-size: 100%;
    line-height: 1;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Font-size: 100%
All browsers agreed that 100% = 16px
More info: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Line-height: 1
Unitless value. 1 = 16px
More info: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
About Unitless: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Text-ajust-size: 100%
Mobile browsers attempt to adjust text size to be nice to users. This code disables that auto scale feature.
More info : https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust

2. Converting Pixels to Ems

This part is tricky. I had to replay Aquent’s course 3 times to fully understand it. It’s actually quite trivial if you know how to tackle the issue. The important thing is to start with the paragraphs (<p>) typography, to extend it to other components like headings.

It all starts with this simple formula:

EM = Target font size in PX / Default line height (16px)

So for example, if my paragraph font-size is 17px, then I should use 17px / 16px = 1.063em. Same goes for the line-height.

font-size: 17px /* 17px / 16px = 1.063 */
font-height: 20px /* 20px / 16px = 1.25 */

Let’s now style our headings. Here are our rules:

Font Size:
H1 = 3 x Paragraph Size
H2 = 2 x Paragraph Size

Line-height:
Should stay the same as for paragraphs.

So if my paragraphs font-size is 1.063em (17px), then here goes the styles for my headings:

h1 {
    font-size: 3.189em; /* 1.063 x 3 */
    line-height: 1.25;
}
h2 {
    font-size: 2.126em; /* 1.063 x 2 */
    line-height: 1.25;
}

3. Typographic Scale & Vertical Rhythm

This method will allow us to determine the font-size of any component on our page and maintain some vertical rhythm (finding the ideal combination of font-size and line-height for all the text on a page).

All of it is based on magic numbers:

Scale = Paragraph font-size x Paragraph line-height

Scale: 1.063 x 1.25 = 1.3 (rounded)
3/4 Scale = 0.975
1/2 Scale = 0.65
1/4 Scale = 0.325

We can use these to determine spacing on our page.

For example, let’s say we need to add margin around our <blockquote> element. To determine this margin, we used to try 10px, then 20px, and chose the spacing that seemed to fit the best. Now, we can use our scale.

Always start with 1 scale (1.3em). If margin: 1.3em doesn’t seem enough, then add 1/2 scale to it, so 1.3 + 0.65 = 1.95em. It’s still up to us to use the correct spacing, but at least we guarantee vertical rhythm on our page.

The same methodology is relevant for any CSS property, from width and height to box-shadow.