January 22, 2004 | View Comments (27) | Category: Design
Summary: Why web typography is just boring.
Not too long ago Dave Shea wrote an entry on type called the Extra Mile. Although it was a wonderfully written piece and very informative, all it did was leave me discouraged because on the web most of the cool things you can do with fonts just don't apply. If you love typography, then the web might not be your place.
On the web we are relegated to about 4 or 5 decent fonts to play with if we intend to make our sites as cross-platform as possible. And when I say "play with" what I really mean is to help make our sites look as decent as possible. If your operating system supports anti-aliasing a lot of websites will take on a whole new life, but as designers we do not control the users' OS. The best thing we can do is make our sites legible.
When it comes time to think about typography and my sites, my thought process usually goes like this:
Typography is a very exciting field to study. Too bad the web kills that excitement. When designing a website and you have to think about fonts, the only major decision that you probably will have to make is "what size?" Of course there are certain rules that should be followed, but we can save those for another day.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/117
I think there are more decisions that just "what size".
With CSS, you have control over other variables such as letter-spacing, line-height, Uppercase, etc.
Fonts are limited, but there are ways to pass the best possible font to the people who have it. Look at Zeldman's site for example. He uses a list of about 6 or 7 fonts, starting with what he prefers, and going down the line according to the equivalent available on each OS.
For years, I thought the only options were Arial(Helvetica), Verdana(Geneva) and Times New Roman.
I have recently begun using Trebuchet on sites that I know (from stats) will have large amounts of windows users. Georgia is a great looking font for titles. Once it gets above 16px or so, it really starts to look nice. Nothing like the blocky, pixelated look you get when using it for body text. Tahoma is another nice windows font.
On the mac side, Lucida Grande is really nice.
Don't forget the classic Comic Sans font! :-)
If you are designing an Intranet, you can always make sure that certain fonts are available on all systems, which really opens the font selection wide open.
If anything, you can always use FIR (or other alternatives) to use images as titles while still providing text for non-styled versions of a page.
Jeremy Flint (http://www.jeremyflint.com)
Comic Sans? Are you serious? Every time you use Comic Sans God kills a kitten somewhere...
David House
It's because of things like this that I'd like browsers to better support the embedding of fonts. Then designers would be free to use any font of their choosing, as long as they didn't mind having to require the user's browser to download the fonts.
milbertus (http://www.milbertus.com)
I believe in CSS 2 or 3 (3 I think), there is support for having a font stored on your server that can be called up and used in the page the same as an image or anything else. If that makes it all the way into browsers, someday in the next decade (or two depending on IE) maybe, just maybe, web designers can pick any font they want.
Josh Jarmin (http://www.radiantrock.com/blog/)
I would argue that Geogia isn't all that. I have an older pc at home (to temporarily replace the dead laptop) and absolutely every website (including Whitespace at one time) which uses Geogia just breaks the font into something unfriendly to read.
I have a screenshot I did for Bigha when they were looking for reviews on 37signals. All their text was in Georgia - the header is a graphic.
This is what I saw -
http://www.lightpierce.com/4_ek/screenshot.jpg
Mark Fusco (http://www.lightpierce.com/ltshdw)
Yes, Comic Sans was typed with extreme sarcasm.
I believe I made the point that Georgia is nice when used for larger text, like titles. I am not a huge fan of it as body text either.
Jeremy Flint (http://www.jeremyflint.com)
...Georgia is nice when used for larger text
I would agree with you generally, but my point is that my machine replaced Georgia with something else entirely.
In my case, on the old machine at home, it looks bad and is hard to read as either a title or text. On the machine I use at work, it looks just fine.
Mark Fusco (http://www.lightpierce.com/ltshdw)
Here is an interesting question; why should the fonts be locally installed anyway? I mean, ya as it stands today they would have to be installed... but could a technology be created to allow for server based fonts that can just be acessed and viewed?
Ask yourself do you have to install an image when you view it for the first time? Do you have to install a new SVG file on the first time you load a SVG graphic? Do you have to install a color each time you view a specific color for the first time?
Maybe it's not about bitching about how fonts are limited on the Web, but more about what are we going to do about it. I think if the W3C started working with the OS manufactures and browser manufactures we could have a reasonable technology in place.
Why doesn't this exist today? I don't know, perhaps it's because not all fonts are free, just like not all MP3's are free. Someone had to make it, so someone is going to ask for money for their work.
Back to fonts... I think maybe it's time we start thing outside of the box and on the server instead.
Nick (http://www.digital-web.com)
So then is the best use of typography the one you do not notice? Or is it really worthwhile to put some time into the typography of a website if no one is going to notice? Obviously I am playing a devil's advocate role here.
Scrivs (http://www.9rules.com/whitespace/)
In regards to having fonts on the server and downloaded to the client are all fonts packaged the same way with every OS? If so then I could see this being a simple solution. However, if you have a Mac and a Windows machine who package their fonts differently, well then you can imagine the problems there.
Scrivs (http://www.9rules.com/whitespace/)
...best use of typography
Considering the multitude of platforms and devices out there, and how they handle css, standards...in addition, the popularity of viewing content via rss aggregators - I would think that the most important element of typography (until CSS3 or some other "out of the box" strategy comes along) is that is be un-noticed and legible. Save your fancy typography for other collateral.
Mark Fusco (http://www.lightpierce.com/ltshdw)
I agree - we need more choices. Sure, CSS can help control leading and kerning (to an extent) and so on, but the limited choice does in the end mean limited design.
Of course, this is only a problem if you care about web standards and accessibility!Otherwise you'd use images or Flash for every piece of text!
Long ago there was the ability to send font information with HTML pages, but it never took off - probably because the font had be saved in an alien file format. Also, I can see possible licensing issued with font foundries.
Its still my preferred method though - embed the font information, just like Flash or PDF does. We'll have to wait a long time I feel!
Jon Hicks (http://www.hicksdesign.co.uk/)
I third the opinion that CSS leaves you much more stuff to play with than just font size. There is also the matter of using *correct* typography. This means using the actual opening double quote ( “ / “ ) rather than the one that means minutes ( " ), or using the real em dash ( — / — ) which I think adds a lot to the visuals of text set in the body of a paragraph. There are also the real quotes ( ’ / ’ ) etc.
There’s a very good article on this at A List Apart. It can be found here:
http://www.alistapart.com/articles/typography/
Also, for what it’s worth, I think the much-maligned headers in Zeldman’s redesign all have beautiful typography, both in font selection and it’s usage and balance.
sergio (http://overcaffeinated.net)
And of course, since the comments are rendered in Arial, all my formatting goes down the drain unless you increase about 10 point sizes. Crap.
Oh, well. At least the em dash is the correct lenght. Damned Arial.
sergio (http://overcaffeinated.net)
Why not use those other fonts? The stylesheet allows us to specify default fonts in case those other are not available. I do not seem to see the problem. >_
Zelnox
...Why not use those other fonts?
In terms of my experience, I don't know why my pc did not use one of the other fonts listed in Bigha's stylesheet - but it didn't and I'm sure if it happened on my pos machine, its a possibility it'll happen for others as well.
The major concern with specifying substitute fonts (which is a smart idea - don't get me wrong), would be to make sure that they have similiar spacing and leading / or if they don't you allow and calculate for the differences in your layout. This can be vitally important if you have type in tight spaces such as navigation.
Mark Fusco (http://www.lightpierce.com/ltshdw)
Bitstreamed fonts sucked, when that was 'the next big thing.' It never really took off... two competing standards and IIRC neither worked in IE (Of course that was back when netscape was king).
Real fonts (as opposed to font outlines)are often big files, and a user shouldn't have to download half a meg before your page will display. And of course there are also IP issues. Nice fonts are often quite expensive and their creators do not appreciate people giving away usable copies of the fonts. (which the server-based methods I've seen would do... dump it into the browser cache just like an image)
That said, I don't see anything wrong with having a zip file of a *free* font on your *personal* site so people can see it in all its glory if they want to. I usually do something like "goudy old style, garamond, book antiqua, times new roman, times, serif" (I don't like georgia. too rounded or something) -- goudy and garamond aren't as common, at least half of web users have book antiqua (no numbers to back that up, it just seems common), and of course times and so on are nearly universal, and serif for those few on older unix or amiga or whatever who don't even have a times variant.
The best way to get *your* font to display the way you want it to is to use Flash. The file sizes are usually considerably smaller than any image. Can't be read by a screenreader or indexed, but it gives you control. It also has the benefit of being selectable and copyable if you want people to be able to copy the text (requires using textboxes in flash, of course, but that's easy to do)
By the way, David -- you owe me two 17 inch monitors, a new keyboard, and a can of diet coke. I spit the one all over the others when I read your comment. Thanks for the laugh.
And standard typography should not be noticed beyond maybe a "that's nice and clear" by most users. A designer audience is of course going to notice and judge differently. Like anything else, it's your audience you have to consider in design.
JC (http://thelionsweb.com/weblog)
one item... the problem with using CSS to set kerning and leading is (IIRC) you can't set them on a per-font basis... that is, you can't say... if font is TF Forever Demi, use 12 point 1.3em line-height, but if arial, 10 point, 1.5 em line-height;
So if you give someone a list of fonts and then explicitly set things besides size, you can end up with overlapping lines and so on.
JC (http://thelionsweb.com/weblog)
Old but good article on webmonkey here:
http://hotwired.lycos.com/webmonkey/97/48/index3a.html?tw=design
I particularly like this...
"When designing type for the Web, I don't think much like a typographer. I think like a guy giving a drunken fratboy directions to the International House of Pancakes at 4 a.m. Typographic composition on-screen is not an exercise in specificity and exactness. It is a layered process that starts and ends with varying degrees of clarity and is intended to get someone with a limited attention span a little closer to enlightenment. "
JC (http://thelionsweb.com/weblog)
...I think like a guy giving a drunken fratboy directions to the International House of Pancakes at 4 a.m.
That has got to be the best summary on this topic ever.
Mark Fusco (http://www.lightpierce.com/ltshdw)
I can't help thinking that the idea of having a server-side font the user has to download so they see the page how the designer *wanted* it is like asking a blind person to listen to a text-to-voice reader in the accent they choose
martin (http://www.currybet.net)
Hello all...
This article got me thinking, and I'm trying to compile a list of alternative typefaces that are often isntalled on computers these days. Help me out, if you don't mind. :)
http://jeffcroft.com/blog/archives/000133.php
Jeff Croft (http://jeffcroft.com)
FONT IMBEDDING!!!
Would to God we could embed fonts. That's the only reason people are forced to use flash.
shaggy (http://lucen8.com)
http://hotwired.lycos.com/webmonkey/design/fonts/tutorials/tutorial2.html
fonts can be embedded. it's just a pain in the arse and doesn't work very well and isn't supported in all browsers. Not sure how accurate the info in the article is though, since it's from 99
JC (http://thelionsweb.com/weblog)
A nice example of beautiful Georgia:
http://buttonmonkey.com/mindset/
(thanks, JC :))
David House
Not too long ago, I searched for a new font for my programming editors - that might be interesting to some reading this discussion; the links to alternatives are in this entry:
http://kadyellebee.com/mt/past/2003/11/008719.php
:)
kristine (http://kadyellebee.com/)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
Typography with the web is subtle. Usability trumps aesthetic value in this field, and the most important thing is legibility.
That doesn't mean we're limited to verdana. Trebuchet MS can look awesome, Georgia is an great font for headers and body text if used right. Arial looks good with some letter-spacing adjustment. Times New Roman was explored (http://www.mezzoblue.com/archives/2003/07/24/times_new_ro/ ) by Dave Shea a while back, and it remains one of my, if not my favourite web font. With the correct application of CSS control, anything can look awesome.
The only problem we have with web typography: good typography is so subtle you don't notice it! If something is legible whilst complementing the design, you're much more likely to say 'Wow, great design!' than 'Wow, great type!' (http://www.csszengarden.com/?cssfile=057%2F057%2Ecss 'This is Cereal' springs to mind, as does http://modulo26.net/daily/ The daily flight.)
David House