Good Website Fonts

mick.jaeck's picture

Hi there,
I wondered what website fonts might look good for an internet site. I tried Fakt (Opentype) on one website and I feel it looks better than Arial. ( in case you want to have a look: http://info-buddhismus.de )

For 2 other websites I was thinking maybe I use another opentype font which can be included directly via the @font-face CSS rule. But I checked with Museo Sans or Calluna Sans and it does not look good at all.

Any idea which Font might work well? Verdana and Arial/Helvetica seem to be still the better choice. Also any example or link to a site which uses a well working font (being easy to read and also looking good) would be welcomed.

I couldn't find a discussion thread about this topic on typohile, so I started this one. In case there is one already, please let me know and I do apologize.

Thanks a lot.

skald89's picture

I visited the link you posted. From a quick glance the navigation text looks to have some weird kerning. Some of the letters touch each other.

AdamC's picture

As plain as it is, I've never had any problem using something like Verdana on a web page. It renders consistently in most major browsers and it's pretty easy to read.

mick.jaeck's picture

Thanks.

Maybe I turn back to Arial or Verdana. Verdana seems to be the most legible font for web purposes. Actual it is a trial to use Fakt. Ourtype licence includes that a font from their foundry can be used also on 1 website, so I used it now instead of Arial, and felt it looks better than Arial.

I wait a bit if there is input from others too.

Frode Bo Helland's picture

Mick. You need to check the rendering in multiple browsers, not just one. This is a huge topic, and there have been many post here in the past. Try this google search.

In short: Both Arial and Verdana has had months (years?) worth of coding and nudging to help the computer interpret it’s curves as pixels. This is called hinting. Verdana is probably the best hinted font out there. Most of the new web fonts will not preform as good under all conditions, but some of them will look great in most conditions. Where do you start looking?

Fonts.com webfonts, classification: hand hinted
The Web Fontfonts (there seems to be some problems with the Fontshop website)
Webtype
Typedia, Cure for the common webfont pt 1
Typedia, Cure for the common webfont pt 2

1996type's picture

Try Droid Sans from Google Webfonts. It's also used by android extensively and its completely free.

Frode Bo Helland's picture

Why pay when you can get something for free? That’s a question you’ll have to answer for yourself, but I definitely find it’s worth it.

apetickler's picture

I think that beneath a certain size, it's totally counterproductive to stray from the safe, well-hinted choices. There just isn't room at a height of twelve pixels for a typeface to distinguish itself without destroying color and readability.

Mugford's picture

Apetickler, I couldn't agree more (how's that for a funny sentence?).

Always test your website on Windows XP with default settings (with multiple browsers, and of course other OSes too). You will be surprised at how awful most webfonts look at smaller sizes. Here are some estimates of OS market share:

http://www.w3schools.com/browsers/browsers_os.asp

http://en.wikipedia.org/wiki/Usage_share_of_operating_systems

Typekit has a feature called "Browser Samples" that shows screenshots of their web fonts on various OS/browser combos at different sizes. Most of the fonts tend to become legible around 18px and larger, which "coincidentally" is the size at which Georgia and Verdana switch to anti-aliased (on Windows anyway).

Frode Bo Helland's picture

If by safe, you mean the good old web safe fonts, I can’t say I agree with you Patrick. We need fonts of such quality that we can stray.

mick.jaeck's picture

Thank you very much for your good advice and thoughts!

I reverted the settings and try it now with the users' system fonts of Lucida Sans and Arial. The Lucida Sans seems to work well on Mac Browsers but not on Windows. Typedia (which was linked by frode Frank) uses Lucida Sans. I do not know if this font is a hand hinted font-any idea?

Verdana is too wide for the site, I needed a bit of a narrower sans serif.

Quite likely I will experiment a bit with the font, your input led me into a good direction, so thank you all! If there are too many problems with the different systems and browsers I just use mere Arial again.

(In case someone has to say anything about using Lucida Sans for websites, please let me know.)

fontdesigner2's picture

Websites use small fonts and sometimes pixelated fonts look great in certain situations. You may at first not like the way pixelated fonts look, until you compare them to fonts you were thinking of using when you test your website. If you are using flash there are ways to make your fonts look better too. Just do a google search on it.

Frode Bo Helland's picture

A narrower version of Verdana that is some what available cross browser, because it comes installed with both OSX and Windows is Tahoma. There’s no italics though, and it isn’t available on most mobile devices.

Verdana is a rather wide (read up on the design process if you want to understand why) humanist sans serif. Some more “normal” width humanist web fonts include: Frutiger, Compatil Fact, Syntax (the fonts.com website is a bitch to navigate, giving up at this point but please do look further!) Droid Sans Pro, FF Kievit, FF Milo, FF Scala and there’s also FF Unit which is rather narrow IMO. Typotheque offers Fedra Sans Screen, but I personally think they went a bit too far with that one: it really suffers on a Mac, but look splendid in Windows.

You can pick up some info on the hinting quality of Lucida Grande & Sans (Unicode) here. I can say for sure that many designers use Mac and often forget about the end users that usually sits on another platform.

mick.jaeck's picture

Thank you all very much!

Syndicate content Syndicate content