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

21–30 of 70 posts

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

#21

Post by aarghh »

Sukotto wrote: post #15
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 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?

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

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

#23

Post by kadavy »

cheesey wrote: post #22

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

I haven't had much experience viewing a Retina display, but since it displays at about 3x the resolution of a normal display (as mentioned in the post), fonts like Garamond should render much better on it.

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

#24

Post by stevelosh »

ybot wrote: post #12

The article mentions Google Font API and Typekit as sources of fonts online, but there's another option that's worth looking at: The Open Font Library ( http://openfontlibrary.org/ ) The fonts hosted there are free (both as in beer and as in freedom). It's interesting to see how they apply the concepts around free software to another medium, like fonts.

Another site with open source fonts is The League of Moveable Type: http://www.theleagueofmoveabletype.com/

They only have a handful, but they're pretty much all high-quality.

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

#25

Post by kadavy »

stevelosh wrote: post #24
ybot wrote: post #12

The article mentions Google Font API and Typekit as sources of fonts online, but there's another option that's worth looking at: The Open Font Library ( http://openfontlibrary.org/ ) The fonts hosted there are free (both as in beer and as in freedom). It's interesting to see how they apply the concepts around free software to another medium, like fonts.

Another site with open source fonts is The League of Moveable Type: http://www.theleagueofmoveabletype.com/ They only have a handful, but they're pretty much all high-quality.

Thanks - these are beautiful!

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

#26

Post by zokier »

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 produced at least twice as many horribly unreadable sites than those it has improved.

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

#27

Post by jonknee »

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.

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

#28

Post by powrtoch »

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…

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.

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

#29

Post by powrtoch »

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 point still holds.

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

#30

Post by fredpeters »

ybot wrote: post #12

The article mentions Google Font API and Typekit as sources of fonts online, but there's another option that's worth looking at: The Open Font Library ( http://openfontlibrary.org/ ) The fonts hosted there are free (both as in beer and as in freedom). It's interesting to see how they apply the concepts around free software to another medium, like fonts.

The best place for free fonts I have found is (http://www.fontsquirrel.com/).

They also package them up as @font-face with all the variations needed. I would be warned though, font rendering varies so greatly, that unless you test extensively, most will not be good enough for anything but headings.

Post reply on HN