We’ve used Yanone+Kaffeesatz & Cuprum from the google font directory for our latest website. It’s great to have something different to work with than the usual suspects.
I really HATE the idea of custom fonts or fonts that vary too far from a classic sans-serif face because to be brutally honest, I can’t read them anymore.
That is my greatest fear regarding @font-face, is it’s going to turn the internet into a giant illegible mess of ineptitude akin to garbage websites like the New York Times. (which we had a thread about before I believe).
Personally, I like Arial – it was DESIGNED for screen use. Sure your artsy fartsy Mac zealots crap on Arial from orbit, but frankly given the blurry useless illegible mess the Apple font renderer is combined with the garbage epileptic crack addict kerning… I REALLY have to wonder what the devil is in that kool aid. Steve-O’s RDF in full effect?
… of course that’s before we talk the total disaster that is font rendering on Linsux or anything else that uses freetype – where you can’t even rely on the same word rendering the same way twice on a page in the same font-face and font-size.
Because of course, having the letter i’s position dance around like a mexican jumping bean and the kerning randomly changing just based on how many pixels from the left edge it is ends up just SO legible when working with text, and is of course SO much more true to print than how Windows does it… RIGHT.
Bottom line for me, use something LEGIBLE – you go and shtup your site with some goof-assed fancy font that flushes usability down the toilet, makes scrolling painful on anything less than 3ghz, and doubles your page load time…
Enjoy your 50%+ bounce rate.
Yeah, I like Arial for a screen font on a Windows PC too.
From an untypographically educated point of view (mine), the reason Mac users don’t like Arial is because although the PC version works well on Windows, the Mac version sucks. This is due to the difference in the way fonts are rendered PC/Mac (additive/subtractive). As a result there is a big difference in the way Arial and Helvetica look in head to head comparisons on a Mac monitor. Helvetica is nice and smooth, Arial is fuzzier.
Thank you all very much for your comments!
I’m going to be different here and say I like Georgia … in certain circumstances, where it suits the design better than a sans-serif font. Usually mostly for headings though, as it can become difficult to read on not-so-good monitors at smaller sizes compared to a sans-serif alternative.
It’s kinda sad, but there’s a reason that the web safe fonts are used so widely and things like text as images and sIFR are still in business. Until web browsers anti-alias text, about 80% of fonts look terrible in a web browser. That’s why I fundamentally don’t believe in @font-face; it’s a great idea, but most of the time it is being used to allow designers to make their website look awful.
That said, as long as you back up your fonts, there’s no reason you can’t use anything that looks good. As long as every font-family ends in Arial, sans-serif; or Times New Roman, serif; then get creative with your first choices. As far as I’m concerned this is simply adding progressive enhancement to your fonts and supporting the full range of what your users have available. I regularly use 5-7 fonts for my important styles so that I have a first choice backed up by several alternatives in descending order of how well they match the design I’m going for. Then I use my two ultimate fall-back choices to catch everyone who falls through (which is probably 50% of visitors or more). However, for those that support your preferred fonts it can make a dramatic difference in the quality of your site.
deathshadow - I know what you mean. Strange fonts and / or small font-size defeats the entire purpose of writing something in text in the first place.
awasson - thanks for the heads up. I don’t have access to a Mac, but I will probably add Helvetica to my stylesheet just before Arial.
I use Georgia all over the place: headers, forms, table headers, image captions.
It’s a large-x-height font like Verdana, making it much more readable at smaller font sizes than Times or Times New Roman.
It does however have hanging numbers, which I personally like but many people are bothered by it. To me, it reminds me of the old drug drawers they had in apothacaries: each tiny drawer had a number in Georgia (or very similar) and was filled with some Latin-named dried plant. Very cool. You can still see these in China often.
You can see this fuzzy rendering if you have a copy of Safari-for-Windows, or at least Safari 3… It seems they’ve changed many things about Saffy 5 to make it blend into the Windows OS more, so they may have removed the font rendering (I can’t remember and don’t have that machine on at the moment). But Safari 3 for Windows shows it quite well, and I’ve relied on it to give me an approx idea of how my fonts render on a Mac.
Quite using Mandrake from and early 1990’s as your reference. Seriously. I can’t stand the overly-thin ratty-looking Windows fonts you see in Word (but luckily, I rarely have to use that Abomination known as Word).
The only font rendering you can truly complain about in Linux is the terminal font (I get around this by using the terminal-emulator from the GUI instead of a real terminal).
You can also rightly complain about Firefox vs Opera getting influenced by Gnome.
One of my favorites is “Century Gothic”. Its legible and common enough to merit using in a font stack.
The siffr results I’ve seen on PC look jagged.
I used php generated graphical text on one site. It looked OK, but the technique is unreliable because the wrong font or a hair too small looks pretty bad.
If you click on the link below you can change the text by changing the query string:
http://omprakash.org/application/library/font_generator/font_generator.php?color=purple&text=Volunteer%20Abroad!
One issue I’ve had with cutting edge font technologies is that its hard to communicate their limitations with a designer, and it can become a big mess when it doesn’t look like they thought it would.
E
Pfft. Designers… excuse me while I tape up my mouth because of the string of expletives spewing forth.
If they don’t know the limitations of the medium they are working in, they have no business ‘designing’ a blasted thing! But again, that sort of thing REEKS of the “but I can do it in Photoshop” IDIOCY!
Their lack of knowledge=work for me
So no complaints here. Unless it gets totally out of hand.
E
OK so my favorite is arial, but for decorations I like wing dings except they are not supported on all screens.
Good call 
I like Century Gothic too. sIFR does have its limitations. I haven’t seen it jagged but I have seen it do some slight shifting when you resize the page. For the future, I’m shifting to @font-face myself.
Yup, I think it’s because when a designer sets type they choose the font, kerning, tracking. leading, etc… and they can have absolute control over every letter of the document but when you get to the web medium we tell them: “Ok, you have a couple of fonts and they’ll look kind of like this but there’s no guarantees…”. It’s a bit of a culture shock for them but hopefully it’ll get better.
Yeah, that’s mature 
It goes both ways. I’m not remotely talented with design but perhaps if you knew (or cared) about design yourself, you would have an appreciation of what’s involved from a designer’s point of view. It’s all very fine and well to complain but if you aren’t part of the solution… Well you know the rest.
I’ll tell you, I wouldn’t be in business if it weren’t for the designers I work with and likewise, I help all of the designers I work with getting their designs to the screen. Sure enough, sometimes we have to bend the rules to make it happen but the way I look at it, it’s my job as a developer.
Arial and verdana are the two most commonly used. I also like georgia and times new roman, but when it comes to headings anything goes. All depends on the style you are going for.
Yup, I think it’s because when a designer sets type they choose the font, kerning, tracking. leading, etc… and they can have absolute control over every letter of the document but when you get to the web medium we tell them: “Ok, you have a couple of fonts and they’ll look kind of like this but there’s no guarantees…”. It’s a bit of a culture shock for them but hopefully it’ll get better.
Another issue is fonts that aren’t designed for screen and fall apart at 90ppi.
i cant imagine that anybody seriously uses comic sans…
Why not? If you’re designing a website whose main audience is children under the age of 10, it’s a great font to use.
Of course, if you’re using it on a mainstream site aimed at adults, you should be summarily shot, but that goes without saying 
Shooting is a tad harsh. Maybe restrict them to a diet of Cheese Strings, Monster Munch, and Sunny D.
On second thoughts, maybe bullets would be more merciful.
Of course, if you’re using it on a mainstream site aimed at adults, you should be summarily shot, but that goes without saying
Bah.
No, I can’t tell if that’s a serious site or not.
Poes, how serious can it be with a MIDI file of Beethoven’s Fifth autoplaying? 
(Okay, actually it’s some cheesy synthy something.)
Comic Sans is a victim of its own overuse. It actually makes for a nice alternative body text font.
Poes, how serious can it be with a MIDI file of Beethoven’s Fifth autoplaying?
Ah! I saw the little button for Stop Muziek but I didn’t hear anything so I wondered what was supposed to be playing, lawlz