15 Excellent examples of Web typography

In part one, 15 Excellent Examples of Web Typography, I showcased 15 web sites that make excellent use of type. To avoid this article being inordinately long, I’m going to focus on the first site in the list, namely A List Apart. To take all 15 examples to pieces would be rather pointless, because most of what’s good about them is shared.

A List Apart

The job of web typography is not to simply mimic that of print. First, the web is a different medium with different strengths and weaknesses. Attempting to faithfully reproduce print typography is a rather pointless exercise. The printed page is rigid; we have no control over the size of the type and of the page; on-line the user has more power, more influence; she can resize the page (browser window), and even alter the default font size; add to the mix, different browsers with different rendering capabilities, differing resolutions and screen sizes, and we soon realise that the web page and the printed page make different demands.

However, despite these differences, the elements of good typography are shared across these two mediums. In a future article we’ll look at this topic in more detail; today however, we have something different on our hands, so, without further ado let’s take this list apart. Don your overalls, put on those latex gloves, and with that rather awful (List Apart) pun behind us, let me reintroduce you to A List Apart.

sd-alistapart.jpg

Home page view

A List Apart. Article view

Article page view

Not only is this site a wonderful resource, with well written articles, but it has the feel of a magazine or an academic journal — both in its design and in its typography (it even has its own ISSN number!).

The first tick against this site sits beside “White Space”. Though the pages are quite full with information, even above the fold, they don’t feel crowded. (see also Mark Boulton’s Whitespace). The page benefits from a relatively even texture and light colour (in typography the colour of a page refers to its density or blackness of the type as a whole).

Good typography is like bread; ready to be admired, appraised and dissected before it is consumed. — Robert Bringhurst

Everything feels like it’s in the right place. Type is used as a means of hierarchy, as a way to distinguish and differentiate elements on the page. The logotype sits in its most comfortable position, top-left; the main menus, sit along the top, and are distinguished from other elements by their size, weight and style.

Letterspacing

A List Apart. Letter Spacing

All caps often benefits from a little extra letterspacing, as in the above example. The above date is styled like so:

letter-spacing:0.33em; (equivalent to 3px)

The letter-spacing property is also used for titles and bylines. A word of caution: there is usually never a need to apply CSS letter-spacing to the lower-case; and never, never, never, ever use negative letterspacing. There is an excellent article on web letterspacing over at webtypography.net.

Letterspace all strings of capitals and small caps, and all long strings of digits…. In titles and headings, extra letterspacing is often desirable. — Robert Bringhurst

Grid

Often, even a poorly designed page with substandard type can be much improved by simply aligning the elements to a well-crafted grid. A grid, though invisible, brings order and rhythm to design and to the type.

Designing with grids

Note how the black badge in the top-left is supported by the grid, and how the top of the A within the logotype levels with the division between date and the preamble text. These are small details, but consistent attention to small details makes for a good whole.

In a future article, we’ll take a look at sIFR (Scaleable Inman Flash Replacement), for styling headings in Flash; how to style drop caps that are cross-browser friendly, and much, much more.

This one has been longer than usual. The next article will be a little shorter and a whole lot sweeter, and will include the next TypeNuts cartoon, so stay tuned. I’ll also reveal the identity of Brian (I’ve received numerous emails about him).

To ensure you don’t miss out on the next article (and on discovering Brian’s true identity), subscribe to I Love Typography today.


Tags:   

  1. Good advice on CAPS and letter-spacing. That is something I’d like to keep in mind when I get a chance to work on my site some more in the future.

    One of the most distinctive things about the A List Apart site is the cute little drawings within the articles. Too bad my sister has all of the drawing talent in my family because I’d really love to be able to make clever little illustrations in that style.

  2. I have seen the negative letter spacing done really well for headlines.
    I’ll see if I put together a few links for you.

    Another great post!

  3. Chris
    Good to see you here again. Yes, those illustrations by Kevin Cornell are great. I only wish I could afford to have him illustrate for iLT. Perhaps if I say enough nice things about him…

    Cody
    Headlines on the web? I’d like to see that Cody. Thanks.

  4. n3rdski

    I love the breakdown. I agree with Chris Papadopoulos, good advice on the CAPS letter-spacing. One question, when is okay and when is it not okay to space lower-case.

  5. Kari Pätilä

    Cody
    Negative word spacing might be suitable for headlines, but negative letterspacing makes me a bit cautious.

  6. “never, never, never, ever use negative letterspacing.”

    Why on earth not? Johno, do you have an example or a link to an article about why this is deemed bad practice?

  7. n3rdski and JohnBillion
    Perhaps I should make clear the distinction between letterspacing and kerning, for others that might be reading this. Reducing the physical space between pairs of letters through adjustments to the kerning table is often necessary in print.
    On the Web, the CSS letter-spacing property could be used to mimic this effect with some carefully placed span tags, written into one’s code via a little regexp (I’m thinking of PHP, here).

    “A man who would letterspace lower case would steal sheep” — Goudy.

    Therefore, I guess if Goudy were to come back from the dead and see something like this { letter-spacing: -0.3em }, he might very well say,

    A man who would use negative letterspacing on lower case would steal sheep and the shepherd.

    The only instance I can dream up, in which one might want to apply negative letterspacing (really, ersatz kerning), is in huge text (as one might do for huge text in print); for example, if you look at this page’s header image, with the very large typography set in lowercase, one might want to reduce the physical space within the ph letter pairing. If you were doing this with the CSS letter-spacing property, you do something like this:

    ‹span class=“negLetterSpace”›p‹/span›h

    where the class is defined,

    .negLetterSpace { letter-spacing : -0.3em; }

    remembering that the CSS letter-spacing property adds space following the character (not on both sides).
    I don’t know of another article that condemns negative letter-spacing; however, if anyone would like to show me an example of negative letter-spacing that improves legibility, then I’m all eyes.

    In my opinion, it’s bad practice because negative letterspacing applied indiscriminately to strings of characters would result in collisions — the very thing for which kerning exists (to prevent collisions and squashed type). Negative letterspacing is kerning’s arch enemy because the application of negative letterspacing is tantamount to saying, to hell with the kerning table, I’ll — in the words of FS — do it my way.

    Yes, there were times, I’m sure you knew
    When I letter-spaced less than I should do
    But through it all, when there was doubt
    I ignored the kern and spit it out
    I faced it all and I stood tall and kerned it myyyyyy way

    n3rdski piano; chris on drums; johnbillion and cody on sax; kari vocals; johno on triangle

    I’d love to hear what others have to say on this topic.

    Kari
    I can understand your caution.

  8. sallyyi

    It was interesting to why you choose A List Apart. I love this blog!!

  9. Great analysis Johno. ALA has been through a lot of redesigns — and this is certainly one of the cleanest designs they’ve ever had.

    Speaking of letter-spacing, I’ll admit that I’ve experimented with negative values in the past — may Goudy forgive me! Hehe.

  10. Here is one site which I forgot to mention here in comments when the first part of this series came out: http://coudal.com/ is one of my long time favourites when it comes to nice web typography.

    It also is a good example of negatice letter-spacing done properly. Just look at those headlines. There isn’t happening any unwanted collision.

    And thanks a heap for a great blog. This is the first blog ever I have subscribed to and have been doing since the day one.

  11. Yes, there were times, I’m sure you knew
    When I letter-spaced less than I should do
    But through it all, when there was doubt
    I ignored the kern and spit it out
    I faced it all and I stood tall and kerned it myyyyyy way

    n3rdski piano; chris on drums; johnbillion and cody on sax; kari vocals; johno on triangle

    ——————————————————

    I think we might have something here! I was trying to remember the sites I have seen with negative spacing and I seem to remember most of them being a designers portfolio site. For example, the headline or title would be PRINT or SHOWCASE with negatve spacing.

  12. Maciej

    Examples of negative letterspacing:
    http://www.uxmag.com/strategy/249/stop-using-your-shoppers (article title -2px, quotation -1px)
    http://www.wanzafran.com/ (page title -3px, article title -1px)
    Negative letterspacing is mostly used in headers and applied to Georgia and Arial.
    Peace!

  13. Miska
    Actually, that’s not a bad example is it. -1px for the headings. Interesting. I see they also use positive letterspacing for the all-caps headings.Thanks for the link, and for subscribing and commenting, of course.

    Cody
    Perhaps I’m just old fashioned, but I would immediately think of adding a little extra space between those all caps examples.

    Maciej
    Thanks for the links. Yes, they do indeed use negative letter-spacing. What do you think about the result? I particularly don’t like the collision in the Th, in the second link.

  14. Kari Pätilä

    Johno
    I think you’re right about the second link, but I’d add the th and the as to the list as well. The Th is just brutal.

    Coudal partners make the negative spacing work, but that requires some attention to the titles. I think they’d sooner abandon the negative spacing than just use the letters that fit a given space. That’s not the message this blog is trying to covey. Typography should be used to promote content in ways other than just dressing it up (in pants that don’t fit).

    The other thing about wanzafran is the fact that proper justification on the web requires really paying attention to the words you use, unless you want your paragraph to look like a stop sign after taking a hit from both barrels. And altering content to fit typographical needs is where we all should draw the line.

  15. good post. typography it’s coming back!

  16. I always thought of ALA as an excellent reference of good typography applied to the new media. Nice article, more similar articles sounds tasty to me! ^^

  17. Barney Carroll

    Kerning / letter-spacing distinction: The “If Bringhurt was on the internet” site suggests a CMS-driven inclusion of spans to wrap known combinations of badly-rendered-space letters in, and I’ve seen this done (although I can’t remember where).
    The problem with using spans with specified letter-spacing to emulate kerning is this: say there is way too much space between ‘o’ and ‘d’ in that order, and you wrap ‘od’ in a span with negative letter-spacing; it may also be true that a ‘d’ and ‘i’ are always too close together. You’re screwed.

    Extra markup cannot adequately and should not cater for these relationships. Introducing markup into the raw document for these presentational changes goes against everything else in that document (if you must, use JavaScript).

  18. Jono - I think the negative letter spacing comes down to what the project is. With a formal, traditional corporate, or wedding package; I would definitely go with extra letter spacing. However, if I was working on a modern/trendy project; I would probably use negative letter spacing (depending on type choice).

    But then again, that is a whole other story.

  19. Hi Johno,
    I don’t think I’ve left a comment here yet, but assure you I’ve been reading religiously from my feed reader.
    I think this would have to be my favourite blog of all time, good looking, funny and informative all at once; nice work!
    As someone who knows (..knew) nothing at all about typography, I find your writing enormously helpful and easy to follow without being at all condescending.
    I’m waiting patiently by my feed reader for the next post…

  20. I just finished reading that Bringhurst quote this morning… interesting to see how prolific that book really is!

  21. Thanks for this absolutely excellent article. I really appreciate the time and effort that goes into every post on this blog. It’s rare to find such quality on the net.

    Personally, I think you should charge for that .pdf book you mentioned, because these articles really are worth paying for. Thanks again - I’ve learned so much about typography and design in general just from this article.

  22. Kari
    Yes, I think you could be right about the Coudal Partners site. It’s true that the negative spacing is indiscriminate. The only way to manage different letter pairs differently would be to use some regexp (and apply the negative letterspacing only to certain pairs), but in effect what you’d be doing is creating another (CSS) ‘kerning’ table.

    Klingsor
    Thank you. It most certainly is (thanks to everyone reading and commenting).

    Dimitru
    Thanks. I have some more in the oven…

    Barney
    Yes, as I mentioned in my response to Kari above, it hardly seems worth it — the CSS negative letterspacing just creates more problems, which then have to be fixed with yet more CSS/coding.

    Cody
    There’s definitely a distinction to be made between print and web here. In fact the nomenclature only goes to confuse the matter, because we’re talking about CSS letterspacing, rather than kerning. For print, it might make more sense to look at side bearings, and adjust those if necessary; but then we really have to get our hands dirty.

    Sally Yi
    It’s nice to see you here. Hope all is well in China. From what I’ve been reading on your blog things — besides the toppling painters — are going well.

    favourite blog of all time.

    Where’s that blush smiley when I need it. Thank you.

    Tylor
    It’s a wonderful book. In fact one could learn a lot about typography from just holding and looking at it — as opposed to reading it. I dream of interviewing Bringhurst on this blog one day. Well, we can all dream!

    Roger
    Thanks for your enthusiastic praise. The time I spend researching and writing these articles is more than rewarded by all these wonderful comments. Thanks for being a part of it.

  23. Negative letter-spacing never improves the legibility of text. However, it doesn’t necessarily degrade it. A very careful, modest application of negative letter-spacing for very limited amounts of text can be acceptable.

    For example, I’ve used a minimal amount of negative spacing to darken the colour of small headers just a touch. In that particular case I had to somehow fit all of H1-H6 into an 0.6em range (1.6em for H1, 1.0em for H6), which makes it rather difficult to make the consecutive header sizes visibly different. My response was to use letter-spacing to vary the colour in addition to the font size – but the largest negative spacing I used was -0.015em. You can see that! Together with the positive letter-spacing (equally modest) it was enough to make even H6 and H5 clearly distinguishable from each other.

    Another trick I’ve found is that a minor positive letter-spacing can make smaller font sizes equally as legible as larger ones, allowing you to set a large block of copy in smaller type, and thus cramming more text onto the screen without significantly degrading readability. We’re talking about spacing on the order of 0.02–0.05em.

    So tiny letter-spacing adjustments can be used productively to carefully tweak the appearance of copy. The key is to stick to extremely small adjustments.

  24. I just don”t think there is nothing wrong with negative letter spacing in headlines and even in sub headlines regardless of caps or no caps….

  25. Yes. Internet so you do not printed glossy magazine. I understand why you need a grid. There is clarity. But why completely empty left corner? We must understand that people first turn draws attention to this corner.

    p/s. You can put advertising announcement ;)

previous post: I Love Typography is Moving

next post: Typoholism. An Addict’s Tale

April Fonts January Fonts January Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts december Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts May Fonts April Fonts March 2011 Fonts February 2011 Fonts January 2011 Fonts December 2010 Fonts November 2010 Fonts October 2010 Fonts September 2010 Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 2010 featured fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts