Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Design For Hackers: Why You Don't Use Garamond on The Web

kadavy.net

Post reply on HN
Print view View original

61–70 of 70 posts

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#61

Post by thristian »

leif wrote: post #18
Sukotto wrote: post #15

Earlier quoted context omitted.

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?

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 somet…

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.

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#62

Post by thristian »

powrtoch wrote: post #31
faramarz wrote: post #13

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.

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:"Helv…

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.

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#63

Post by j-g-faustus »

blahedo wrote: post #59
wmf wrote: post #38

Earlier quoted context omitted.

Note that a px is not the same thing as a pixel. On a 250 PPI display 1 px probably equals 2 pixels. http://webkit.org/blog/55/high-dpi-web-sites/

This just makes me angry. The whole point of being able to specify in px was to have something that is actually specific to the device's pixels---otherwise you'd use points or inches or cm---for those rare instances where the pixel count is actually relevant. Of course, it got overused, but the answer should not be to just redefine "pixel" as "something a bit smaller than a point" (except in a bit more detail)! Argh.

Actually, rescaling pixels is part of the CSS specification:

     If the pixel density of the output device is very 
     different from that of a typical computer display, the 
     user agent should rescale pixel values. [...]
     It is recommended that the reference pixel be [...] one 
     pixel on a device with a pixel density of 96dpi
http://www.w3.org/TR/CSS21/syndata.html#length-units

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#64

Post by blahedo »

imd wrote: post #60
blahedo wrote: post #59

Earlier quoted context omitted.

This just makes me angry. The whole point of being able to specify in px was to have something that is actually specific to the device's pixels---otherwise you'd use points or inches or cm---for those rare instances where the pixel count is actually relevant. Of course, it got overused, but the answer should not be to just redefine "pixel" as "something a bit smaller than a point" (except in a bit more detail)! Argh.

I may be reading it wrong, but it sounds like a px is a pixel—until you zoom in. If you define a web page’s default font size as 12px, and it stayed at that no matter how much you zoomed in, it wouldn’t be much of a zoom feature, would it?

That would be reasonable, but the CSS standard says:

"If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values."

It then goes on to define a "reference pixel" in terms of arclength subtended within the user's field of vision. On reflection, I suppose this is sufficiently different from pt/in/cm (which measure absolute length) to merit its own separate measure; I just wish they hadn't used the term "pixel" for it. Because "pixel" already means something else and the arclength subtended by a pixel in a "typical computer display" has changed considerably over the last twenty years.

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#65

Post by mikeklaas »

powrtoch wrote: post #31
faramarz wrote: post #13

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.

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:"Helv…

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)

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#66

Post by yason »

The first line in my userContent.css is:

  * {
      font-family: helvetica !important;
      font-size: 18px !important;
      text-decoration: none !important;
      line-height: 105% !important;
  }
This has really kept me from bothering which fonts look bad on the screen and why. For years. I would love to have a few basic, classic fonts used on my display but currently a carefully selected sans-serif font such as Helvetica is required for pleasurable web experience. Times and Garamond come to mind, I love them on print.

The Helvetica I have is actually a real Helvetica that I grabbed from some odd place several odd years ago and stashed for my personal use.

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#67

Post by jjcm »

edd wrote: post #4

What this is actually saying is don't use Garamond for copy text as its not designed for current DPI's that are currently used on monitors. It doesn't mean you can't use it for titles or headings or devices with a high DPI.

I'd like to also add that with the advent of resolution independent displays (such as seen in the current generation of mobile devices) such limitations like this will slowly fade away; although this most likely won't happen for a while in the desktop world (there's more of a demand for size of display than resolution of a display currently, and most operating systems don't have great support for resolution independence as it is [somewhat untrue for fonts oddly, as the kerning algorithms make use of subpixel resolution, but most UI's are pixel/raster based at only one resolution]).

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#68

Post by notahacker »

powrtoch wrote: post #28
leif wrote: post #18

Earlier quoted context omitted.

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 somet…

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 Ve…

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...

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#69

Post by chadgeidel »

thristian wrote: post #61
leif wrote: post #18

Earlier quoted context omitted.

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 somet…

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.

Re: Design For Hackers: Why You Don't Use Garamond on The Web

#70

Post by leif »

thristian wrote: post #61
leif wrote: post #18

Earlier quoted context omitted.

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 somet…

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 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.
Post reply on HN