Master Web Typography: 8 Detailed Typography Tips for the Web

Reading time: About 5 minutes

One of the most under–rated elements of beautiful Web design is the subtle art of typography. Part of this, I know, is a lack of a solid font support for Web sites. But never fear! Today I’ll show you some quick things you can do to appear to be a type master.

1. Stop using straight quotation marks

Straight (AKA ambidextrous) quotes look like this: "Oh happy day this looks as clean as cubicles!" Now compare that with this: “Look how these quotation marks are not just stylish but guide your eyes into and out of the quotation.”

Straight quotation marks were made to reduce the number of keys on keyboards by being ambidextrous (they could go on either side of a quotation). In short, the engineers took over and style was lost. A typical scenario.

But alas, you can rid yourself of MS-DOS dullsville.

Here’s what you do: On the left side of a quotation, type “, and on the right side type ”. Once it renders in a webpage, it looks like this: “My socks typically have holes.”

2. Stop using straight apostrophes

This is similar to the above tip. I’ve told you. You know. It’s ugly and unwarranted from a person of your stature. Instead of taking the easy way out and using the apostrophe on your keyboard, use ’ to create a styled apostophe that looks like: ’

3. Use a dash instead of two hyphens

Two consecutive hyphens (--) are sloppy and actually interrupt the natural flow of your message. The reader—if only for a second—gets stuck in between those two hyphens trying to make sense of them being back–to–back.

To combat this assault on your reader’s cognition, try using an En Dash or an Em Dash—like nature intended.

An En Dash (a dash the length of a capital N: –) is used for:

  • Ranges of values (Pick a number 1–10)
  • Relationships and connections (OSU beat Michigan, 27–3)
  • Compound adjectives (Styled quotations are post–MS-DOS)

Make an En Dash with this in your HTML: –

An Em Dash (a dash the length of a capital M: —) is used to indicate a temporary shift in thought, whether in the middle or end of a sentence. Make an Em Dash with this in your HTML: —

4. Tweak letter, word, and line spacing in your headlines

As a Web developer, you have the option to tweak the letter-spacing, word-spacing, and line-height in your CSS. But you probably don’t.

By default there’s too much white space between characters, words, and lines if your font-size is greater than 16 for a short headline. As font-sizes get bigger the letters and words seem separate, fragmented. They are lonesome. Unify your text with thinner letter and word spacing and shorter line heights. The general rule-of-thumb I follow is to provide just enough space to allow the reader to read the headline. Doing this also adds weight to your headline for nice contrast over body copy.

Try tweaking your letter-spacing, word-spacing, and line-height. You’ll be amazed at the impact.

5. Use the EM unit to size your text

When sizing your text in CSS with the font-size property, do you use 16px, 12pt, 1em? or %? Did your head just spin? Sizing text on the Web is not a simple thing. On the Web you have the opportunity to adjust to eyesight and reading preferences.

First off, if you use points (PT), you are probably coming from a print background. Stop using them right on the Web right now. If you use pixels (PX) you’re using a relevant measurement, but pixels are a static measurement and thus your readers can’t adjust the text size to their preferences.

EMs on the other hand are a relative measurement, and a Web site set with EMs adjusts as the user “zooms” in and out. To learn more about sizing text with EMs, visit PXtoEM.com. Make the switch today!

6. Add extra space between lines

You’re driving your users bonkers with your short line heights. More space between your lines will make your body copy less overwhelming and more digestible. As a rule of thumb, I set line heights to 150% the size of my text. Use the line-height property in CSS. Example: line-height: 1.5em

7. On the Web: serif font for headlines and sans–serif for body copy

Now I realize I don’t follow this one, but all rules are meant to be broken if you have the knowledge to break them. :) That’s what art is about. For everyone else, this provides a good framework.

Serifs are the little accents on letters seen in a font face like Times New Roman. Serifs are there primarily to guide your eye across the letter and through the words (to grandma’s house we go). Secondarily, serifs look sophisticated, elegant, or stylish. Sans–serif fonts like Helvetica—or its pour Arial knock-off—don’t have these accents. San–serif fonts appear more modern or clean.

So why use serifs in the headlines and sans-serifs in the body copy?

Due to the low resolution of computer monitors relative to printed paper, serifs don’t appear in enough detail in lower font sizes—below 16 pixels. But the fonts in headlines sized over 16 pixels are big enough to show off their serifs in a little detail—and in more detail as the font size increases. In smaller body copy, setting text in sans–serif will be easier to read without low&ndashdetail serifs. By the way, take your serif headline a step further: bold it and the serifs will appear even more distinguished.

8. Use a proper ellipsis instead of three periods

Do you ever end a sentence with three periods (...) to indicate an interruption of some kind? Due to the width of the full period character, three periods (...) are too far apart to immediately appear to be an interruption. The correct symbol to use is an ellipsis. To add an ellipsis to your HTML copy use …, which appears like this: …

46 comments skip to comment form

  1. Jason Maletsky said— 7 minutes later

    Great tips. Will use some of these on my next project.

    #1

  2. Ehab said— 4 hours later

    Nice article Brian. Why do you have “Share and Enjoy” twice on the same page ?

    #2

  3. Ehab said— 4 hours later

    Nice article Brian. Why do you have “Share and Enjoy” twice on the same page ?

    *ignore the last comment* !

    #3

  4. Brian Cray said— 4 hours later

    It’s there twice because of the wordpress theme I’m using. As soon as I build my own, that’ll be gone :)

    #4

  5. Christopher Bolton said— 6 hours later

    I agree with your point on contrasting typography between headers and body text. I have spent quite a bit of my spare time lately trying different types of typography design on the web, and testing the results with a number of my friends (some web-savvy and some not).

    Sans-serif for headers and serif for body seems to be equally popular. I also see this combination quite regularly on typography gallery websites. Just a thought.

    #5

  6. Christopher Bolton said— 7 hours later

    Another point (we discussed this earlier on Twitter). Sizing text in ems. Right now I’m working on two client sites and I have used ems to size every element.

    The pros: The layout won’t break when the text is resized in any browser.

    The cons: It’s only necessary for IE6 and Safari, and it reduces the amount of background styling you can add to a website (unless you add unnecessary divs).

    What do you think?

    #6

  7. Brian Cray said— 17 hours later

    I typically don’t size div widths or heights with EMs. It’s a sacrifice in layout control I’m not going to take. I will, on the other hand, size all text in EMs so it adjusts to the user. It also makes the CSS easier to manage. Instead of changing each element’s font size with PX, you just have to change the base font size and the rest of the document will reflect that change

    #7

  8. Christopher Bolton said— 23 hours later

    But if you only size the text in ems. This happens (safari) http://twitpic.com/1kn2a

    #8

  9. Denny said— 2 days later

    I like to use the Yahoo! reset and font CSS, since it normalizes font sizes across browsers and gives you drop-in percentage value equivalents for 10px, 12px, etc. Give it a try!

    #9

  10. josefnankivell said— 2 days later

    Great article – some very helpful tips!

    Just thought I’d point out that in tip 3 you have both En Dash and Em Dash as “(a dash the length of a capital N: —)”. I presume the Em dash is the length of a capital M.

    #10

  11. Brian Cray said— 2 days later

    @josefnankivell
    Thanks for pointing out my error! Fixed

    @denny
    I use Yahoo!’s reset.css, but I don’t use their font CSS just because there is so much font variation between clients. But it’s a good tip nonetheless!

    @chistopher bolton
    How many times did you have to zoom in to get to that point!? :)

    #11

  12. Christopher Bolton said— 2 days later

    Ok, so it was zoomed to the maximum on Safari, which you wouldn’t expect users to do very often. But if the browser has the option you should build to suit the option. Most of the sites I try this with break when the text increases just once.

    #12

  13. Brian Cray said— 2 days later

    @Christopher Bolton True.

    #13

  14. Roger C. Parker said— 3 days later

    These postings are extremely useful and well written. A great review of techniques that should be hung up next to most computers!

    BTW, another reason to use an ellipses is to keep the periods from separating, i.e., two at the end of the first line, one stranded at the beginning of the second line.

    Roger C. Parker

    #14

  15. cassie davis said— 1 week later

    Bc i like your website and GO TO HOORAYFORHANNAH.COM

    #15

  16. mdrisser said— 2 weeks later

    Great article Brian, I really enjoyed it.

    It is worth pointing out though, that the biggest reason for using EMs rather than PX (Tip #5) is the ever popular IE6. Every other modern browser supports zooming pixel based fonts, its just IE6 that doesn’t. There’s a great article over at SitePoint: http://www.sitepoint.com/blogs/2008/10/03/pixel-fonts-a-hot-button-topic-at-wds08/ on the topic.

    That being said, it really comes down to this. Using EMs on text CAN break your layout, while using PX ensures that your layout remains virtually unchanged. So the decision really should be made based on your audience, how many are still using our mortal enemy IE6?

    #16

  17. Brian Cray said— 2 weeks later

    @mdrisser Great point about IE6. Given the ease of maintaining EMs (resize the base font only), I still prefer to stick to EMs :)

    #17

  18. KatyDidsCards said— 2 weeks later

    What a wonderful article! Note, the “subscribe to my blog” link seems to be missing.

    ;)

    #18

  19. KatyDidsCards said— 2 weeks later

    And fwiw, I was always taught to use sans serif fonts for headers, and serif for body copy. But perhaps that’s just another giveaway of my print background.

    #19

  20. Stuart Thursby said— 1 month later

    A great collection of tips, some of which I used for my site, others of which I’m going back to implement! Cheers!

    #20

  21. Navdeep said— 1 month later

    Very nice tips.

    @3drockz

    #21

  22. Sherrod said— 1 month later

    Good tips all around, but it’s worth noting that in modern engines like WebKit, your proportions are maintained when using px measurements. Also, support for … is very spotty on windows. Same with: ←, →, ★, &lang, and ⟩

    #22

  23. Amrinder said— 1 month later

    Valuable points.

    However, this one is little contradictory to your blog:

    7. On the Web: serif font for headlines and sans–serif for body copy

    What do you say about usage of serif and sans in body text and headings?

    #23

  24. Jimeee said— 1 month later

    7. On the Web: serif font for headlines and sans–serif for body copy

    Huh, This very website uses the exact opposite – serif fonts for body copy and sans serif for headlines (navigation and title at least)

    #24

  25. Wade Jackman said— 1 month later

    Excellent post, a lot of very overlooked styling. I sometimes forget about the Ellipsis.

    #25

  26. Luke said— 1 month later

    Ironic that an article about Typography is written on a website using microscopic fonts for the article text, yet uses oversized text for certain things like comment number and links. Even the sidebar links are bigger than the article text.

    Good article although I had to put the font size up to actually read it.

    #26

  27. Martin said— 1 month later

    number 5 (Use the EM unit to size your text) is obsolete and deprecated. use pixels with no fear whatsoever, all modern browsers resize the layout by actually zooming it in, not modifying the actual font-size property.

    #27

  28. dsdizajn said— 1 month later

    This is a fundamental reading for any web designer. Great tips.

    #28

  29. Fred yates said— 1 month later

    great post and i totally agree with mostly everything listed but am i mistaken when i see your body text is Georgia,serif and well below 16px?

    why preach what you don’t practice?

    I see your note at the top that you don’t use all of the points but it would take less time to change the Georgia font on the p tags than it would to even write that note.

    #29

  30. David Hucklesby said— 1 month later

    All very good points, Brian.

    One suggestion that I have is to use UTF-8 encoding, as you can then add em dashes, “curly quotes” etc. directly, without using HTML entities.

    #30

  31. Sai Gudigundla said— 1 month later

    Brian:

    Thanks for those gr8 pointers. Being a web design newbie I was doing a few of those things wrong.

    i follow you and twitter and i love your tweets :)

    Thanks

    #31

  32. Steve Losh said— 1 month later

    Good stuff, but one minor point about #3: for a dash between sets of numbers, like 0-10, you should use a figure dash.

    It’s probably too much of a pain to type out by hand, but you shouldn’t be typing HTML entities by hand. There are cool things like django-typogrify (which has been ported to other platforms/frameworks like WordPress) out there to do it for you.

    #32

  33. reed said— 1 month later

    Totally agree with #8. It’s a big pet peeve of mine.

    hooray… for ……
    hooray… for ……
    hooray… for ……

    #33

  34. Balakumar Muthu said— 1 month later

    5th one is my all time fav.

    #34

  35. maurice dale said— 1 month later

    1. The Chicago manual of style dictates there should be one en space between each period of an ellipse. This is a style issue.

    2. You’re not following your own rules.

    3. You misspelled poor.

    4. You sound like a snob.

    #35

  36. Sergey said— 1 month later

    your subscribe to my blog button is not working on the bottom of your article..
    just fyi.

    good work otherwise!

    #36

  37. David Baron said— 1 month later

    The CSS line-height property requires a little care: there’s a substantial difference between line-height: 1.5 and line-height: 150% or 1.5em (regarding how they inherit). You generally want line-height: 1.5 rather than the others.

    #37

  38. Lauren said— 2 months later

    Enjoyed your tips — many of your recommendations echo long-standing pet peeves of old-school typesetters. I’ve tried to fight the good fight, but I have to admit “texting” has finally beaten me.

    #38

  39. Brian Cray said— 2 months later

    Lauren: “but I have to admit “texting” has finally beaten me.” cracked me up. Great one :)

    #39

  40. Yael K. Miller said— 3 months later

    This is an awesome post. What I love about it is that you didn’t just list tips but explained how to implement them. I’ve seen “Stop Using Straight Quotation Marks” too many times without the blog author saying what to do instead.

    #40

  41. Wayan Parmana said— 6 months later

    what a great tips and tutorial..thanks a lot..i’ve learned so much

    #41

  42. Bob said— 9 months later

    Wow, this was awesome. For about the last two months I’ve been looking at websites with great typography trying to “discover” what made them great. This helps me a lot (and makes me educated…something we can all use a little more of).

    #42

  43. Mario said— 9 months later

    That’s a very useful and valuable article. But i just noticed you are using sans-serif for headlines and serif for text. The typeface rule tells converse.

    #43

  44. Brian Cray said— 9 months later

    Indeed. All rules are meant to be broken with the correct understanding of the consequences =)

    #44

  45. Tamara said— 11 months later

    Brian,

    Just found this post. Nice tips. Now I have to make a cheat sheet so I can try and utilize them. You don’t happen to have a cheat sheet handy do you? I’m sure I break many of the rules. Sometimes, like you said “rules are made to be broken”. I’m still learning. Thanks for sharing.

    #45

  46. Naresh K said— on February 18, 2009 later

    Thanks for Information. But we already use HTML Characters in our website Project. We are expecting something new about CSS Level 3

    #46

  47. Respond to this post—

Return to navigation
85