5 ms·

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 reser

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.

Sukotto 16y ago
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?
- faramarz 16y ago
  http://www.typetester.org 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.
  - elbenshira 16y ago
    I'd love to see this once you're done. My email is my username @ gmail.com
  - cfdrake 16y ago
    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!
  - nhebb 16y ago
    http://www.typetester.org 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.
  - imagii 16y ago
    I'm would also be interested in this email, if it's not too much trouble. My email is on my profile page.
  - natep 16y ago
    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.
- leif 16y ago
  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.
  - powrtoch 16y ago
    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.
    - notahacker 16y ago
      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...
  - thristian 16y ago
    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.
- aarghh 16y ago
  I've found this useful: http://www.slideshare.net/jeff_croft/beautiful-layouts-through-beautiful-type http://www.slideshare.net/jeff_croft/beautiful-layouts-throu... as well as this: http://www.alistapart.com/articles/settingtypeontheweb/ http://www.alistapart.com/articles/settingtypeontheweb/
leif 16y ago
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.
powrtoch 16y ago
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.
- faramarz 16y ago
  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/ 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.
  - powrtoch 16y ago
    Right, this is what I was acknowledging. The question was whether Helvetica Neue might render better than ordinary Helvetica.
    - faramarz 16y ago
      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
  - 16y ago

Sukotto 16y ago

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?

faramarz 16y ago
http://www.typetester.org 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.
- elbenshira 16y ago
  I'd love to see this once you're done. My email is my username @ gmail.com
- cfdrake 16y ago
  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!
- nhebb 16y ago
  http://www.typetester.org 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.
- imagii 16y ago
  I'm would also be interested in this email, if it's not too much trouble. My email is on my profile page.
- natep 16y ago
  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.
leif 16y ago
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.
- powrtoch 16y ago
  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.
  - notahacker 16y ago
    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...
- thristian 16y ago
  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.
aarghh 16y ago
I've found this useful: http://www.slideshare.net/jeff_croft/beautiful-layouts-through-beautiful-type http://www.slideshare.net/jeff_croft/beautiful-layouts-throu... as well as this: http://www.alistapart.com/articles/settingtypeontheweb/ http://www.alistapart.com/articles/settingtypeontheweb/

leif 16y ago

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.

powrtoch 16y ago

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.

faramarz 16y ago
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/ 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.
- powrtoch 16y ago
  Right, this is what I was acknowledging. The question was whether Helvetica Neue might render better than ordinary Helvetica.
  - faramarz 16y ago
    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
- 16y ago