One thing that I learned in design school (which you reiterated) is that designers need to make the contrast between faces strong enough that it looks intentional. Too often you see two fonts that are close to each other, but not the same.
If you need a slight variation on a font, simply be more creative within its boundaries. Change the color, weight, size, or letter-spacing.
Copy & paste the code below to embed this comment.
adk
An entire issue on typography… fantastic!
I particularly appreciate the info on pairing of typefaces.
To be a pain, you are mixing metaphors: “another notch in the designer’s belt”. A notch on the handle or a tool on the belt. A notch on the belt and your pants fall down.
Copy & paste the code below to embed this comment.
Cody Dalton
Jason, fantastic article! I am a UX designer and have been researching the usability of fonts for the web. To help users read faster online I have found that choosing 14pt font over a smaller point font has tremendously helped. Arial, Verdana and Georgia all seem to be easy for users to read but I think it really depends on the content and the site context.
For a web application using Georgia seems to be the wrong choice but for a blog it seems to work well and is engaging. Arial seems to be the least engaging for long paragraphs or blog entries. However it is the best when it comes to web applications because it is fast to read.
I know that as designers we try to create websites that are “cool” and “trendy” by selecting smaller fonts but to be user friendly we need to make fonts larger and more readable.
The problem with a lot of the assumptions you make is that they can only be considered anecdotal at best. There are certainly general baselines for readability, but we can’t say one typeface or size is always going to be better than another, or for a specific purpose, because reading is a highly personal and subjective action. What’s perfectly readable to someone could make another person stumble and falter.
One of the most interesting articles I’ve read in a while, really insightful, so thank you for taking the time to write it!
I can’t help but panic a little bit when it comes to web typography. Not because I’m intimidated by using it, but because there will be a lot of amateur use out there, tainting the use of @font-face: for the rest of us, making it take even longer or IE to support the code – bad times.
Copy & paste the code below to embed this comment.
majance
Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.
Copy & paste the code below to embed this comment.
navarrod
Being a traditional print designer and spending all of my time online now, I am looking forward to handling type as I once did. I review this “article”:http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography each year so I don’t forget. Understanding the use and principles of type and translating that online is going to be interesting journey.
I’ve had clients who request some pretty crazy things. I see businesses all the time who either do there own marketing or hire some inexperienced designers that have no method to typography. There are even design firms that will use three, even 4, different fonts in their marketing pieces. Everything starts to look scattered, cluttered, and tacky.
In web design it’s hard to decide on fonts because of browser compatibility. There are only limited typefaces that work well in all browsers. If a font is too uncommon then it can be used as an image but this then takes away from search optimization.
This article is great in expressing the true meaning behind typography and would be good for clients to read and understand why there are limitations and guidelines to selecting fonts in their web design and marketing.
You are spot on with this article. It’s something I’ve been thinking about more and more over the last few months.
There are many books and articles on typography, but considerably few explore typeface selection and pairing.
You say there are ‘considerably few’ – but which are those few? I’d be interested to know. I have a few books on type but none of them seem to go into this subject with much (or any) depth.
Perhaps there is a gap in the web for an online directory or cookbook of successful type pairings. I realise that the choice depends on the design context, but it still might be of some use.
H’mmmm. I’m not entirely convinced that this is a good idea, y’know. Often the only way to make people follow best practice is to point out technical limitations in their ideas – for example, “You can’t use sIFR for all your text because it will take 20 minutes to load the page”.
Once Dreamweaver and other visual tools take on @font-face we’re doomed, because every idiot who thinks owning a copy of Dreamweaver makes them a designer will start littering the web with badly-set type.
Just wanted to make a quick comment about web fonts. Has anyone tried Extensis WebINK? It seems pretty cool and inexpensive solution for fancy web fonts.
26 Reader Comments
Back to the ArticleChris Meeks
One thing that I learned in design school (which you reiterated) is that designers need to make the contrast between faces strong enough that it looks intentional. Too often you see two fonts that are close to each other, but not the same.
If you need a slight variation on a font, simply be more creative within its boundaries. Change the color, weight, size, or letter-spacing.
adk
An entire issue on typography… fantastic!
I particularly appreciate the info on pairing of typefaces.
To be a pain, you are mixing metaphors: “another notch in the designer’s belt”. A notch on the handle or a tool on the belt. A notch on the belt and your pants fall down.
Cody Dalton
Jason, fantastic article! I am a UX designer and have been researching the usability of fonts for the web. To help users read faster online I have found that choosing 14pt font over a smaller point font has tremendously helped. Arial, Verdana and Georgia all seem to be easy for users to read but I think it really depends on the content and the site context.
For a web application using Georgia seems to be the wrong choice but for a blog it seems to work well and is engaging. Arial seems to be the least engaging for long paragraphs or blog entries. However it is the best when it comes to web applications because it is fast to read.
I know that as designers we try to create websites that are “cool” and “trendy” by selecting smaller fonts but to be user friendly we need to make fonts larger and more readable.
Could A List Apart benefit from a larger font? :)
Jason Santa Maria
The problem with a lot of the assumptions you make is that they can only be considered anecdotal at best. There are certainly general baselines for readability, but we can’t say one typeface or size is always going to be better than another, or for a specific purpose, because reading is a highly personal and subjective action. What’s perfectly readable to someone could make another person stumble and falter.
traxor
One of the most interesting articles I’ve read in a while, really insightful, so thank you for taking the time to write it!
I can’t help but panic a little bit when it comes to web typography. Not because I’m intimidated by using it, but because there will be a lot of amateur use out there, tainting the use of @font-face: for the rest of us, making it take even longer or IE to support the code – bad times.
majance
Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.
navarrod
Being a traditional print designer and spending all of my time online now, I am looking forward to handling type as I once did. I review this “article”:http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography each year so I don’t forget. Understanding the use and principles of type and translating that online is going to be interesting journey.
balancedi
Logos, since they often contain a bit of large text can influence the designer’s choice of pairings on a page.
Anyone who uses images to make headings or banners has to put serious thought into font pairing decisions. These tips are useful now.
Thanks Jason for an excellent article.
Web Print Brand
I’ve had clients who request some pretty crazy things. I see businesses all the time who either do there own marketing or hire some inexperienced designers that have no method to typography. There are even design firms that will use three, even 4, different fonts in their marketing pieces. Everything starts to look scattered, cluttered, and tacky.
In web design it’s hard to decide on fonts because of browser compatibility. There are only limited typefaces that work well in all browsers. If a font is too uncommon then it can be used as an image but this then takes away from search optimization.
This article is great in expressing the true meaning behind typography and would be good for clients to read and understand why there are limitations and guidelines to selecting fonts in their web design and marketing.
andrewbkk
Excellent article. But could you please tell me where is the best place to learn more licensing
Kinedo
I;m always looking for ways to perk things up. Does using sifr with typography make it not be seo friendly anyone?
Jason Santa Maria
Nope, sIFR just replaces normal text on the page, which is still perfectly readable to search engines.
thesheep
You are spot on with this article. It’s something I’ve been thinking about more and more over the last few months.
You say there are ‘considerably few’ – but which are those few? I’d be interested to know. I have a few books on type but none of them seem to go into this subject with much (or any) depth.
Perhaps there is a gap in the web for an online directory or cookbook of successful type pairings. I realise that the choice depends on the design context, but it still might be of some use.
Chris Cox
H’mmmm. I’m not entirely convinced that this is a good idea, y’know. Often the only way to make people follow best practice is to point out technical limitations in their ideas – for example, “You can’t use sIFR for all your text because it will take 20 minutes to load the page”.
Once Dreamweaver and other visual tools take on @font-face we’re doomed, because every idiot who thinks owning a copy of Dreamweaver makes them a designer will start littering the web with badly-set type.
cal1977
Great article, the cross browser issue is always going to be a nightmare.
maybraydigital
Just wanted to make a quick comment about web fonts. Has anyone tried Extensis WebINK? It seems pretty cool and inexpensive solution for fancy web fonts.