What’s the Best Font For Your Site? (The Psychology of Fonts)
by Derek Halpern | Follow Him on Twitter Here
You see, there are designers who focus on how your website looks…
…but you’re running a business. You want a font that looks great and PERFORMS AMAZING. Don’t leave it to chance!
So, what’s the perfect font?
Why Is The Font On Your Site So Vitally Important?
Answer this question:
“What’s the main goal of a font?”
Yes, a font communicates your brand to your readers and customers, but what’s the REAL goal?
A font’s main purpose is to be read, and that’s it!
People shouldn’t need to TRY to read your text, it should just happen.
So, what’s the perfect font?
Quite simply, a font that’s EXTREMELY easy to read.
If you or your designer attempt to use a “cutesy” font because you think it looks nice, you’re doing it wrong. Really wrong.
And now that we’ve got that out of the way…
What’s the Best Font For Your Site?
You’ve seen how the width of your content can either turn people on or off to your content.
Well, your font choice can have the same effect. Your font can either entice or repel your readers and customers.
So, what’s the right font?
There isn’t one right font, but there is a RIGHT group of fonts, and luckily, there are only two groups of fonts…
…Simple fonts and Fancy fonts.
Which one do you use where?
To understand that, you must understand the psychology behind each of them.
The Psychology of Simple Fonts
Two researchers, Hyunjin Song and Norbet Schwartz, discovered an unusual trendduring an experiment.
There were two groups of people. One group received directions in an simple font, and the other group received directions in a fancy font.
The results were astounding.
The people who received the simple font estimated that it would take 8.2 minutes to complete the directions whereas the people who received the complex font estimated that it would take 15.1 minutes to complete.
A simple font change, and people estimated that directions would take around 86% longer.
What’s that mean to you?
When you’re giving people directions, a simple font can make them assume the task is easier than it really may be.
Additionally, when people see simple fonts, it’s more unassuming, and it looks easier to read.
(I told you web design was important )
Now what about fancy fonts?
The Psychology of Fancy Fonts
The same two researchers, Hyunjin Song and Norbet Schwartz, made another discovery…
Again, there were two groups of people. One group of people received a menu printed in a simple font, and the other received it in a fancy font.
And what happened?
The results were remarkable!
The people who received the fancy font menu assumed that the chef preparing the meal had more skill.
A simple font tweak, and bam! An iron chef must be in the kitchen!
What’s this mean to you?
When you’re selling products, clever use of a fancy font can help you convey to your readers that more effort went into creating them.
Now that you understand the psychology, I’ll make this insanely practical for you.
(You’re likely wondering where you can use a fancy font on the web. You can use them on sidebar headings, taglines, or something small, as long as you don’t over do it).
Simple and Fancy Fonts Aside, What’s The Best Font?
No matter which font you choose, the size of your font is VITALLY important.
As I’ve written about before, when people visit a website, one of the main reasons why they distrust the site is font size.
It’s strange, I know, but it makes sense.
There are too many people who use a size 12 font for their content, and that’s a HUGE mistake. Small fonts hurt conversion rates AND usability.
I’m in my 20s and I can barely see size 12 without doing that Mac zoom thing…
…And that’s why I’ve been telling people that size 14 is the NEW size 12. (Tweet Me)
But if you want to go bigger, I’d say size 16 is the NEW size 12. (Tweet Me)
So, right now, look at your site. What’s your font size? Are you scaring people away with a small font?
But Derek What’s the BEST Font?
Once you know the psychology behind fonts (simple and fancy fonts), there is no best font per se…
However, I believe that your MAIN font should be a simple font, always.
Then, you’ll also want to create contrast between your fonts. You’ll want a font for your headlines, another font for your body copy, and potentially an accent font.
As an example, here on Social Triggers, I use Helvetica Neue for my headlines, Georgia for my body copy, and I accent my sidebar headings and logo with another special font.
(If you look at the site, you’ll see it looks cohesive because I’m using that simple font selection formula).
As a rule of thumb, refrain from using more than 2 or 3 different font types on your site. It becomes confusing and your design goes from distinguished to disgusting .
There’s One More Thing…
Once you know what font you want to use, you want to make sure your typography settings are perfect.
In Thesis, the theme framework I use (aff), the typography is amazing. There’s perfect spacing between lines, paragraphs, h3 tags, and more.
But most importantly, Thesis comes equipped with more than 30 different font options. Not only do you gain access to the typical web-safe fonts, but Thesis is also compatible with the Google Web Font library (that gives you more font options than many other WordPress themes).
If you’re not using Thesis, Chris Pearson created a tool that tells you the BEST way to set your typography by using the golden ratio. Check that tool out here.
Few More things
One of the easiest ways to create great looking websites is an intelligent font choice.
Many young web designers go crazy and choose weird and fancy fonts. Changing style every so often on the same page.
Your font choice can make or break your website.
Remember when it comes to the web and fonts, simple is always better. You don’t need, and often monitors cannot display, the nice glamorous fancy fonts that you wish to use.
Image via Wikipedia
In days past monitor resolution was a big stumbling block to displaying fancy fonts. At the smaller font sizes with the lower resolution, a lot of fonts became blurry and hard to read.
Where as print resolution is much, much better. One can easily use some of these fancy fonts in print without distortion or blurring because of the higher resolution.
When it comes to resolution most people use the term DPI. Dots Per Inch. Which basically means how many dots one can fit into an inch. More dots better resolution, better for the eyes. Less dots, worse resolution, more grainy and blurry, worse for the eyes.
Screen resolutions are normally in the range of 72dpi and 96dpi. Whilst print resolutions are much higher. Good photographs should not be printed lower than 300dpi.
Monitors have come a long way in terms of resolution. But they are in no way competitive to print.
Anyway, when developing web pages you have no control over the hardware that your readers will have. Designing for the lowest common denominator will make sure that you are able to target a wider audience.
When deciding which font to use you have to keep in mind that the font you use has to be available on the users machine. Not everyone has the thousands of fonts installed as you do. Nor do they have the very fancy fonts installed that you have.
So when developing websites, keep in mind the availability of fonts. Using a non web safe font will isolate a large percentage of your readers.
Because of the high availability of these fonts they are commonly known asWeb Safe Fonts. Read my post on Web Safe Fonts.
So which fonts do most people have? Fortunately others have already done the survey for us.
Here is a chart of the 10 most used fonts on the web. It would be prudent that you and I take note.
The most common used/installed fonts on the web as of February 2011 courtesy of Codestyle
|Microsoft Sans Serif||
|Times New Roman||
|Comic Sans MS||
As you can see there is very little difference as far as percentages are concerned. The point being is that we need to take note of what most people have installed on their machines, then choose those fonts in order to have the best impact.
What happens if your web site uses a font that is not installed, a substitute font will be used. This could be disastrous for your web site, as it might not display correctly. Which in turn could drive people away.
The next thing to consider when choosing a font is how that font displays on monitors. Remember a font will display completely different in print than on the screen.
Because of this you and I need to be careful when selecting a font for our web site. Choose the one that is most legible on all monitor sizes and resolutions.
There are four types (or families) of Web safe fonts:
- sans serif
- fantasy or cursive
Serif fonts are those fonts that have “Serif”, or little hooks on the end of letters. These little hooks become blurred or undistinguishable on monitors. Especially at bad resolutions.
While serif fonts are hard to read online, they are perfect for print. If you have print friendly versions of your site, this is the perfect place to use serif fonts.
|Bookman Old Style||font-family: ‘Bookman Old Style’, serif;|
|Garamond||font-family: Garamond, serif;|
|Georgia||font-family: Georgia, serif;|
|Palatino Linotype, Book Antiqua||font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;|
|Times New Roman, Times||font-family: ‘Times New Roman’, Times, serif;|
Sans Serif fonts do not have the little hooks or serifs on the end of the letters.
Because computer monitors do not have as good resolutions as print, sans serif is the best font to use.
It will display clearer, crisper and bolder on most monitor resolutions. It will be the easiest to read and therefore the best choice for your web site.
|Arial, Helvetica||font-family: Arial, Helvetica, sans-serif;|
|Arial Black, Gadget||font-family: ‘Arial Black’, Gadget, sans-serif;|
|Impact, Charcoal||font-family: Impact, Charcoal, sans-serif;|
|MS Sans Serif, Geneva||font-family: ‘MS Sans Serif’, Geneva, sans-serif;|
|MS Serif, New York||font-family: ‘MS Serif’, ‘New York’, sans-serif;|
|Trebuchet MS, Helvetica||font-family: ‘Trebuchet MS’, Helvetica, sans-serif;|
|Verdana, Geneva||font-family: Verdana, Geneva, sans-serif;|
|Lucida Sans Unicode, Lucida Grande||font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;|
|Tahoma, Geneva||font-family: Tahoma, Geneva, sans-serif;|
Fantasy or Cursive
Fantasy and cursive fonts are not as wide-spread on computers, and in general can be hard to read in large chunks. As the title suggests they are very fancy and often cursive.
If you want to use a fantasy or cursive font, then use it sparingly and in a large text size. Probably used best for page headings.
There is however one cursive font that is generally recognised as a web safe font. That is Comic Sans MS
|Tempus Sans ITC||font-family: Tempus Sans ITC|
|Lucida Handwriting||font-family: lucidia handwriting, Lucidia sans|
|Monotype Corsiva||font-family: Monotype Corsiva|
|French Script MT||font-family: French Script MT|
|Script MT Bold||font-family: Script MT Bold|
|Comic Sans MS||font-family: ‘Comic Sans MS’, cursive;|
Most web masters and developers use mono-space for code samples or instructions.
It is as the name suggests, a font that has it’s letters evenly spaced. Monospace letters have the same width for each character, so they always take up the same amount of space.
Think of a typewriter and the kind of text that you would see. This is closely related to monospace text. It is often referred to as typewriter text.
|Courier||font-family: Courier, monospace;|
|Courier New, Courier||font-family: ‘Courier New’, Courier, monospace;|
|Lucida Console, Monaco||font-family: ‘Lucida Console’, Monaco, monospace;|
Choosing the right font is crucial when it comes to web development. Any particular font can make or break your site.
Here are a few rules to follow when deciding which font to use
- Don’t use more than 3-4 fonts on any one page.
- Don’t change the font in mid sentence unless you have a very good reason.
- Sans serif for online, serif for print.
- Monospace for typewriter and code.
- Script and fantasy for accents.
Now I pass it to you… What’s your favorite simple font? What’s your favorite fancy font? Talk in the comments.