Ask HN: How do you choose a good font for your next project.
5 comments
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
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
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
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
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...
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...
I totally agree.. and thanks for the links.
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.
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.
Thanks for the tips.
I don't have a lot of advice for choosing a font from scratch; but if you find one you like and can't figure out what it is there's a great application called WhatTheFont that will help identify it.
http://www.myfonts.com/WhatTheFont/
http://www.myfonts.com/WhatTheFont/iPhone/
http://www.myfonts.com/WhatTheFont/
http://www.myfonts.com/WhatTheFont/iPhone/
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.