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.
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.
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.
Even if you cannot readily quantify the difference between, say, Roboto and Source Sans, the difference is there and your perception of either is different. The difference might be slight, but it is sufficient to skew your "2 second" impression in the wrong (or the right) direction. For example, even though Roboto and SS are almost the same typeface, Roboto in regular weight renders much heavier than Source Sans, so if you are to use for a product that is meant to exude lightness and airness, it would work worse than if you were to use SS.
Things like overall feel and the "rhythm" of a typeface take an effort to notice, quantify and rationalize, but they are of an UTMOST perceptive importance. Ever noticed the quirky lowercase "a" in Proxima Nova? Ever noticed how that "a" just steals the show if it appears in a sizes larger than 16px? No? Just pay closer attention next time ;) The same goes for HF&J's Whitney - it looks like just another sans-serif font on the surface, but it just feels friendlier. Try and quantify that (Kotaku uses it, go check it out).
First impression is hugely important and a typeface choice plays a very big part in it. Don't make a mistake of underestimating it.
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 !
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.
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!
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.
The eye is a creature of habit. Bad typography helps people read your copy, while bad typography prevents them from doing so. This is it.
Here's a good example. Why are headlines in all caps hard to read? Because they have no ascenders or descenders to help you read words and thus you have to read the headline letter by letter. You should never superimpose your headline on an image because that makes it hard to read.
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.
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.
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.
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.
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
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.
[+] [-] adwf|12 years ago|reply
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.
[+] [-] anandgrafiti|12 years ago|reply
[+] [-] sp332|12 years ago|reply
[+] [-] huhtenberg|12 years ago|reply
Even if you cannot readily quantify the difference between, say, Roboto and Source Sans, the difference is there and your perception of either is different. The difference might be slight, but it is sufficient to skew your "2 second" impression in the wrong (or the right) direction. For example, even though Roboto and SS are almost the same typeface, Roboto in regular weight renders much heavier than Source Sans, so if you are to use for a product that is meant to exude lightness and airness, it would work worse than if you were to use SS.
Things like overall feel and the "rhythm" of a typeface take an effort to notice, quantify and rationalize, but they are of an UTMOST perceptive importance. Ever noticed the quirky lowercase "a" in Proxima Nova? Ever noticed how that "a" just steals the show if it appears in a sizes larger than 16px? No? Just pay closer attention next time ;) The same goes for HF&J's Whitney - it looks like just another sans-serif font on the surface, but it just feels friendlier. Try and quantify that (Kotaku uses it, go check it out).
First impression is hugely important and a typeface choice plays a very big part in it. Don't make a mistake of underestimating it.
[+] [-] musicalentropy|12 years ago|reply
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 !
[+] [-] L_Rahman|12 years ago|reply
For a quick introduction check out a small section of the book: Typography in Ten Minutes http://practicaltypography.com/typography-in-ten-minutes.htm...
The book in full: http://practicaltypography.com/
[+] [-] mmorris|12 years ago|reply
Here is a Smashing Mag article that might be helpful: http://www.smashingmagazine.com/2010/12/14/what-font-should-...
[+] [-] anandgrafiti|12 years ago|reply
[+] [-] ulisesrmzroche|12 years ago|reply
Here's a good example. Why are headlines in all caps hard to read? Because they have no ascenders or descenders to help you read words and thus you have to read the headline letter by letter. You should never superimpose your headline on an image because that makes it hard to read.
[+] [-] ddoolin|12 years ago|reply
There are some great tips in there that I imagine would help one pick a fitting typeface for most projects.
[+] [-] mVChr|12 years ago|reply
http://www.cucumbertown.com/craft/wp-content/uploads/2013/10...
Look at that 'a' and the 's' (among other assorted ugliness)... ugh!
[+] [-] digitalengineer|12 years ago|reply
[+] [-] anandgrafiti|12 years ago|reply
[+] [-] Cherian|12 years ago|reply
[1] https://itunes.apple.com/us/app/fontli/id506650372
[+] [-] ChikkaChiChi|12 years ago|reply
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|12 years ago|reply
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
[+] [-] illicium|12 years ago|reply
[+] [-] ryandrake|12 years ago|reply
Take the subjectivity out of it.
[+] [-] teraflop|12 years ago|reply
[+] [-] wtracy|12 years ago|reply
I do like the idea of using A/B testing to double-check your designer's decisions, though.