Typography Basics – Some Fundamentals for Body CopyI tend to define typography very simply:
“Designing the written page for better communication of a message.”
But that simplicity can get ugly fast.
Ask Google a question about typography and soon you’ll find yourself immersed in Classical proportions, the Golden Mean, Fibonacci sequences.
Not to mention modular systems, double-strand scaling and an infestation of rabid zombies.
I didn’t make any of that shit up. Not even the zombies. Luckily, even the more complicated and mathy bits inevitably lead to the author reminding us, “You know, there really are no rules, just guidelines.”
So, regardless of path the destination is the same: Make it look good without forsaking legibility. And hell, if we can reach the result without math, I’m all over it.
That’s the route we’ll take with this series on typography.
For this first episode we’ll breathe some life into something boring and make it, well, probably just slightly less boring: body copy.
How to tame and sexify body copy
When doing projects largely based on type, designers often make the same mistake. They say, “Yay! A type project! I’ll go find a bitchin’ headline font!”
So they jump on the free font sites out there and try to find the latest wild west font, something entwined in barbed wire or anything with the word “puke” in. And I don’t blame them; fonts are awesome.
The problem is that for any project with substantial body copy, the headlines receive relatively little air time. The reader’s eye is going to be on the body copy far longer than anywhere else, so it’s really the work horse of the project. The body copy should make the reader’s job very easy.
How do we make it easy for the reader? Here are a few different guidelines that we’ll dive into with greater detail:
- Use common fonts. Just because it’s on your computer doesn’t mean it should be used.
- Use an intelligent size so my father can read it.
- ALL-CAPS IS AN EFFING BASTARD.
- Do away with constipated or loose-boweled line-heights.
Using common fonts
You’re going to have a limited number of fonts to work with for body copy, especially online. That’s actually a good thing. Bottom line is you just can’t get too crazy with body copy without getting a fat bill from your reader’s optometrist.
I use a silly-simple rule of thumb:
If I have to squint or move my head closer to read it, it’s almost certainly wrong.
With body copy, you’ve got two main options: serif and sans-serif. A little battle rages around which is better.
The sans-serif team says that their fonts look cleaner, because they don’t have all those little serifs cluttering up the works.
But then the serif team says their fonts are easier to read because of the serifs. They act as little eye-trails, pulling the reader through.
Probably both arguments are correct and at least they emphasize the right things: cleanliness, legibility and ease.
I see site owners try to be cute or novel with body fonts or use something “unique” they happen to have on their machine. Comic Sans may be on your computer, and that’s probably where it should stay. Would you want to read something like this for much longer than one sentence?
Yes, there are websites out there that actually use these fonts. Don’t be that guy. Use a regular font.
Options for serif body fonts (GFR = Google Font Replacement):
- Palatino Linotype
- Book Antiqua
- Times New Roman
- Droid Serif (GFR)
- Alike (GFR)
Options for sans-serif body fonts (GFR = Google Font Replacement):
- Lucida Sans Unicode
- Lucida Grande
- Droid Sans (GFR)
- Shanti (GFR)
What’s good about these? Well, without getting too technical, they’re tall enough and wide enough. Tall enough means that the lower-case ‘a’ and ‘e’ still have nice little loops. And wide enough means that the feet of, say, the letter ‘m’ or ‘h’ still have enough space in between to read as spaces and not mush together. Remember, we’re going for instant recognition.
And honestly there are some fonts I absolutely love in Google’s font directory, but I don’t use them for body copy. “Open Sans” is one of them, and I try over and over again to use it only to fail like a chump. It’s sexy and svelte, but it’s so ultra-thin it virtually disappears at anything below 22pt. But all is not lost. We can still use it, as we’ll get to in the next installment.
Use an intelligent size so my father can read it
A while ago, I visited a site on which I could barely read the body copy. I commented to the webmaster that 10px type was pretty damn small. In reply the site owner said, “Yeah, well I like the delicate look of the small type.”
Well, that’s great, but we’re not making Swiss watches. We’re making a written page and it’s supposed to be legible, lest the whole message fail.
So how small is too small? You can probably get away with 12px type, but in my web projects I almost always go for 14px.
ALL-CAPS IS AN EFFING BASTARD
When we humans read, we don’t look at each and every letter in succession and thereby build each word. We read much more quickly than that, scanning over the words and taking visual cues along the way. We note the crossed ‘t’, the curves of the ‘s’, the loops and dangly bits of ‘p’ and ‘g’, and the loops and upward extensions of ‘d’ and ‘b’. We sort of just “sense” these as our eye scans over the line, and reading becomes a breeze.
ALL-CAPS destroy that breeziness. ALL-CAPS is like typographical socialism, where each individual is roughly the same importance as his neighbor. The visual cues are gone. No more interpretive dangly bits, no more upper extenders and no more helpful negative spaces.
Best-practice suggests using all-caps for one word that really needs punch, but even then it’s questionable. Some folks think that all-caps is basically the written version of yelling at someone, and I would tend to agree unless it’s used very sparingly.
Do away with constipated or loose-boweled line heights
Now we get to one of those ultra-important things that is so often forgotten: line heights.
Line heights can make or break a project. As we discussed above in the all-caps section, we take visual cues from letters as we read. The upper and lower extenders help us interpret the words very quickly. Well, what happens when your lines of text are too close together? You get bleed between those extenders. I’ve seen projects where adjacent lines of type were actually touching in some places.
All the type starts to blend together into a nasty gravy. Not only that, it even looks harder to read as it’s blocky and ominous. Ick, check it out…
But go too loose and too spacious with your line heights and you end up with a different set of problems, one of which has to do with negative space. With too much line height the text loses punch and interest. Instead of the text being in the spotlight, the white space gets visibly heavy by comparison and starts to take on a life of its own.
So what do we do? Well, obviously we choose something in between.
The actual code you’d use on your site would be either in percentage:
Or in ems (assuming 1em = 14px):
Of course, mileage will vary. You’ll find the overall appearance and feel of the copy will be a sort of ballet between line height and the width of the content itself. Play around as needed and when it just feels right…it probably will be.
By the way, for you Photoshoppers out there, if you’re working on a web comp and select “Auto” for a body of text, the result will be 120%. I almost always think this is a bit cramped and change it. And honestly, I just futz around with the numbers until I like the result.
140% works pretty well. It’s tight, but not so tight that it feels cramped. Of course your mileage may vary, but I think you’ll find gold if you’re panning somewhere between 120% – 160%.
In the next installment, we’re going to talk about everyone’s favorite topic: big fat sexy headlines!
For next time…
If you’ve gotten this far, thank you for reading! I know it’s not the sexiest subject, so thanks for sticking with it.
Next time around, we’ll hit it Hollywood style and talk fun stuff: headlines!
See you then!
Sign Up Now for Free Updates and Exclusive Content:
Learn how to write killer content, get more traffic, make money, and more by entering your email below: