Hacker News Reader

Comment by Sukotto | Hacker News Reader

I would very much like a simple cheat-sheet of "standard" fonts and what range of sizes each looks best at with regards to webpages.

Something that I can blindly follow when making the first draft of a site.

Anyone want to share a link to such a thing?

View on HN

http://www.typetester.org is a great resource for making comparisons.

But I will try to put together a simple list of standard fonts and how to optimize them for the best results. Will shoot you an email when it's done.

I'm also interested in this, and in case you don't mind sending it to me too: colin.f.drake -at- gmail

Maybe you should also consider posting it? It seems like many people would appreciate it here!

I'd love to see this once you're done. My email is my username @ gmail.com

http://www.typetester.org is a great resource for making comparisons.

That's a great resource. It also highlights the futility of specifying alternate font families. I couldn't find any font family combination that looked good side by side using the same size, leading, tracking, etc.

Since there's so many of us interested, can you just submit it to HN and email us the link? I'm sure the resulting discussion would also be helpful.

I'm would also be interested in this email, if it's not too much trouble. My email is on my profile page.

There are lots of links, and a lot of them are crap (for example, most suggest garamond and helvetica).

Here are my suggestions:

    sans: "font-family: Arial, Verdana, Tahoma, sans-serif;"
    serif: "font-family: Georgia, 'Times New Roman', Times, serif;"
    mono: "font-family: 'Courier New', Monaco, monospace;"

Always remember to put the generic font type ('sans-serif', 'serif', 'monospace') at the end so browsers have something default to fall back on in all cases. For example, most linux distributions have a good monospace font defaulted, so you don't even need to try to guess a font (though 'Bitstream Vera Sans Mono' and 'DejaVu Sans Mono' are not bad guesses) there.

Personally I try to avoid putting Verdana or Georgia as backup fonts (In practice, the stacks you've listed are fine because almost no one will not have Arial installed, but by that logic you could leave out Verdana altogether). In principle, if we're imagining a situation where Arial isn't an option, falling back to Verdana will usually look pretty crazy, because Verdana is designed to appear so much larger. 12px Verdana just looks a lot bigger than 12px Arial. All this (including the part about it not mattering in practice) goes for Georgia (vs Times etc) as well.

Anyone that doesn't have Arial installed almost certainly won't have Verdana installed anyway. Helvetica would be a more logical fallback for those people who hate Arial so much they won't have it on their system...

Ye gods, please no more Courier New! Maybe, just maybe if you're trying to reproduce 1950s police reports or something, but there's so many much nicer monspaced fonts available these days. I'd start with:

    "Consolas", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace

...but you might want to include Andale Mono, Droid Sans Mono, Inconsolata, Lucida Console or Monaco as well.

I love Consolas, but really if your visitors are not on Vista/Windows 7 it's unlikely they will have it.

EDIT: I believe there is a large population of folks that don't like ClearType hinted fonts. Consolas looks absolutely horrible unless you have ClearType on and tuned. I can't speak to Consolas on any Linux-based OS as I've never tried it.

I don't like it either, but people are used to it and it serves its purpose. You can put it after 'mono' if you like.

I've found this useful: http://www.slideshare.net/jeff_croft/beautiful-layouts-throu... as well as this: http://www.alistapart.com/articles/settingtypeontheweb/

Reply on news.ycombinator.com