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.
Home page 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
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.
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.
— Stephen Coles
— Hochuli & Kinross
Chris Papadopoulos
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.
Sep 27, 2007
Cody
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!
Sep 27, 2007
johno (iLT)
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.
Sep 27, 2007
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.
Sep 27, 2007
Kari Pätilä
Cody
Negative word spacing might be suitable for headlines, but negative letterspacing makes me a bit cautious.
Sep 27, 2007
johnbillion
Why on earth not? Johno, do you have an example or a link to an article about why this is deemed bad practice?
Sep 27, 2007
johno (iLT)
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).
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,
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:
where the class is defined,
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.
I’d love to hear what others have to say on this topic.
Kari
I can understand your caution.
Sep 27, 2007
sallyyi
It was interesting to why you choose A List Apart. I love this blog!!
Sep 28, 2007
Hamish M
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.
Sep 28, 2007
Miska Närhi
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.
Sep 28, 2007
Cody
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.
Sep 28, 2007
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!
Sep 28, 2007
johno (iLT)
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.
Sep 28, 2007
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.
Sep 28, 2007
klingsor
good post. typography it’s coming back!
Sep 28, 2007
Dumitru
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! ^^
Sep 28, 2007
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).
Sep 28, 2007
Cody
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.
Oct 1, 2007
sally li
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…
Oct 1, 2007
tylor
I just finished reading that Bringhurst quote this morning… interesting to see how prolific that book really is!
Oct 2, 2007
Roger Gordon
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.
Oct 6, 2007
johno (iLT)
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.
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.
Oct 7, 2007
Aristotle Pagaltzis
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.
Oct 11, 2007
Nolawi
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….
Nov 26, 2007
Grego Borisov
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 ;)
Apr 24, 2008