Don’t underestimate the importance of well-done typography in making a website appear more professional, polished, and just plain nicer. But in the world of responsive design, we need to have a few extra tricks up our sleeve for accomplishing gorgeous web type. Here are eight things you can do to improve typography in your responsive designs:

1. Use a modular scale

A modular scale is series of numbers calculated with a ratio. You choose an ideal text size (often 16 pixels for web) and then divide and multiply that number by a ratio multiple times to create the scale. Then, when you’re selecting font-sizes, line-heights, margins, and paddings for paragraphs, headings, lists, etc., limit yourself to values from the scale. You’ll find your typography has a more polished and professional feel than if you just eyeball the values. My favorite tool for calculating a modular scale quickly is ModularScale.com by Tim Brown. Read Tim’s A List Apart article or watch his Build Conference talk for in-depth instructions on how to create and use a modular scale.

2. Use a global reset

The modular scale is really nice, but it’s not going to do you much good if you’re fighting against the browser’s default styling of various HTML elements. To start off with a totally clean slate and gain full control over the elements on the page, use a global reset in your CSS. My favorite reset is Eric Meyer’s Reset CSS. I use it on nearly every website I work on. Just copy and paste that CSS snippet to the top of your CSS file, and you’re all set.

3. Choose an appropriate typeface

The typeface you choose for your text communicates a feeling more strongly more than nearly any other element in your design. Slow down, do some research, and find a typeface that’s appropriate for your content, your audience, and one that conveys the right emotional feel.

Additionally, if you’ll be using bold, italic or bold italic text, be sure to select a font that includes a true bold, a true italic, and a true bold italic. Otherwise, the browser will just do its best to emulate bold and italic text and the effect is often less than desirable. If you’re choosing a Google font or some other web font, check for the existence of a true bold and a true italic, and be sure to select and embed those styles on your page, too.

4. Work with flexible units

Rather than setting font-sizes, margin, and padding in pixels, choose a flexible unit, like ems or rems. Ems are relative to their parent while rems are relative only to the root element (HTML). Jonathan Snook’s got a very nice writeup on his blog explaining the differences in detail. In a nutshell, the advantage is that you can resize all the text in your document in one line of CSS while maintaining the size difference ratios between your headings and text. Here’s an example using ems:

As the screen gets wider, the base font-size for the document gets bumped up – and all the text in the document resizes along with it. You can accomplish the same thing with rem units. You can’t do this with pixels – you’d have to write a media query on every single element to adjust its size according to the width of the screen.

5. Set leading carefully

In web design, we usually refer to leading as line-height, as that’s the CSS property we use to set it. As with font-size, margin, and padding, you’ll want to select numbers from your modular scale for setting line-height. But there’s an important key: you don’t want to specify a unit of measurement with those numbers. Keep your line-heights flexible by using unitless numbers. This allows the line-height value to cascade down the DOM in a much more elegant and useful manner.

Also note that the amount of leading you need depends on a number of factors – some typefaces will be more readable with looser leading, while others have a nicer feel when it’s a bit tighter. Larger headlines almost demand a tighter leading than the leading set for the body text. And if you’re working with a reversed design – with light text on a dark background – it’s almost guaranteed that more leading will make your text a lot more readable. And the wider your column of text? The more leading you’ll need to make it easy for your reader’s eye to easily track to the beginning of the next line.

6. Control measure

On wider screens, unconstrained text very quickly gets to a really long measure that’s challenging to read. You’ll want to be sure to take steps in your design to control the length of each line of text. There are a number of techniques you can use to do so: set a max-width on your content to be sure it stops growing with the window width, add a column or columns to the side of the main content area when the screen gets wider, or even bump up the font-size a bit as the window gets wider. The ‘ideal’ number of characters per line varies, depending on typeface, leading, font-size, etc., but you want to try to get somewhere in the range of 35 to 70 characters per line. Any narrower and the text gets annoying to read as your eye spends more time jumping to new lines than cruising comfortably across. Any longer, and it’s difficult for your eye to keep track of which line is next.

7. Take advantage of new CSS psuedo-classes

CSS now provides us with the ability to select and style the first letter, the first line, and to select the first element of a given type. This allows us a lot of flexibility in designing gorgeous introductions to our text passages, while still being flexible and allowing our text to wrap, resize, and otherwise adjust to different screen sizes.

These styles for the first paragraph, first line, and first letter are this simple:

8. Get a little help from JavaScript

As flexible as CSS can be in responsive design, we can progressively enhance our pages and add a little extra punch with just a bit of JavaScript. And we have no shortage of scripts to take advantage of. Here are some of my favorites:

• FitText: Great for creating headlines that perfectly fill the screen width
• Lettering.js: Fine-tune kerning or apply styles to individual letters. Check out the gallery for ideas
• Responsive Measure: Automatically adjusts font size to create an ideal measure
• Molten Leading: Automatically adjust line-height depending on screen width
• SlabText: Creates big blocks of perfectly sized headlines

It just takes a bit of extra planning and forethought to accomplish beautiful web type and push your responsive designs over the edge from ‘nice’ to ‘wow’. Your readers will thank you, too, when your articles and content are just that much easier for them to enjoy.

Image credit: Taryn