Geek✭Girl Life

A blog by Natalie MacLees

I don't mind living in a man's world as long as I can be a woman in it. - Marilyn Monroe

Eight tips for improving responsive typography

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 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.

Alice’s Adventures in Wonderland

CHAPTER I. Down the Rabbit-Hole

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, ‘and what is the use of a book,’ thought Alice ‘without pictures or conversations?’

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, ‘Oh dear! Oh dear! I shall be late!’ (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually …

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:

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.

Animate text over images on hover without JavaScript

A couple of months ago, I published a tutorial showing how to show text over images on hover without using JavaScript. When I presented to an HTML5 Meetup Group a couple of weeks ago, I took that idea and ran with it, adding some extra special animations, and I’ll show you how to do it… read more»

How to Create an Alphabetical Index of Posts in WordPress

About a year ago, I was handed a design comp from a designer that required me to build out an alphabetical index for a custom post type in WordPress. You know, something like this: …where clicking on one of those letters would take you to a page showing only posts with titles starting with that… read more»

Should everyone learn to code?

You keep using that word… We hear about this a lot. Learning to ‘code’. But what are we talking about when we’re talking about coding? Because that’s not just one thing. There are any number of different languages you could learn – HTML, JavaScript, Python, Java, Objective C, Basic, PHP and on and on and… read more»

Radical Inclusion

At WordCamp Las Vegas 2011, I gave my first ever WordCamp talk. My topic was Progressively Enhancing Your WordPress Theme. I chose that as my topic because I believed then, as I believe now, that progressive enhancement is nearly always the best way to build a website or web application. Focus on getting the content… read more»

The ‘Best’ WordPress theme is…

In case you didn’t know, I’m a regular over on the WordPress forums on LinkedIn. I like helping people out with their WordPress puzzles and conundrums. Without a doubt, the most popular question people ask is some variation on “What’s the best WordPress theme?” For example, looking through page one of the forums today, I… read more»

Once-a-day email

I only check my email once a day. On weekdays. I don’t read emails on weekends. I don’t have push notifications for new emails set up on my phone. I start my workday by opening up my inbox. I work through everything in there. If it will take less than a few minutes, I do… read more»

I know I can, no matter what you say

I was half-way through 8th grade. At the half-year point, we switched teachers and classrooms. Report cards had just been handed out and I had arrived a bit early in my new science teacher’s classroom. My report card rested on top of the stack of books on my desk. My new science teacher helped himself… read more»

I Act Too Much Like a Woman

I was catching up on an episode of The F Word with Gordon Ramsay. Chef Ramsay was on a tear to show people how fast they could cook up healthy, fresh food. He found a group of nurses who ate microwaved convenience meals for dinner every night because thought that’s all they had time for.… read more»

Place text over images on hover without JavaScript

Note: Want to take the animations even further? Check out this tutorial that combines multiple animations on hover. Thanks to CSS3 and better and better browser support for it, we can accomplish things now with CSS that previously required fancy JavaScript work. In this tutorial, I’ll walk you through fading in text over an image… read more»