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.
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?
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.
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 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.
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
— Hochuli & Kinross
157 comments * comment * trackback
Justin
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.
Feb 28, 2008
Hamish M
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. :)
Feb 28, 2008
johno (iLT)
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?
Feb 28, 2008
david gouch
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.
Feb 28, 2008
Alec
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…
Feb 28, 2008
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.
Feb 28, 2008
johno (iLT)
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.
Feb 28, 2008
John
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
Feb 28, 2008
johno (iLT)
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.
Feb 28, 2008
Justin
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.
Feb 28, 2008
Justin
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.
Feb 28, 2008
Alec
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.
Feb 28, 2008
Heidi
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*
Feb 28, 2008
Hamish M
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.
Feb 28, 2008
Jeff Blaine
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
Feb 28, 2008
Brian F
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.
Feb 28, 2008
Brad
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!
Feb 28, 2008
Tlönista
Minor nitpick: the “monkey” is an orangutan and therefore…an ape.
OK I’ll read the actual article now.
Feb 28, 2008
Katie
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. :)
Feb 28, 2008
Ian Stewart
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.]
Feb 28, 2008
Rik Hemsley
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.
Feb 28, 2008
Samantha Armacost
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.
Feb 28, 2008
Silviu
I took the liberty to augment your list with three more tips.
Thanks for making web designers conscientious about their type.
Feb 28, 2008
Dylan
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
Feb 28, 2008
JakeT
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.
Feb 28, 2008
Chris Papadopoulos
“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.
Feb 29, 2008
Dave
I anticipate the forthcoming in-depth articles : D
You da man.
Feb 29, 2008
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)
Feb 29, 2008
Nour
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!
Feb 29, 2008
Robert
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.
Feb 29, 2008
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.
Feb 29, 2008
jacoov
i’m new to typography and it was very helpful!
Feb 29, 2008
inspirationbit
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.
Feb 29, 2008
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!
Feb 29, 2008
Zach
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.
Feb 29, 2008
Lydia
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.
Feb 29, 2008
Alphabetix
Cool info on typography. Definitely not being afraid of white space is important!
Feb 29, 2008
The Ad Mad
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!
Feb 29, 2008
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.
Feb 29, 2008
ZombieLoffe
Very nice article. Love your site, love your stuff - am an avid RSS reader and web designer :) .
Mar 1, 2008
Benjamin Sterling
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.
Mar 1, 2008
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.
Mar 1, 2008
johno (iLT)
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.
Mar 1, 2008
inspirationbit
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.
Mar 1, 2008
johno (iLT)
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.
Mar 1, 2008
Alec
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.
Mar 1, 2008
johno (iLT)
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 :)
Mar 1, 2008
Mario
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….;)
Mar 1, 2008
Nicole
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?
Mar 1, 2008
Leon Paternoster
Load “”
Mar 1, 2008
Jonathan Aquino
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
Mar 1, 2008
Buck
“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.
Mar 1, 2008
johno (iLT)
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 :)
Mar 1, 2008
Lucas Sanders
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.
Mar 3, 2008
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. ;)
Mar 3, 2008
Hamish M
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.Mar 3, 2008
James H.
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?
Mar 3, 2008
johno (iLT)
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.
Mar 3, 2008
oyun
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. :)
Mar 4, 2008
Sander
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/.
Mar 9, 2008
Chris Auman
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.
Mar 10, 2008
Martin
Really great article, many interesting informations, thanks !
Mar 10, 2008
LaurenMarie - Creative Curio
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!
Mar 10, 2008
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.
Mar 19, 2008
Dana Marie
http://www.alexsteinweiss.com/as_index.html
You don’t mention Alex Steinweiss in your album cover section…he’s the creator!
Mar 20, 2008
greven
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/
Mar 22, 2008
Ralph
There are so many comments with much more compliments about your article to think about web-typography…
thank you for your article, again :)
Ralph
Mar 24, 2008
Karly Barrett
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.
Mar 26, 2008
DjZoNe
Nice article, thank you :)
Mar 31, 2008
kız oyunları
You don’t mention Alex Steinweiss in your album cover section…he’s the creator!
Apr 8, 2008
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.
Apr 23, 2008
Keobs
good stuff… as i read i saw it being aplied on this site, so it made it much easier to understand your point.
Apr 24, 2008
David
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.
Apr 30, 2008
minikperi
There are so many comments with much more compliments about your article to think about web-typography…
thank you for your article, again :) Ralph
May 7, 2008