A guide to Web typography

Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

First, it’s worth noting that Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained monkeys were able to correctly identify Helvetica 90% of the time.

helvetica monkey

Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients. If you’ve ever tried to cook a soufflé, you’ll know how important the recipe is. Follow this recipe and your typography will rise up like … that’s enough of the culinary metaphors, let’s cook:

Contrast

Pale pink text on a pale blue background, might match your t-shirt, but it just doesn’t read well. Text exists to be read; make sure that it contrasts enough with the background to achieve that. If you’re ever unsure about contrast, then take a screen dump of your page, open up your image editing software and reduce the image to grey-scale. You’ll soon see if you have enough contrast. Robert Bringhurst, the consummate typographer writes, typography exists to honor content. Are we honouring the content, if we design our pages in such a way that the text, the content, is difficult to read?

Contrast

Personally I dislike reading long stretches of reversed out text (i.e. light text on a dark background); how often do we see books set like this? It may well be appropriate for shorter stretches of text on-screen, but I find it very tiring to read for any length of time.

Size

With the birth of Web 2.0 I noticed a rather annoying trend; namely small type. I’ve even emailed site authors and kindly suggested that they increase the default font size. I’ve received mixed replies from, tough, get yourself some glasses to thanks, I’d never even considered that my type might be too small for the average reader. I’ve even heard tiny body text defended with, “it matches my minimalist design”, or similar. It most likely reflects a small something else. Unless Super Man and 20/20 Vision Girl (Marvel Comics, keep your hands off, she’s mine) are your only readers, then small type is just not on.

is your type big enough?

Don’t set body text below 10 or 12px and, if possible, make it bigger. Remember, what’s legible on your 65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook. If in doubt, make it bigger. The body text on ILT is set at 16px.

Hierarchy

Varying type size is one of  the best ways to differentiate content. Colours and pretty boxes might help, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages’ elements. It also means that if your readers are in a hurry, they can quickly pick out the important bits — and that could mean that they stay longer and read on.

hierarchy can be achieved in many ways — just remember to be consistent

Hierarchy can be achieved in other ways too. We’ve just mentioned using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.

Space

Let your type breathe. Don’t be afraid to leave blank spaces in your pages. This negative or white space will help focus attention on the text—and it’s the text that speaks loudest, so let it be heard. Next, remember the line-height CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size (remember, I’m writing about web typography here). Good type designers put a whole lot of effort into the micro white space that sits inside type. They spend countless hours attempting to achieve a balance between the black of the type and negative or white space that it envelops. Likewise, we should take time to consider the macro white space, the ‘voids’ that shape our blocks of text.

space, not to be confused with nothingness :)

Remember, these are not rules, but rather guidelines. However, follow them—contrast, size, hierarchy, and space—and your typography will rise like one of Gordon Ramsay’s Soufflés. Oh, and I was only kidding about the monkeys.

In a future three-part series on the fundamentals of typography, I’ll look at all of the above in more detail. I’ll also be discussing numerous things (details) that will go a long way to improving your typography both on- and off-screen.

What works for you? Do you have some tips you’d like to share?

This post is an extended version of an article I wrote for the British .net magazine.
Subscribe to ilovetypography.com


  1. Excellent guide. I wish every designer out there (and everyone those designers answer too) had “Space! Don’t underestimate it” stenciled onto their desks.

    On thing that I notice all the time on the web is poor kerning. A title set in 24px Helvetica Neue looks great, but not if there’s the default space between the letters. Use CSS to set letter-spacing: -1px or -2px, play with it. Remember: tight but not touching.

  2. Fantastic article, this is really great advice John.

    By the way, I love the monkey. Great blending on the hair there. That’s no easy task. Hehe.

    Of course, I don’t think even that can match your example of Space. Pure brilliance.

    Looking forward to more. :)

  3. Justin
    Apologies that your comment found its way into the hellish void that is Askimet’s spam folder. Odd. You make a good point about tighter spacing in titling.

    Hamish
    Thanks. The monkey could have been better (don’t zoom in, or you’ll see how poor it really is). Did you notice that I lost my hatch marks/dumb quotes (15 inch and 65 inch). I wonder how I can get typogrify to let those through?

  4. I think it’s unfair to criticize reversed type by pointing out that books don’t use it. I’m gonna guess books rarely use reversed type because it will cost quite a bit more to print, and because you have to worry about the dark color bleeding into the letters – two issues that don’t exist with screen type.

  5. I’m always impressed with sites (like this one!) that manage to practice good typography. For me, the web has always been somewhat antithetical to good typography — the paucity of standard web fonts; the vagaries of CSS and HTML rendering engines across browsers, versions, and platforms; the varying sizes and resolutions and shapes and technologies of computer monitors; user preferences that can override designer preferences; incomplete typographic support (e.g., faux small caps in most browsers); etc. etc. Hacks have come and gone to increase the availability of fonts (WEFT through sIFR), but the web remains such a hodge-podge of standards and malevolent flexibility that it’s something of a miracle that there are any beautiful sites at all. It’s gotten to the point that every new site I develop I even think about doing it all in Flash. How sad is that?

    Oh, and david gouch makes a point…

  6. Mahoney

    Ditto on the small type. I actually think the small type thing is a holdover from late 90s web design where EVERY.SITE.ON.THE.INTERNET. was set in 10px Verdana. There’s just no reason not to have a more comfortable font size, especially since there are logistical concerns with line length and small fonts means little space taken up before you cross those thresholds.

  7. David
    I wasn’t criticizing reversed out type per se. In fact, the contrast illustration demonstrates that it can work. Interestingly, reversed-out type on a display can actually look fatter than black text (at the same size) on a white background (the opposite of what happens in print), owing to, what I think they call, flare. However, I don’t think that cost is the only barrier to the reversed-out novel. Perhaps I will be proven wrong. Thanks for raising this. I’d be interested to know what others think about it.

    Alec
    What I find most frustrating is how different browsers render the same page in so many different ways. The printed page in contrast is just about immutable, and you know (unless your printer fowls things up) that those tiny details you’ve worked so hard to get right, will be honored by the ink and paper. I guess it’s about making the most of what we have. 400 years ago, typographers worked with fewer tools, and yet they produced some of the most beautiful pages ever to grace this earth (pages that I could only dream of making). And as for the web (and screen fonts), things can only get better. My first computer was a ZX-81, and—thankfully—we’ve come quite a long way from that.

  8. Great article. And since you mentioned Robert Bringhurst, I thought I’d mention the very useful Elements of Typographic Style Applied to the Web.

    — Next, remember the line-space CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size. —

    And I hate to be “that guy,” but I think you meant line-height, not line-space

  9. Mahoney
    You make a good point about font size in relation to line length. More about that in a future article.

    John
    Thank you. And thanks for posting that link—it’s a great resource.
    Well, if you hadn’t been “that guy”, I’d never have noticed; you’re absolutely right—line-height it should be.

  10. The other side of the coin:

    We, as web designers, are not restricted by any of the trappings of print. We can have fluid text, allow for resizing, even animate. Rather than looking at print and seeing what we can’t do, it’s good sometimes to look at print as a restriction, and celebrate all the things we can do now that we’ve shaken off this analog coil.

  11. Man. You suckered me right in with the monkey business.

    Might have to do that for my senior project…if only monkeys weren’t so hard to come across in Iowa. Maybe I’ll use Communication Studies faculty instead. They do all their powerpoint presentations and word documents in Arial.

    Every. Single. One.

  12. Wow — I had to look up the ZX-81 — never heard of it before. It looks pretty cool, anyway. My first computer was the Victor 9000, which could dual-boot MS-DOS and CP/M 86. And it had double-sided floppy drives. I remember saving up for my Victor, and by the time I was ready to buy one, IBMs were out with color monitors. And I remember saying to myself “Whatever — as if color matters. All I need is black and green.” I guess we have come a long way after all.

  13. Great topic! I’m finding that type for screen-reading is such a different animal than for print. Especially when i’m designing on-screen, and actual size renders at 133% on my screen. Who knows what size it will look like on everyone elses’s monitor??

    Also, i sometimes get irate emails back from people that my email font is way too tiny to read comfortably… not from everyone, only SOME folks. Then i make it larger, wondering if OTHER folks think “geez, she’s such a dork using that HUGE type!”

    *sigh*

  14. John
    Good catch. I thought that case was handled, though apparently it’s not.

    A bit of digging shows it’s the SmartyPants filter that’s doing it, seems like it doesn’t handle units and quotes like that. I think the best solution would be to reverse the effect with a pass from Typogrify, e.g. check for any set of numbers followed by quote, and dumb down said quote if necessary.

    I’ll look into it.

  15. See also:

    Compose to a Vertical Rhythm
    http://24ways.org/2006/compose-to-a-vertical-rhythm

    Web Typography (semi-cheesy site look IMO, great content)
    http://www.safalra.com/web-design/typography/

    A List Apart : How to Size Text in CSS
    (who would do well to increase their font size… ahem)
    http://www.alistapart.com/articles/howtosizetextincss

  16. Lately I’ve been using letter-spacing: 0.01em; (roughly, depending on your base size). It gives *just enough* space between letters to make it a smidge easier on the eyes, to keep the flow between words.

  17. Great post, as always. I am loving the technical, yet passionate work about Type on this site.

    I will definitely be keeping these guidelines in mind as I work on some new sites.

    Thanks!

  18. Tlönista

    Minor nitpick: the “monkey” is an orangutan and therefore…an ape.

    OK I’ll read the actual article now.

  19. This is a great article. thanks! I’m forwarding the paragraph about white space to the people I work with that write the copy. Copy writers need to remember that. :)

  20. Great article, as always, Johno! Except… that’s an ape, not a monkey. :)

    [edit to point out my slowness: apparently Tlönista noticed that too.]

  21. Heidi, you can probably fix your email problem by finding the option to turn off composing email in HTML format and do it in plain text instead.

    In ye olden days, it was considered the height of rudeness to send email in HTML, but it only takes a couple of programmers threatened with the sack before every manager who dreamed of sending their messages in all-caps magenta Comic Sans found they had it their way.

  22. I’m so glad that I read this article all the way through, not only for the refresher, but so I didn’t start telling everyone I know that monkeys can identify Helvetica.
    After visiting this Arial or Helvetica quiz, I know the primate would give me a run for my money.

  23. I took the liberty to augment your list with three more tips.

    Thanks for making web designers conscientious about their type.

  24. Increasing the line-height works when using light-on-dark, just make sure it doesn’t throw your baseline out of whack.

    Also, this little nugget of info is great.

    I second your points Silviu. I try to make linkes 60-70 characters long.
    And don’t use text-align: justify; because it doesn’t work well enough yet.

    Thanks Johno

  25. Yeah, text size is really tough, because there’s so many factors: browsers, individual settings, monitors, resolutions.

    What looks great on my cheap, little laptop turns ridiculous on my widescreen monitor at work.

    And vice versa.

  26. “Next, remember the line-space CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size.”

    I often use a font-size to line-height ratio of 1 to 1.5 for internet stuff to make mentally calculating things a bit easier.

    “Personally I dislike to read long stretches of text reversed out”

    Regarding the bit about contrast, I personally don’t mind darker sites, but such a large percentage of people dislike that look so I tend to shy away from that.

  27. I anticipate the forthcoming in-depth articles : D
    You da man.

  28. Adrian

    Excellent points. I also have noticed the *flare that occurs with ‘reversed out’ text. But I kind of like it. I’m building a site right now that ILT has inspired me to build - using white and grey on black mostly. But the content will be in short bursts, with plenty of spacing so I consider it to be OK. I also will be experimenting with fonts and serif/sans serif style switching on the fly. My CSS will include new Vista fonts that are pretty slick. Johno, any thoughts on those fonts? (ie. Cambria, Calibri, Candara, Consolas, Constantia and Corbel)

  29. Great article as always John!

    One thing that’s always impressed me is that even with a limited number of web fonts, there are so many websites out there that are differentiating themselves with creative use of only those fonts. It makes me want to forget about sIFR for now. (I still think you should write an article about sIFR though!)

    I’ve been meaning to do a complete overhaul of my site, but I didn’t know where to begin. Now I’m feeling inspired by your “recipe.”

    Keep it up John!

  30. Good advice John. I have really seen a big change in recent years of amazing web typography. I remember back in the yahoo geocities days it was comic sans this, comic sans that ha ha. Yeah tiny type gets on my nerves too, but usually the things that are ridiculously small aren’t worth reading anyway.

  31. mwanafunzi

    Great article, can’t wait for the follow up.

    As for font sizes information architects japan have written a very interesting article..

    The 100% Easy-2-Read Standard.

  32. i’m new to typography and it was very helpful!

  33. oh, I’m so glad you’re covering Web typography on iLT, John. Thanks so much. I think the small font size became rose in popularity because of Flash, and then people were trying to fit everything on a page without having to scroll it down, and I think you’re right about the age of designers who use very tiny font size on their sites - most of my students, aged 18-20 who were very much into Flash suffered from this tiny font size.

    Regarding the reversed out text: a colleague of mine was complaining of having a headache from spending too much time reading from the computer screen (he’s an editor), until another colleague of ours suggested him to reverse the colour settings on his Mac, which he did and admitted that the headache was gone and he doesn’t have to strain himself while reading from the screen.
    I also know many programmers (I don’t belong to this category) who like to write code by switching the colour settings in their editors to be light text on a dark background.

    I’m not trying to defend light on dark schemes here, but I do think that when designed well light on dark can be as easy on the eye, as dark on light. Also white background on a screen is much more bright than white paper in a book, don’t you think so?

    Oh, and I hope you’d be also covering in your Web Typography articles the efficient and beautiful type combinations (web-safe) achieved with CSS and Hierarchy, kind of how you demonstrated that Hierarchy example in this post.

  34. TypoJunkie

    I completely fell for the “ape” joke (Discwolrd anyone?); here I was thinking: “I wonder what Helvetica was compared to; I’m sure it’s easy to spot next to Zapfino, but not so much vs. Akzidenz”.

    I Completely agree with the lack of white space in design; as I like to say: “White space is your friend”.

    Anyways, the article comes in handy as I’m about to design a couple of websites, so thanks!

  35. I think that these are very important guidelines! Everyone should know these things if you think you’re ever going to be a graphic or web designer. It makes the web a much easier place to read and look at. I dread the sites with low contrast background and type, and I often opt for my own style sheet for these sites. Good post.

  36. These are very helpful reminders. Love this site and look forward to each new post!

    Agree with small type size issue - and it looks like CSS has helped this problem.

    Another pet peeve of mine is too many different styles - in other words using 4 different typefaces instead of sticking to two. I remember reading somewhere that exceeding 3 different typefaces on the same webpage is pushing it. Of course, there are exceptions to every rule.

  37. Cool info on typography. Definitely not being afraid of white space is important!

  38. Great article!

    There aren’t many sources about on-screen type, and it’s a whole different business than on print!

    I loved the ‘space’ bit hehe. Also you might as well have shown in the font size section, a comparison with the same text, in order to see how much screen each of them actually take ;)

    Didn’t you talk about pixel fonts? They’re our savoiur when designing flash websites!

  39. Si

    “Back in the days of IE 1.0, good web typography was something of an oxymoron.”

    IE 1 included the non-standard (at the time) FONT FACE tag, so although you’re right it really wasn’t possible to display good web typography in IE 1, there was no way to specify fonts at all to show up Mosaic or Netscape. So maybe Mosaic would have been a better example. Also in Mosaic the user defined the appearance - the reader could pick the font used for P’s and different H levels.

  40. Very nice article. Love your site, love your stuff - am an avid RSS reader and web designer :) .

  41. Remarkable!! I am a developer with a heart of a designer and the one area I fail all the time is in the Typography department and the way you worded and laid out your post(s) has really shed some light on things.

  42. Leon Paternoster

    I’ve been thinking about font size recently. I tend to use a minimum of 14px for ‘subcontent’ (e.g. a list of related links below an article) and 16px for main body text, leading 24px across the site. I’m just wondering if using smaller font sizes is *necessarily* a bad thing if the leading is increased proportionately. Examples of small text/big leading occur on ALA and Mark Boulton’s page. Personally, I’m for big text all the way, as long as white space is employed liberally as well (16px Georgia is surely the web’s best looking font, but place it within 50px of anything else and it looks cramped). Are there any studies on this sort of thing?

    As a sidenote: maybe something on how all these design elements relate to each other would be interesting.

    Really useful article - the more ‘4/5/6/x steps to …’ articles we get the better. This way some useful conventions will emerge. Also see iA’s list.

  43. Justin
    Good point. That’s a positive way to look at at: designing for the web certainly does open up numerous possibilities that we should celebrate. I also like that that I can go back and correct my types, even after publishing :)

    Justin (the other one)
    Looks like you’ve got your work cutout. Go firth and preach the word.

    Alec
    That you had never heard of the ZX-81 made me feel quite old. Your Victor 9000 would certainly have out-performed my ZX-81 with a clock speed of 3.25 MHz. However, I did upgrade to the maximum 16KB of RAM! Boy, did she fly.

    Heidi
    That’s certainly one of the greatest challenges. I’ve had a few shocks myself, when looking at my own sites on someone else’s screen.

    Hamish M
    Thanks. I wonder if it’s possible to introduce a tag that is ‘ignored’ by the SmartyPants filter; e.g. if content withing xyz tag, then don’t filter it? Thanks for taking a look.

    Jeff Blaine
    Thanks for the links. That second one has an interesting piece on drop-caps (especially their use of the CSS :first-letter pseudo-element); really difficult to get them to display as intended across different browsers.

    Brian F
    Negative letterspacing for titles only, you mean?

    Brad
    Thanks. More guidelines to come.

    Tlönista & Ian Stewart
    Point taken. Thanks. Should have used a Chimpanzee :)

    Katie
    Or just send them a blank sheet of paper or a blank email with the subject line, the importance of white space. :)

    Rick Hemsley
    I find plain text or rich text best for email.

    Samantha Armacost
    Thanks for the quiz link. That’s the first time I’ve seen it. Certainly not so easy on-screen. I scored 10/10, but had the text been smaller, it would have proven more difficult (especially so on-screen). Anything with a ‘t’ or an ‘a’ is very easy, though some of the caps are very difficult.

    Anyone who reads Mark Simonson’s wonderful How to Spot Arial should be able to score well. See also Arial vs Helvetica.

    Silviu
    Thanks for the additional link; I’ll take a look now.

    Dylan
    webtypography.net is a great resource. And yes, text-align: justify is difficult to control, especially for narrower columns. More on that in the next installment.

    JakeT
    Yes, that’s a another challenge in addition to the rendering capabilities of different browsers.

    Chris Papadopoulos
    150 can work too. Every text size and line length will require different values. Tiny text set at 150 might look a little loose and floaty.

    Dave
    Thanks. Should be published within the next month.

    Adrian
    I haven’t spent any time looking at them. I’m a Mac person; however, I will take a closer look some day, and let you know what I think. I’ve noticed a few sites beginning to reference them.

    Nour
    Yes, I’ve been meaning to write something on sIFR for ages. I know that many have difficulties implementing it, so I really should get on and finish that draft article.

    Robert
    Yahoo geocities—that’s a blast from the past. I wish someone had kept an archive of those sites; perhaps it exists somewhere? Well, I guess we have MySpace :)

    mwanafunzi
    Another good link. Thanks.

    jacoov
    Good to hear. See you again for part two.

    inspirationbit
    Interesting what your friend says about reversed-out text. I must admit to using a screen-dimmer app’ when reading black on white on-screen, for any length of time. Light blue also works well. I know a number of writers who use a light blue background when writing on-screen. This is something I certainly have to look at in more detail. And, yes, a white screen is very different to paper, as the ‘white’ is achieved by throwing more light at your eyes.

    TypoJunkie
    I should have created a mock scientific paper on the topic :) Let me know how you get on with those web sites.

    Zach
    Me too; I use my own style sheets for a couple of sites I read regularly—fortunately, the content is good enough to merit this. I also find myself hitting command quite often.

    Lydia
    Yes, there’s a limit to how far we should mix things up, though I know of numerous examples (from good typographers) that use quite an array of styles and types to good effect. But as a general ‘rule’, it’s certainly best/easier to use fewer.

    Alphabetix
    Thanks, and welcome to iLT.

    Si
    You have abetter memory than me. Thanks for for clarification.

    ZombieLoffe
    Pleased to hear it. Thanks for taking the time to say so.

    Benjamin Sterling
    Good news. Stay tuned for part two, and feel free to dig around in the archives.

    Leon Paternoster
    Mark has written some good stuff on typography. I especially like his Typesetting Tables, but I admit to hitting command when reading his web site. Good idea on 4, 5, 6, n steps.

  44. gosh, John, I really admire your dedication in answering every single comment on your site. I bet it took you longer to write this detailed reply to everyone above than to many bloggers it takes to write and publish a post. Thank you.

  45. inspirationbit
    Thanks, Vivien. I’m impressed that you and so many others take the time to leave a comment. It’s a pleasure to read and respond to them.

  46. Johno
    But surely I’m the oldest person on this interweb thing! Actually, it looks like our computers came out about the same time — from what the interweb tells me, the ZX was primarily a European success story, which is why this old, North American, insular guy never heard of it.

  47. Alec
    I later went on to buy the ZX Spectrum with a massive 128KB RAM. I was the envy of all my classmates (for a few days at least). Makes me think that I should do a type used on computer keyboards thing. Pointless, perhaps, but fun :)

  48. Great article. Even though I enjoy reading about typography, I always find it difficult to implement it. This will surely help to keep in mind…yes I know my site sucks, but hell….one day…with this kinda articles….;)

  49. Thanks for the great article. It’s good to be reminded of basic design elements especially when translated to the web. I would have liked to see a little discussion on web fonts. As browsers evolve, we as web developers can see what versions people are using and can adjust our CSS styles to fit our audiences. However, I’d like to know when the “safe for web” fonts list will expand. Aren’t Helvetica, Tahoma, Lucida, and other fonts widely available on most computers?

  50. Leon Paternoster

    Load “”

  51. I’ve found it helpful to make a bookmarklet that makes hard-to-read websites more legible. The “Legiblize” bookmarklet increases the font size, changes the font to Palatino, and increases the line spacing: http://jonaquino.blogspot.com/2008/02/firefox-bookmarklet-for-making-webpages.html

  52. “Space, don’t underestimate it” very nice.
    I’m so guitly of doing all these things wrong. I don’t even do the font choosing part. How lame am I? hehe I don’t use black backgrounds very often though, it looks unprofessional.

  53. Mario
    Thanks, and good luck with your site.

    Nicole
    I’ll be discussing those points in future articles. Thanks for your contribution.

    Jonathan Aquino
    Sounds like an interesting idea, though Palatino wouldn’t be my preferred choice of font for the screen. I’ll take a look. Thanks for the link.

    Buck
    Well, we’ve all got a lot to learn—me included :)

  54. SmartyPants (used in Typogrify) won’t curl your quotes if you escape the character with a backslash: that is, just type 65" instead of 65” to get the desired typography.

  55. Tracy

    Neat article - I liked it, but I would like to point out that Web 2.0 more often than not features large type, and is in fact one of the characteristics that mark 2.0 design style. It’s the pre-web 2.0 in which 10px and even 8px fonts were popular. ;)

  56. Lucas
    Just tested that, and your absolutely right. (As your comment proves)
    Thanks!

    John
    So as Lucas said, all you have to do is escape the quotes.
    65\", 5\' 10\", etc.

  57. One existing, standardized use of light-on-dark is in movies. For decades now we’ve been accustomed to having an opening using light text on a completely black background.

    Early films had title cards with dark-on-light type, though. I wonder when the shift occurred?

  58. Lucas
    Many thanks for that. I’m off to change them now. I guess that’s what Leon did in his comment above.

    Tracy
    I could have sworn nascent Web 2.0 had at least a brief love affair with small type—though when you get to my age, memory can’t always be…what was I saying?
    Thanks for contributing.

    Hamish
    Thanks for testing. I knew the typogrify plugin couldn’t be beaten by a little dumb quote :)

    James
    Very good point. I remember reading the rationale behind those choice at those times; off to dig out the reference.

  59. Fantastic article, this is really great advice John.

    By the way, I love the monkey. Great blending on the hair there. That’s no easy task. Hehe.

    Of course, I don’t think even that can match your example of Space. Pure brilliance.

    Looking forward to more. :)

  60. I believe line height is one of the keyfactors in increasing the readability of text. For adjusting your css style use this easy tool http://csstypeset.com/.

  61. This is an excellent intro to using proper typography. Proper spacing and size is often overlooked on most sites and blogs. There is a fine line between poor and wonderful and it does take skill.

  62. Really great article, many interesting informations, thanks !

  63. Hi John!!!! I know I’m way late on commenting; I was on vacation last week and we’re still getting ready for our big show at work… yes, bad time for vacation! Just wanted to say you’ve done it again! Another excellent typography article. But then again, I’m sure you know that by the 100+ comments and 50+ trackbacks and counting. This one is definitely going to my del.icio.us bookmarks!

  64. Herb Boeckenhaupt

    FYI for all font afficiandos! In the near immediate future, WebfontZ will announce a product that will create a virtual font-use tsunami on the internet. Using WebfontZ, through the addition of one single line of code with accompanying CSS tag declarations, and TTF font can be displayed on webpages.

    There is no browser install, no font downloads, not gymnastics. Just pure TTF fonts with a ton of special effects, all controlled via CSS or created in the WebfontZ Studio and c/p the CSS into the page’s style sheet.

    Please monitor Google search during April for the official announcement.

  65. http://www.alexsteinweiss.com/as_index.html

    You don’t mention Alex Steinweiss in your album cover section…he’s the creator!

  66. Hi there! I loved your article. I’m trying to put a lot of effort in typography in my recent personal blog.

    I’m trying to set line height, letter spacing, etc…

    Could you give me a word if you think my type is readable? :)

    Thanks. Link is: http://www.paintbits.com/

  67. There are so many comments with much more compliments about your article to think about web-typography…

    thank you for your article, again :)

    Ralph

  68. This is definitely on my To Do List. I am not happy with the typography on my blog. I know that I can do many things to improve it. Thanks for the info, it was a very nice read. I look forward to more info.

  69. Nice article, thank you :)

  70. You don’t mention Alex Steinweiss in your album cover section…he’s the creator!

  71. Michael

    One thing that I’ve noticed since I went back to school for design is that small type is pushed hard in the print world. I have a feeling that this is where a lot of the small type on the web is coming from - print designers who have made the transition.

  72. good stuff… as i read i saw it being aplied on this site, so it made it much easier to understand your point.

  73. I enjoyed this article… if only we could get everyone that has a copy of dreamweaver (and thinks they should be making websites) to read it.

  74. There are so many comments with much more compliments about your article to think about web-typography…

    thank you for your article, again :) Ralph

  1. Metropolis—Mar 31, 2008

previous post: National News

next post: Sunday Type: the sound of type

October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 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