HN Explorer

Ask HN: How do you choose a good font for your next project.

18 points by cschmitt ↗ HN
I need to start by saying that I'm not a font guy. I know people who are, and they can wax poetic about the differences between two fonts that look almost identical to me. That being said, I do recognize there is a difference between the right font and the wrong font. I also acknowledge that a good font can drastically impact the story you are telling with your site or app.

So I ask the question.. How do you go about choosing a font for your next project?

Any advice or help is much appreciated. Thanks in advance.

7 comments

[ 5.0 ms ] story [ 31.8 ms ] thread
cskau
I'm not exactly a "font guy" either so I usually take a top-down approach.

Usually this means I go over to Google's rather extensive webfonts collection[1] and do a quick sweep through, picking all the fonts I like. Then from there it's simply trying them one by one in the context and seeing what works.

It can be quite time consuming though.

[1] http://www.google.com/webfonts

pdenya
Like any other aesthetic decision it's difficult to provide hard rules to follow. The best advice I can give is to know the available web safe fonts very well and use those until the design is in the polishing stage.

Starting out with Helvetica, Times, Georgia, etc will give you a good feel for what type of font you need. After that, looking for similar fonts that you feel go well with your message should be easier.

Any font will benefit immensely from the subtle shadows and other css3 effects you can provide when using it for headlines. Once those effects are in place with an FPO font it'll be simpler to pick the font they should be effecting.

diwank
Typeface is to design what salt is to cooking. It never feels that important but it can be the difference between an average design and a brilliant one.

Usually, I use this incredibly helpful chart for choosing typefaces: http://img.labnol.org/files/font-selection-chart.png

You could also take a look at these Smashing article for some Typography essentials:

http://smashingmagazine.com/2009/03/18/10-principles-for-rea...

http://smashingmagazine.com/2011/03/24/how-to-choose-a-typef...

cschmitt
I totally agree.. and thanks for the links.
eliot_sykes
This Design for Developers slide presentation has some rules of thumb on font choice and size. http://www.slideshare.net/Wolfr/design-for-developersonlinev... (think this has been shared on HN before)

These are the notes I made on fonts after reading it:

Readable typeface choices: Verdana, Lucida Grande (fallback Lucida Sans Unicode), Droid Sans, Segoe UI

All text that is supposed to be read should be at least 14px

Interface (button/menu) text can go smaller for readable fonts (11, 12, 13px)

A line of text should not be longer than 60 characters (~ 2 alphabets). Long lines are hard to read.

Line height makes big difference. Use line-height 1.1 for headings, 1.5 for paragraphs