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

11–20 of 70 posts

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

#11

Post by kadavy »

wwortiz wrote: post #8
kadavy wrote: post #2

If you like what you see here, please consider voting for my SXSW panel. I'll be covering this and more, including proportion and color: http://panelpicker.sxsw.com/ideas/view/6261

Hmm that link doesn't work for me (get something about the website being offline) but I am curious about what your panel will be about, is it readability and how these things affect it or just design in general?

It seems that the PanelPicker is down. Thanks for your interest.

I plan to talk less about the technical aspects of design, but talk more about the classical principles that guide good design. This post is about the relationship between medium and form, but I also plan to talk about use of proportion, and color theory.

However, I plan to have an open dialogue with those interested (through the Facebook Page), so I can tailor the presentation leading up to the event.

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

#12

Post by ybot »

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.

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

#13

Post by faramarz »

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.

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

#14

Post by m_eiman »

Nwallins wrote: post #7
kadavy wrote: post #6

Earlier quoted context omitted.

Can you explain that further? Here's my logic: if you're in the comments on this thread, you're presumably interested in this topic, and would like to learn more about it -> Many HNers go to SXSW, and would get a chance to learn more, should my panel be accepted -> I'm not famous, so getting help from interested people is my only chance at getting a panel accepted.

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

It'd be hard to be more subtle when informing the readers that a) you've written the submitted article and b) you've got an upcoming event that might also be of interest to the readers.

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

#15

Post by Sukotto »

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?

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

#16

Post by leif »

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.

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.

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

#17

Post by faramarz »

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?

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.

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

#18

Post by leif »

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?

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.

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

#19

Post by elbenshira »

faramarz wrote: post #17
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?

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

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

#20

Post by zaidf »

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.

Thanks for translating. I learned more from your comment than the post itself!
Post reply on HN