Hacker News Reader

Comment by faramarz | Hacker News Reader

While we're on subject, I wanted to note that Helvetica makes a terrible body font. Please use Arial instead for your body, as it renders more clearly and reserve Helvetica for text above 13pt.

KISSmetric uses Helvetica and a matching bg shadow blur for all of their body text, which makes my eyes bleed. Horrible practice. Avoid text-shadow for body.

View on HN

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?

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'd love to see this once you're done. My email is my username @ gmail.com

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!

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.

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

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.

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/

I have a question on this Helvetica issue actually.

It's common knowledge that Helvetica is a better font than Arial, plain and simple. The issue is just that Arial is somehow optimized for screen display (hinting or whatever), whereas most or many Helvetica versions aren't. At least, that's my understanding, correct me if I'm wrong.

I've always suspected you could get around this handicap this way:

font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;

That is, only use Helvetica if they've got the updated version Adobe has put out, otherwise prefer Arial. I know Helvetica Neue technically was created before the rise of the web, but for some reason I expect it would render better. I've never had a PC that had the font installed though, so I've been unable to test this.

Helvetica is a better font, only when it comes to print/signage or Heading H1/H2/H3 on the screen.

Otherwise it becomes unbearable to read at standard body font size 11-13pt. See here http://trevordavis.net/play/helvetica/

Unfortunately for windows users, they don't get the pre-loaded collection and because the font isn't free, most people settle for downloading either one version/style as demo-copy or modified version of it. This is problematic because the CSS still recognizes that you have Helvetica and doesn't fall back to Arial.

Right, this is what I was acknowledging. The question was whether Helvetica Neue might render better than ordinary Helvetica.

I would think so. But you'd have to import the font remotely and not depend on the local hierarchy for everyone to take advantage of that. Otherwise we're back to square one with the windows users left out.

Typekit is the solution to that if you're willing to pay. I doubt open libraries will ever carry Helvetica. It costs too much. :P

Or worse - you get Helvetica bundled with HP print drivers, that is unsuitable for any kind of screen reading.

My experience has been that the Helvetica Neue shipped with OS X is better-adapted to on-screen rendering than the version available for print and graphic design from Adobe.

Helvetica Neue isn't that much better than Helvetica for the screen at small sizes. It is fantastic at larger sizes in lighter weights (I swoon for Helvetica Neue Light)

13pt font at 72dpi is actually a pretty decent body font size, and helvetica renders not altogether horribly with these settings, so it's a reasonable choice for designers testing only on macs.

That said, yes world, please don't use Helvetica for body font, most people don't even have a good version of the font, and plenty of renderers butcher its kerning, anti-aliasing (especially with versions of the font without good hints, or with renderers that ignore them), and even its baseline.

Reply on news.ycombinator.com