8 Tips for Designing Text that’s Pleasant to Read
The problem with web programming and web designing is that they’re two things that go hand in hand but probably shouldn’t. A lot of designers don’t care about code, and a lot of coders don’t have a clue how to design.
I’m more of the second camp: whenever I try to design a page, I have no unified color scheme, I try giving all my borders a “dashed” style (“just to see how it will look”) and don’t give a second thought to text styles beyond assigning a font. Not a font stack; just one font.
On the second go-round, the changes come and things are gradually smoothed out. But the fact is, basic text is often the last thing new designers think about because they’re too worried about image galleries, tabbed widgets, shadows, and rounded corners. None of the other stuff matters if people don’t want to read what’s on your site. So here, compiled from experience, are eight basic tips on designing text that feels good.
1. Black is not your friend.
Give your text a dark gray base color — something like #223333, what this site uses, but you could probably safely go up to #555555 or higher, depending on your layout. Likewise, if you have a dark background, don’t make your text plain white. Make it a light gray.
2. Use font stacks.
No matter what font you have in your stylesheet, it’ll only display if the user’s computer has the font installed. So while you may enjoy Lucida Sans Unicode, but Macs recognize Lucida Grande instead. So please, write the full stack:
body { font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; }
In that example, the browser will first check for Lucida Sans Unicode. Not there? It’ll go to Lucida Grande. Still not there? (Who is this maniac?) It’ll default to sans-serif.
“But how do I know which fonts I can use?” Easy: just check out this page. It lists every web-safe font and all Windows and Mac equivalents.
3. Know the difference between serif and sans-serif.
So there are two main types of font: serif and sans-serif. Serif fonts feature those tiny little marks at the end of most of their letters. See that little line at the bottom of all the lowercase “i”s in this sentence? That’s a serif.
Sans-serif, as you probably already guessed, don’t have those lines. Arial and Helvetica are two common examples.
Traditionally, serif fonts are easier to read on paper, while sans-serif fonts are easier to read on a computer screen. It’s often pleasing to the eye to have a serif font for your website’s headings, and a sans-serif font for your content. Try making your headings Georgia and your body Verdana. It’ll look surprisingly nice.
Of course, I don’t follow my own advice — on this site, the headings and articles use Georgia (but the sidebars use Tahoma). But that’s just because I really like Georgia. Which makes it totally OK.
4. Don’t Use Comic Sans MS.
Look, I know Comic Sans worked great on greeting cards you made for Mother’s Day in 1999, and I know it continues to be used in just about every PowerPoint presentation ever, but it’s the mark of an amateur.
5. Keep Your Headings Right-Justified.
Long titles can look surprisingly messy when they’re centered. On this site, I’ve centered the text on the banners of the archive pages, but all the post and page titles are safely left-justified.
6. Use Line-Height for Everything.
Here’s a real ninja at work: always declare your line-height value as something big or your text will look too smushed and unappealing. It’s a quick fix that works every time in making your text look prettier. Here at PressPlaying, it defaults to 1.6em.
7. Don’t Make Your Fonts Too Small.
You see tiny fonts on website after website. Most people — particularly people under 20, who like to lean back in their chairs, and people over 40, who are starting to have vision problems — appreciate bigger fonts. Of course, know your audience, too: PressPlaying is a site for burgeoning web geeks, so I can get away with fonts that aren’t enormous because my audience is full of people who are used to being hunched over their computers. But anything smaller than this would be too small.
8. Leave as Much Empty Space as Possible.
This is writing advice more than design advice, but the end result is more people willing to read what you’ve written. Whenever possible, break things into subheads. Whenever possible, break up your paragraphs. Large blocks of uninterrupted text just plain suck and will turn off a potential reader faster than Comic Sans.
Great to hear you’re doing so well,Ibrahim