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

31–40 of 70 posts

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

#31

Post by powrtoch »

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

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

#32

Post by zokier »

jonknee wrote: post #27
zokier wrote: post #26

Anyone who is using 12 px font in body text should be butchered imho. For reference 12 pt is approx 17 pixels in 100 PPI, and I think that even it is bit small for body text in web. Also, desktop display tech needs to advance. But meanwhile, yes, please test your font selections with different software and preferably hardware, and ensure that it stays readable. I think all these new tech allowing fancy typefaces has…

HN is 12px font for me, I think that's the Chrome default. Looks fine to me.

Actually its 10 points (at least so it's defined in the CSS). But I wouldn't like to read any longer passages in this font size, and sometimes I zoom in even here to read more comfortably. But 12pt seems actually quite comfortable now that I tried it, so the part about it being too small can be redacted.

But the main point was that I strongly disagree defining font sizes in pixels. What happens when somebody with 250 PPI display comes along and that 12 px font suddenly is 3.5 points?

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

#33

Post by stevelosh »

zokier wrote: post #26

Anyone who is using 12 px font in body text should be butchered imho. For reference 12 pt is approx 17 pixels in 100 PPI, and I think that even it is bit small for body text in web. Also, desktop display tech needs to advance. But meanwhile, yes, please test your font selections with different software and preferably hardware, and ensure that it stays readable. I think all these new tech allowing fancy typefaces has…

Agreed. There's a reason Safari's "Reader" feature displays body text as 18px.

I find myself using Reader and/or hitting Cmd+Plus on far too many sites these days.

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

#34

Post by sp332 »

powrtoch wrote: post #29
cheesey wrote: post #22

Does this problem still occur when you use even higher-resolution screens, like the "Retina" display?

More explicitly: most professional print documents are done at 300 dpi. Since retina is 326 ppi, it's safe to assume that if it looks alright on paper, it will look fine on retina. It's worth noting that it doesn't really matter though. Most iPhones are pre-retina, and this will be the case for at least several years. So I can't think of a medium where it's okay to assume this level of screen resolution. The author's…

I think 300 DPI is for full-color prints. Black-and-white text is more like 1000-2000 DPI.

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

#35

Post by faramarz »

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

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

#36

Post by powrtoch »

faramarz wrote: post #35
powrtoch wrote: post #31

Earlier quoted context omitted.

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

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

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

#37

Post by kadavy »

sp332 wrote: post #34
powrtoch wrote: post #29

Earlier quoted context omitted.

More explicitly: most professional print documents are done at 300 dpi. Since retina is 326 ppi, it's safe to assume that if it looks alright on paper, it will look fine on retina. It's worth noting that it doesn't really matter though. Most iPhones are pre-retina, and this will be the case for at least several years. So I can't think of a medium where it's okay to assume this level of screen resolution. The author's…

I think 300 DPI is for full-color prints. Black-and-white text is more like 1000-2000 DPI.

300 DPI is the resolution recommended for images that will be printed on offset printers (like, for a magazine). The text - if black - in these applications will be turned into crisp vectors, so the DPI is in effect limitless.

I believe laser printers do print at something like 1200 DPI, like you're saying.

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

#38

Post by wmf »

zokier wrote: post #32
jonknee wrote: post #27

Earlier quoted context omitted.

HN is 12px font for me, I think that's the Chrome default. Looks fine to me.

Actually its 10 points (at least so it's defined in the CSS). But I wouldn't like to read any longer passages in this font size, and sometimes I zoom in even here to read more comfortably. But 12pt seems actually quite comfortable now that I tried it, so the part about it being too small can be redacted. But the main point was that I strongly disagree defining font sizes in pixels. What happens when somebody with 250…

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/

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

#39

Post by faramarz »

powrtoch wrote: post #36
faramarz wrote: post #35

Earlier quoted context omitted.

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

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

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

#40

Post by chrischen »

kadavy wrote: post #9
Nwallins wrote: post #7

Earlier quoted context omitted.

> Can you explain that further? Here's a stab: The culture here is such that comments are for the sake of the readers and not the writer. Some amount of self-promotion is fine, but too much is not appreciated.

"Too much" seems subjective to me. Additonally, I've spent thousands of hours over the course of a decade obsessing over design details and historical context. Then, I spend a week crafting a blog post to condense a piece of my knowledge for sharing. I then ask for an opportunity to spend hundreds of hours preparing a presentation to share more of my knowledge. Somehow this is self-serving? I don't need more (or more…

Don't worry. The culture here has clearly upvoted you more! Please don't get turned off by the few negative people. Keep sharing.
Post reply on HN