7 ms·

Choosing the perfect typeface

76 points by alagu 13y ago

ddoolin 13y ago
I really wish I could learn to analyze typefaces better, like the author. When evaluating a typeface for my projects, I usually just eyeball it, never spending more than a few minutes. I hadn't really thought of thinking about the target audience instead of just a font that simply matches the design. There are some great tips in there that I imagine would help one pick a fitting typeface for most projects.
digitalengineer 13y ago
Nice read, but I'm left with some questions. Thisis a website where one can find recepies and read those with the instructions while you're cooking if I'm correct. If so, I'd love to hear if the author actually studied some users in their kitchen while cooking a new recipe and using these new fonts.
- anandgrafiti 13y ago
  We did. Infact the specimen sheets were tested with random users in their cooking environment and the reading patterns were analysed. We noticed that line heights needs to be liberal and open counter letter forms fare better in such scenarios. Again, these are pure observation based conclusions and the same fonts when tested with improved type settings have been reviewed well by the users.
  - digitalengineer 13y ago
    Thank you! Perhaps you could add it to the blog post? A lot of (print)designers basically never test anything. ;-)
  - eps 13y ago
    How big was your sampling group? Because what you wrote is exactly what I would've written based on common typographical sense and after sticking an iPad under my wife's nose a couple of times while she was cooking. In other words what you wrote looks made up.
    - anandgrafiti 13y ago
      Ofcource i cant claim that the sampling group was big enough for us to make a generic judgement. But for the record, we had 10 users testing it in realtime cooking environments and several others we follow closely at our curated community at facebook. What you claim as common typographic sense is not common to everyone, even in the world of design. People follow patterns and those patterns may or may not work for you in your projects. Assumptions are one thing, but validation is another. In a world where everything needs a reasoning, some process is required for answering questions like why this or why not that..
- Cherian 13y ago
  The author runs Fontli [1], a community dedicated to typeface. I am he’ll must have researched the subjects [1] https://itunes.apple.com/us/app/fontli/id506650372 https://itunes.apple.com/us/app/fontli/id506650372
adwf 13y ago
Interesting read, but I still think that people spend faaaaaaaar too much time thinking about typefaces. I just don't think they make as much of an impact on the page as people think they do. At first glance, I thought the "elite" and "subtle" were both the same face, and likewise with the "informal"/"playful". It's only because they were blown up to a large size that I actually started noticing a tiny difference. Maybe it's just me? To me, the overall layout of the page is far more important. eg. margins, font-size, line-height, paragraph width, etc. The exception to my rule, that I might spend more time on, is for big newspaper style headlines. Those I treat more like images/artwork than like text, so they get commensurately more attention devoted to them.
- sp332 13y ago
  When you're on the page, you might not notice. But when you see a page out of the corner of your eye, you will be able to recognize it if it has a distinctive look. Even if the "distinction" is just in the layout and font.
- anandgrafiti 13y ago
  Thanks for the comments. But the web and the resolutions are changing. The web is the new Print. Take a look at projects like Medium or Flipboard... they all strikes you as impressive not just because of the beautiful layouts but with the intelligent choice of typefaces. Try turning off the webfonts on Medium and see if the impact remain the same? The general design trend moves towards bigger fonts and lavish use of while space on the web. Which means, you need better typefaces to make your designs stand out. With better font rendering engines, its a reality now.
  - adwf 13y ago
    Yes very good point. Particularly with tablets, the use-case they are frequently replacing is that of an old-fashioned print magazine. I did just test turning off webfonts on Medium and I still honestly can't see any huge problem with my default system typeface. This could possibly be because I have nice defaults, but at the same time, I think the good readability of Medium is far more about the overall style/layout of the page (particularly the decent large font-size), than about any particular typeface. Example 1 - normal Medium: http://i.imgur.com/D4hYBPy.png http://i.imgur.com/D4hYBPy.png Example 2 - default system fonts: http://i.imgur.com/Jvnuhkm.png http://i.imgur.com/Jvnuhkm.png Whilst I can see the difference in typeface, I can't honestly say that I'm experiencing any huge readability changes. Perhaps if I were to switch to a Sans of some sort, but that's not exactly a huge decision that needs to take a lot of time and fuss. By far and away the most important thing that makes this page readable and nice is the font size, closely followed by the line-width.
musicalentropy 13y ago
Very interesting read ! Thanks a lot. Right now, I'm trying to learn a few things about webdesign, and I have spent some time on typography yet. However, I know a few basics now, a few things about typography history, but I have never been able to find tutorials about the "why should I use this typeface or this other one there". It's like everybody is able to speak about typography theory but not about practice and thinking. Someone knows where I can find other articles about practice ? Thanks !
- anandgrafiti 13y ago
  Precisely the reason for attempting to chronicle the journey. Thanks for your interest. Its not very common to come across documentation of subtle aspects of design decisions like type choices.
- mmorris 13y ago
  Font selection is definitely more of an art than a science, and because of this trying to apply the theory of font selection to actual practice is difficult! Here is a Smashing Mag article that might be helpful: http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/ http://www.smashingmagazine.com/2010/12/14/what-font-should-...
- L_Rahman 13y ago
  My personal favorite is Mike Butterick's Practical Typography. He's a programmer, typographer, and lawyer and the book is entirely web based. They're static pages generated by code he wrote in Racket, a language in the Lisp family. For a quick introduction check out a small section of the book: Typography in Ten Minutes http://practicaltypography.com/typography-in-ten-minutes.html http://practicaltypography.com/typography-in-ten-minutes.htm... The book in full: http://practicaltypography.com/ http://practicaltypography.com/
  - Kronopath 13y ago
    +1 vote for Practical Typography. It's simple and straightforward, and it's oriented toward the average person rather than professional designers. And since it's available in full on the web, you don't have to pay anything to start reading it.
ChikkaChiChi 13y ago
Typefaces are meaningless. Now that I have your attention I'll blow your mind: A good typeface on a bad site does nothing but polish the turd. Designers that obsess over typefaces also generally give equal care to spacing and layout that when all put together makes for a great site. Flipboard would never have chosen Comic Sans as a font and people that pushed Helvetica Neue would never use dancing chipmunk gifs in their layout.
- anandgrafiti 13y ago
  True, you should not think of your redesign/design thinking about type. That will be a disaster. But somewhere along the way you need to start looking into the options available and the personality you want to deliver though your designs. Psst! I never get people's hatred for comic sans..its a typeface designed for a purpose. Now its not anyones mistake that Microsoft started packaging it with the OS and the HR departments of the corporate world thought of it as cool to use to be friendly in communication:P
  - ChikkaChiChi 13y ago
    It's a low hanging fruit. That and it's also immediately recognizable so you are immediately ready to critique everything else.
- illicium 13y ago
  What you're really saying is that typefaces are not meaningless, but using the right one for the job is simply part of good visual design.
ryandrake 13y ago
Why can't you just A/B test 50 different typefaces and measure which one best produces the user behavior that you're after? Take the subjectivity out of it.
- teraflop 13y ago
  A/B testing is great when the value you're trying to optimize can be easily measured, such as short-term conversion rate. If your goal is "users should think the site is aesthetically pleasing", that's going to be a hard one to monitor.
  - ryandrake 13y ago
    But if you're running a business, that's not necessarily going to be your end goal. You want users to "think the site is aesthetically pleasing" because those pleased users [convert more / are more engaged / view more ads], whatever your key metric is. And those are typically easy to measure.
    - anandgrafiti 13y ago
      There are far more variables here to measure. First of all what constitutes that fifty you are thinking of rolling out? Lets say you arrive at it and what's next? For an engaged user the AB testing can measure up as you can define clear set of tasks and desired outcomes. But as i stated above, good type often goes invisible. People engage with the content and the not the,medium to tell you anything tangible. One cannot take away the subjectivity from the process when there is not anything tangible to measure.
- wtracy 13y ago
  You're going to need a massive amount of traffic to get statistically significant results from 50 different choices. I do like the idea of using A/B testing to double-check your designer's decisions, though.
mVChr 13y ago
All that time, thought and work and they ended up choosing Freight Micro? http://www.cucumbertown.com/craft/wp-content/uploads/2013/10/freigh.png http://www.cucumbertown.com/craft/wp-content/uploads/2013/10... Look at that 'a' and the 's' (among other assorted ugliness)... ugh!

76 points by alagu 13y ago

I really wish I could learn to analyze typefaces better, like the author. When evaluating a typeface for my projects, I usually just eyeball it, never spending more than a few minutes. I hadn't really thought of thinking about the target audience instead of just a font that simply matches the design. There are some great tips in there that I imagine would help one pick a fitting typeface for most projects.

digitalengineer 13y ago

Nice read, but I'm left with some questions. Thisis a website where one can find recepies and read those with the instructions while you're cooking if I'm correct. If so, I'd love to hear if the author actually studied some users in their kitchen while cooking a new recipe and using these new fonts.

anandgrafiti 13y ago
We did. Infact the specimen sheets were tested with random users in their cooking environment and the reading patterns were analysed. We noticed that line heights needs to be liberal and open counter letter forms fare better in such scenarios. Again, these are pure observation based conclusions and the same fonts when tested with improved type settings have been reviewed well by the users.
- digitalengineer 13y ago
  Thank you! Perhaps you could add it to the blog post? A lot of (print)designers basically never test anything. ;-)
- eps 13y ago
  How big was your sampling group? Because what you wrote is exactly what I would've written based on common typographical sense and after sticking an iPad under my wife's nose a couple of times while she was cooking. In other words what you wrote looks made up.
  - anandgrafiti 13y ago
    Ofcource i cant claim that the sampling group was big enough for us to make a generic judgement. But for the record, we had 10 users testing it in realtime cooking environments and several others we follow closely at our curated community at facebook. What you claim as common typographic sense is not common to everyone, even in the world of design. People follow patterns and those patterns may or may not work for you in your projects. Assumptions are one thing, but validation is another. In a world where everything needs a reasoning, some process is required for answering questions like why this or why not that..
Cherian 13y ago
The author runs Fontli [1], a community dedicated to typeface. I am he’ll must have researched the subjects [1] https://itunes.apple.com/us/app/fontli/id506650372 https://itunes.apple.com/us/app/fontli/id506650372

adwf 13y ago

Interesting read, but I still think that people spend faaaaaaaar too much time thinking about typefaces. I just don't think they make as much of an impact on the page as people think they do. At first glance, I thought the "elite" and "subtle" were both the same face, and likewise with the "informal"/"playful". It's only because they were blown up to a large size that I actually started noticing a tiny difference. Maybe it's just me? To me, the overall layout of the page is far more important. eg. margins, font-size, line-height, paragraph width, etc. The exception to my rule, that I might spend more time on, is for big newspaper style headlines. Those I treat more like images/artwork than like text, so they get commensurately more attention devoted to them.

sp332 13y ago
When you're on the page, you might not notice. But when you see a page out of the corner of your eye, you will be able to recognize it if it has a distinctive look. Even if the "distinction" is just in the layout and font.
anandgrafiti 13y ago
Thanks for the comments. But the web and the resolutions are changing. The web is the new Print. Take a look at projects like Medium or Flipboard... they all strikes you as impressive not just because of the beautiful layouts but with the intelligent choice of typefaces. Try turning off the webfonts on Medium and see if the impact remain the same? The general design trend moves towards bigger fonts and lavish use of while space on the web. Which means, you need better typefaces to make your designs stand out. With better font rendering engines, its a reality now.
- adwf 13y ago
  Yes very good point. Particularly with tablets, the use-case they are frequently replacing is that of an old-fashioned print magazine. I did just test turning off webfonts on Medium and I still honestly can't see any huge problem with my default system typeface. This could possibly be because I have nice defaults, but at the same time, I think the good readability of Medium is far more about the overall style/layout of the page (particularly the decent large font-size), than about any particular typeface. Example 1 - normal Medium: http://i.imgur.com/D4hYBPy.png http://i.imgur.com/D4hYBPy.png Example 2 - default system fonts: http://i.imgur.com/Jvnuhkm.png http://i.imgur.com/Jvnuhkm.png Whilst I can see the difference in typeface, I can't honestly say that I'm experiencing any huge readability changes. Perhaps if I were to switch to a Sans of some sort, but that's not exactly a huge decision that needs to take a lot of time and fuss. By far and away the most important thing that makes this page readable and nice is the font size, closely followed by the line-width.

musicalentropy 13y ago

Very interesting read ! Thanks a lot. Right now, I'm trying to learn a few things about webdesign, and I have spent some time on typography yet. However, I know a few basics now, a few things about typography history, but I have never been able to find tutorials about the "why should I use this typeface or this other one there". It's like everybody is able to speak about typography theory but not about practice and thinking. Someone knows where I can find other articles about practice ? Thanks !

anandgrafiti 13y ago
Precisely the reason for attempting to chronicle the journey. Thanks for your interest. Its not very common to come across documentation of subtle aspects of design decisions like type choices.
mmorris 13y ago
Font selection is definitely more of an art than a science, and because of this trying to apply the theory of font selection to actual practice is difficult! Here is a Smashing Mag article that might be helpful: http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/ http://www.smashingmagazine.com/2010/12/14/what-font-should-...
L_Rahman 13y ago
My personal favorite is Mike Butterick's Practical Typography. He's a programmer, typographer, and lawyer and the book is entirely web based. They're static pages generated by code he wrote in Racket, a language in the Lisp family. For a quick introduction check out a small section of the book: Typography in Ten Minutes http://practicaltypography.com/typography-in-ten-minutes.html http://practicaltypography.com/typography-in-ten-minutes.htm... The book in full: http://practicaltypography.com/ http://practicaltypography.com/
- Kronopath 13y ago
  +1 vote for Practical Typography. It's simple and straightforward, and it's oriented toward the average person rather than professional designers. And since it's available in full on the web, you don't have to pay anything to start reading it.

ChikkaChiChi 13y ago

Typefaces are meaningless. Now that I have your attention I'll blow your mind: A good typeface on a bad site does nothing but polish the turd. Designers that obsess over typefaces also generally give equal care to spacing and layout that when all put together makes for a great site. Flipboard would never have chosen Comic Sans as a font and people that pushed Helvetica Neue would never use dancing chipmunk gifs in their layout.

anandgrafiti 13y ago
True, you should not think of your redesign/design thinking about type. That will be a disaster. But somewhere along the way you need to start looking into the options available and the personality you want to deliver though your designs. Psst! I never get people's hatred for comic sans..its a typeface designed for a purpose. Now its not anyones mistake that Microsoft started packaging it with the OS and the HR departments of the corporate world thought of it as cool to use to be friendly in communication:P
- ChikkaChiChi 13y ago
  It's a low hanging fruit. That and it's also immediately recognizable so you are immediately ready to critique everything else.
illicium 13y ago
What you're really saying is that typefaces are not meaningless, but using the right one for the job is simply part of good visual design.

ryandrake 13y ago

Why can't you just A/B test 50 different typefaces and measure which one best produces the user behavior that you're after? Take the subjectivity out of it.

teraflop 13y ago
A/B testing is great when the value you're trying to optimize can be easily measured, such as short-term conversion rate. If your goal is "users should think the site is aesthetically pleasing", that's going to be a hard one to monitor.
- ryandrake 13y ago
  But if you're running a business, that's not necessarily going to be your end goal. You want users to "think the site is aesthetically pleasing" because those pleased users [convert more / are more engaged / view more ads], whatever your key metric is. And those are typically easy to measure.
  - anandgrafiti 13y ago
    There are far more variables here to measure. First of all what constitutes that fifty you are thinking of rolling out? Lets say you arrive at it and what's next? For an engaged user the AB testing can measure up as you can define clear set of tasks and desired outcomes. But as i stated above, good type often goes invisible. People engage with the content and the not the,medium to tell you anything tangible. One cannot take away the subjectivity from the process when there is not anything tangible to measure.
wtracy 13y ago
You're going to need a massive amount of traffic to get statistically significant results from 50 different choices. I do like the idea of using A/B testing to double-check your designer's decisions, though.

mVChr 13y ago

All that time, thought and work and they ended up choosing Freight Micro? http://www.cucumbertown.com/craft/wp-content/uploads/2013/10/freigh.png http://www.cucumbertown.com/craft/wp-content/uploads/2013/10... Look at that 'a' and the 's' (among other assorted ugliness)... ugh!