What’s the Best Font For Your Site? (The Psychology of Fonts)

by Derek Halpern | Follow Him on Twitter Here

If you think it’s up to your designer, you’re wrong.

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 trend during 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.

What happened?

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.

Insane, right?

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 :-D)

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 :-P.

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.

Now I pass it to you… What’s your favorite simple font? What’s your favorite fancy font? Talk in the comments.

If you enjoyed this article, get email updates (it's free).

Email Address:

{ 170 comments… read them below or add one }

Mike Smith

Love your content Derek, especially when it comes to design/aesthetic decisions like this.

I recently went through my blog and updated the fonts, keeping a larger, bolder font for the title sections and then left the content of the page as a simple Arial with a size of 16 and I love the way it feels when I read over my posts now. Hopefully everyone else does too, right? :)

On the other hand I noticed that I did have more success with my design portfolio when I used a more creative/hand-drawn style font for the headlines and calls to action, whereas now I have updated the site to a new layout that’s more clean and polished and it’s not performing as well.

Reply

Derek Halpern

Interesting observation Mike. When it comes to Fancy fonts, it’s tough. You’ve got to do it right, because if you don’t, you’ll just turn people off. But in your case, it seems like you were doing it right.

Reply

Mike Smith

Yeah, it’s definitely a slippery slope that you need to choose your steps wisely on. I’m going to test out a few things in the next few weeks and will hopefully see the increase in sales I’m hoping for.

Thanks again for continuously posting insightful content.

Reply

Derek Halpern

You’re welcome!

Reply

David

Mike, have always been a lover of simple, crisp fonts. Love the clarity of your website. Nice job!
D.

Reply

Paula

I agree, the clean look makes for an easy read, even if the topic requires more thought. I did an experiment by going to the mall and seeing the colors and styles used throughout the stores. The ones which wanted to appear smarter definitely used a more complicated font. Those which were for kids or wanted to seem friendly and open to all went simple. Now if I could only find a font which uses the round, circle form of “a” instead of the fancy one. Do you know of such a font?

Reply

Derek Halpern

Thanks David.

Reply

Amber

This was awesome. I never stopped to think about the psychology of font on product stuff. Will be using fancier font on our print materials consistently now for sure ;)

Reply

Derek Halpern

Not necessarily in every area… but maybe if you’re describing your services, and you have a little sub section under each service, you can write that in a fancier script font to describe what you do for the client.

Reply

Nick Reese

I love that you back it up with research. Love this.

Reply

Martyn

So if 16 is the new 12, are you going to change Social Triggers’ font? Right now you’re at 1.5 em. :P

Reply

Derek Halpern

Wow. That’s weird. You’re annoying. I’m using size 15 because the golden ratio typography calculator dictates that I do :-D. If I were to use size 16, my content column would need to be a bit wider.

Reply

Martyn

Your site’s too narrow. As of Monday, I’m using the golden ratio AND size 16. Time to widen up, mate. :D

Reply

Angela Shelton

I went up a size after reading your blog. :P

Reply

Derek Halpern

Perfect!

Reply

Doug Rekenthaler Jr.

Really, really interesting (and helpful).

Reply

paul wolfe

Derek

Loved this post. The concept of using ‘simple’ fonts for content and ‘fancy’ fonts on sales page kind of makes sense – and is something I’ll be split testing and trying out.

And as I use Thesis on my main blog, your combination of fonts will be something that I’ll be modelling (yeah I know, modelling is a fancy word for copying!).

Nice one.

Paul

Reply

Derek Halpern

Hey, no shame in borrowing fonts. I use Georgia and Helvetica because I like them, but I only really like them because Chris Pearson told me I should, ha ha :-D

Reply

Bruce

I’m glad you have no issue in “borrowing” fonts. I’m fairly new to blogging, but do run Thesis, so I understand how easy it’ll be to switch out for headlines etc. Your pick of fonts, though slightly different sure to appear to be very cohesive.
~Bruce

Reply

Derek Halpern

Yep. Works great. And the sidebar images + logo just tie it all together.

Reply

Pat Bloomfield

Hey Derek,

What’s your view on the Google Droid fonts?

I recently changed to using them, since included with Thesis. as I believe they’re supposed to display cleanly even on mobile devices. Or is this just sales hype :) ?

Reply

Shane

This is great stuff, thanks for the tips! I’ve always wondered about fonts, this is a nice guideline.

Reply

Derek Halpern

Glad you liked it Shane.

Reply

Liane | Blog Design Team

You’re right Derek. Font style and form does matter a lot when you take a look at the psychological effect of it to readers and customers. There is truly a distinction and some core guidelines that must be observed when devising the font make up of your blog.

I do believe though that while there are designers out there who just design for the sake of design, there’s still a lot of us here who design and worship the beauty and functionality of good typography :)

And of course, I’m a thesis fan and user myself too :D

Reply

Derek Halpern

Chris Pearson says there’s two types of designers. Finger painters and effective designers.

Yes, there are some effective designers, but the amount of finger painters out there is astounding.

That’s why I try to educate the consumer so they know what they’re getting into :-)

Reply

John

Thanks for the article.

It’s nice to know that my curmudgeonly opinion is now backed up by psychological testing :)

All kidding aside, you make soome great points.

Thanks.

Reply

Derek Halpern

Glad you liked them John.

Reply

Loyal

I agree with you so much. There are so many web-pages I click off of due to difficulty with reading the text. If the text is small or fancy, I don’t read the post, OR if the background intrudes and makes the text difficult to read, especially if it is a dark background.
Thank you for presenting this information

Reply

Derek Halpern

Funny how that works, right? People hate small or difficult-to-read fonts, and yet, people still use them. It boggles my mind.

Reply

Debra Gould

If your target market is age 40+, I would especially air on the side of a larger font. I had 20/20 vision until that age and little appreciation for how much your vision can change all of a sudden. It really is a huge problem and I find most graphics designers choose way too small type cause it looks cooler.

Derek, I’m on a Mac and I am always shocked when I see how much worse font rendering is on a PC. Any data on what looks best on a PC?

Reply

Cathy Taughinbaugh

Hi Derek,

I will definitely go through my site and take a second look at my font. Thanks for sharing!

Reply

Derek Halpern

You’re welcome Cathy.

Reply

Sean Mal

As if I knew that already, I started my blog with not-so-small fonts. Now, Derek, you confirmed my choice. Nice one. Thanks for analyzing the concept.

Reply

Derek Halpern

That’s the thing about psychology… sometimes it confirms what you already believe and sometimes it doesn’t. Either way, you can take comfort in knowing you made the right decision.

Reply

Bradley Gauthier

Most website owners don’t grasp this font thing. And it annoys the crap out of me. I’m glad you brought this up!

In my experience with my clients, if a website is unreadable or the font doesn’t fit the situation the bounce rates and engagement rates are dramatically unimpressive. And since its never been easier to change fonts, it’s a no-brainer to optimize the typography.

As you mention, multiple fonts is a slippery slope for design. On my site I have three fonts (handwritten, serif, san-serif) throughout and I think it works well. But with multiple fonts, the designer needs to have an excellent grasp on what font styles compliment each other and to understand that subtlety is key.

This post is awesome Derek, every website owner needs to read this!

Keep up the great work!

Brad

Reply

Derek Halpern

Nice to see you here Bradley. When did you change your domain name?

Reply

Bradley Gauthier

yeah! a few months ago I gave away all my stuff and moved out of my house in Wisconsin… and have been traveling ever since, so I thought that I’d document it with a new blog for digital nomads :) it’s been exciting! thanks for asking

Reply

Jeff Goins

Well said. If a site has a teeny, tiny font, I’m out. Doesn’t matter how good the content is, I’m out. (Truth is when the font is that small, I don’t even bother to read the content.)

Reply

Derek Halpern

You’re like that… as is everyone else :-)

Reply

Nela

“If you think it’s up to your designer, you’re wrong.
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.”

A good designer who does his job well also knows what will perform for your business – that’s what we’re here for! A web site is not just about “how it looks”, we also take care that *your* message goes through in the best possible way. But apparently many people think we just make things pretty.

Reply

Sean Mal

I think he said: “…there are designers…” but he could be more clear.

Reply

Derek Halpern

Not all designers are like that, but there are some. And the truth is, as a consumer, most people don’t know how to judge a designer. That’s why I educate people here :-)

Reply

Richard

I use arial 16 for all my body font on all my niche sites. Shit…didn’t even think to test fonts… Add to “To-do” list. Cheers for the links to the research.

Reply

Derek Halpern

I’d love to hear the results of that too.

Reply

Guillermo

Good post Derek, although I was expecting to reveal the name of that pretty special font of yours ;)

I use Verdana adn Arial now… but it looks like I’ll have to review this after reading this post.

Reply

Derek Halpern

Ha ha, I don’t write it publicly because if I did, everyone would use it ;-p

Reply

Dike Drummond

Love it Derek. It is always so refreshing to see research rather than opinion. Thanks for putting this all together in one article. Much appreciated.

I would wager that poetry is seen as more beautiful in a fancy font
and a recipe as easier to prepare in a simple font.

We humans have amazing hard wired tendencies that are invisible until we study them. Fascinating.

Reply

Derek Halpern

You’re likely right there. When you read poetry in a fancy font, it gives the impression that the writer put more time and effort into writing it.

Reply

Heather Pierce

This is great! I can totally relate to the fancy font study – I teach healthy cooking classes and give handouts with recipes and the evening’s menu. When I came up with my first menu it was in regular font — the reaction was “ok fine, this is what we’re making”. But when I changed the menu to a fancier font, even something simple and boring like hummus gets “ooh’s and ahhs”.

Reply

Derek Halpern

Haha, nice!

That’s a perfect example. Though I think a nice mix of simple and fancy works. Simiple for the bold headline (name of the dish) and fancy font for the description.

Reply

Roz @ Fit Blogging for Fun, Family & Profit

I felt this way about small font size about a month ago, but I didn’t think on the psychology behind it (which is why I like your blog :D) I just thought if it was hard for people to read my stuff they wouldn’t stay on the page as long.

Reply

Derek Halpern

You’re right. If people can’t read your stuff, they won’t stay there. It’s kind of common sense when you think about it, but the interesting results of that study are still worth sharing!

Reply

Ian Brodie

I use Arial 15pt for my main body text and 28pt for my headlines – might try something fancier with my headlines.

I have the usability “advantage” of being barely able to read something below 14pt – so I have to keep my site big for my own sake.

I guess your choice should also be in keeping with your market positioning (as long as it’s still readable). My positioning and tagline is “Staright talking marketing and sales advice for consultants and coaches”. An overly fancy font wouldn’t fit with that.

By the way – I’m assuming the old rule of sans serif being easier to read online no longer applies now we have higher resolution monitors?

Cheers,

Ian

Reply

Derek Halpern

Yea, I’d venture to say that. Back when we didn’t have high resolution, the serifs made things tough to read and see. Now, I don’t think that’s necessarily the case.

Reply

Sean Mal

Question: Derek, you recommended size 14 or 16 but didn’t tie it to a specific font. Size 16 of Times New Roman is actually smaller to the eyes than size 16 Aerial. Did you mean using size 14 or 16 with whatever font we choose?

Reply

Derek Halpern

Yes… but I wouldn’t use times new roman ever.

I’d instead use Georgia.

Reply

Sean Mal

That was an example. My point is the same size number of different fonts is not the same “actual” size when reading. Did you mean to use size 14 or 16 for whatever font? I don’t get why you suggest an absolute size.

Reply

Derek Halpern

Size 16 of times new roman should be fine. I could have got more technical, and talked about x heights, but that would have caused me to ramble on about stuff ;-p

Reply

Hans Koevoet

Still, Sean has a very relevant point I think, that should have been covered in the article. The optical size of fonts that are technically the same size can differ a lot. For instance, 16 pt Times New Roman looks far smaller than 16 pt Georgia, and I would never recommend someone to use 16 pt Verdana for paragraph text.

Alex

I love the “16 is the new 12″ – I have recently made that change on my blogs.

Derek, did I miss the link to which fonts you consider simple and which ones you consider fancy?

Fascinating stuff – especially when you back it with research!

Reply

Derek Halpern

I didn’t pick specific fonts here because I didn’t want people to have tunnel vision. However, here’s some simple fonts I like:

1. Verdana
2. Georgia
3. Helvetica

Reply

david hardy

The first two were designed by Matthew Carter, specifically for computers. That’s why they work.

Reply

Mir Imran Elahi

Derek,

I use Arial font on my sites and I like this one very much.

~Mir Imran Elahi

Reply

Ryan Cumley

I have to admit, I copied the font size and spacing choices of Social Triggers when I was laying out my blog several weeks ago. I was just using the “inspect element” feature of Chrome to do it, but it’s nice to have an overt post of yours to reference now too…

Thanks!

-Ryan Cumley

Reply

Derek Halpern

Hey, love to hear that ;-D

Reply

Brad Yzermans

Is there an easy way to change font size and/or style on 150 blog posts in a wp.org site? Can that be done automagically?

Reply

Derek Halpern

Yes, change the CSS of your design… or you can use something like Thesis and it’s a simple drop down.

Reply

Cathy Presland

this is funny I was just talking to a contact of mine about this very question last week! We agreed on Georgia but we were vaguely aware of some research showing differences between men and women – not sure whether you’re aware? Men seem to intuitively like the san serif fonts like arial but we didn’t know whether that was a proven fact?

Anyway, good article Derek, thanks :)

Cathy

Reply

WilhelmR

Some designers are reluctant to change, but try this trick:

Get out of your nicely lit home, leave your huge ultra-bright monitor at home, go to the park with your laptop on a sunny day and work on a low screen brightness setting.

When you get home you’ll realize that
1)Fonts will be bigger
2)The contrast will be excellent.
3)Working near that hive wasn’t such a good idea.

As always, excellent article Mr. Halpern :)

Reply

Naveen Kulkarni

Hi Derek,

Being a design addict, I also feel that typography is REALLY important for blogs. I am partial to Georgia and Aerial fonts.

Looking forward to your next post :-)

Reply

Sharmaine

What about color? Does the color of the font matter?

Reply

Marta Walsh

Rather than using native fonts try http://www.typekit.com.

Moving to web based fonts made a big difference for me. :-)

Reply

Christopher Erckert

Thanks Derek. I will be upgrading my font to 16 and going to a more readable font. Arial is cool but I now realize how much of a disservice I am doing to my readers.

Reply

Robert Stover

Aw man, you left out my favorite font combination…

Small, fancy font on reverse type.

Guaranteed to impact results!

Reply

Tanya Smith

Derek – you are the gift that just keeps giving :-)
I have to say I love the look of your site, the way it’s so clean and easy to consume.
I use Headway, and I can’t seem to achieve the same weight of font, or blackness that you get – mine seems to look lighter and thinner unless I bold it, which of course I only want to do for some text.
Still haven’t figured out how to change that – any tips?

cheers
Tanya

Reply

Chris Pearson

Tanya, I just looked at your site, and your primary font color is #5c5c5c, which is a mid-range gray. If you change your color to something closer to black (I like #111111), you’ll achieve the “blackness” that you’re looking for.

Reply

Connie

Hi Derek,
Great post. I totally agree with your analysis–and you definitely practice what you preach. I will be looking at my blog to see what I need to do today. One thing…I tried clicking on your link to Chris Pearson’s typography tool and it doesn’t work. I went to Chris’ site, but couldn’t find the tool. Any suggestions? Do you have a better link? Thanks so much. I love your stuff :>)

Reply

Debra Torres

Okay, I’m liking the Georgia way better than then Trebuchet that I had in my blog copy. I only picked it because I was told that fonts for websites/blogs had to be sans serif for readability.
What say you?
Debra

Reply

Chris Pearson

Debra, back in the 1990s, using sans-serif fonts was a great idea because the average monitor resolution was so low. There’s also a technology called anti-aliasing that has improved dramatically over the last 15 years, and it makes serif fonts much more readable on the web.

For hundreds of years, publishers have known that it’s easier to read serif fonts (in print, at least) than it is to read sans-serif fonts. This is precisely why all the fiction you’ve ever read was delivered in a serif font.

Thanks to higher resolution monitors and other technological improvements, serif fonts are now an excellent choice (in my opinion, the best choice) for your blog copy.

Reply

Debra Torres

Thanks Chris. So glad I can get rid of my ugly fonts!

Reply

Hans Koevoet

Chris, sans serif fonts hardly existed before 1900, so for most of the past centuries, publishers didn’t even have a choice. Secondly, it is an oversimplification to say that serif fonts are easier to read. The legibility of a font depends on all of its design properties and on how it’s used (i.e. line length and line spacing), not only on whether or not it has serifs. Furthermore, regarding font choice, ‘you read best what you read most’ (google on it): the legibility of a font depends on whether or not you’re used to read it.

Reply

Susanna Perkins

Wow! The typography tool is amazing, thanks so much for providing that link.

Reply

Chris

The font is what I actually agonized over the most on my site as I have been redesigning it. It makes a difference atheistically and functionally.

With your advice I now have a few more things to look at.

Thanks!

Reply

Andrew Richardson

As a graphic designer I understand the need for legibility and readability. Here is a great resource I use for designing almost anything: http://bonfx.com/19-top-fonts-in-19-top-combinations/

General rule of thumb is if you use a san serif font for headers use a serif for body copy and vice versa. Some of the typefaces I like to use are:

Garamond
Helvetica
Caslon
Baskerville
Didot
Avenir

Number one thing you have to remember when picking a typeface is the intent. For most purposes “fancy fonts” are useless. They could be thought of as “niche fonts” as well because they serve a very specific purpose and shouldn’t be used at all outside of that purpose. I want to gouge my eyes out every time someone uses Papyrus as body copy…

Anyways, great post Derek, you have a great way of simplifying a complexed process.

Reply

Cristina Ansbjerg

I really can’t read some blogs only because of the small size of their fonts. My vision is perfect but it’s annoying to read something so small.

Thanks for this post, Derek.

Cristina

Reply

Tom

Thanks, Derek!
I have heard people saying get bigger but simpler font before but this gives more guideline to do that. Will try to do it soon!

Reply

Nicole

I’ve tried to get my boss to change his menu fonts at the restaurant at least a dozen times, but he doesn’t get why font type and size is so significant. This article will change his mind :) thanks!

Reply

Viktor Nagornyy

Great points. I keep it at 14, easy to read.

I think one point to add to font is the contrast of background to font color, it needs to be readable. A good rule is to not use solid black (#00000) for font, but slightly lighter black (or very dark grey). It makes it easy on the eyes, more readable.

How do you usually find these studies? Any good sources or tips?

Reply

Hans Koevoet

Good point about that contrast, Viktor.

Reply

Gabriel Braun

Who in there right mind would use a serif font for online body copy. Serifs are more difficult to read on line and are usually reserved for printed higher resolution copy. You may have done your research but it was old research based on printed copy.

90% of publish books body copy are in a serif font
90% of websites body copy by true professional are in San Sarif

Reply

Chris Pearson

Where’s your research to back up this specious claim?

Reply

Derek Halpern

Gabriel, do you have new studies that suggest this or are you using the studies from 10 years ago?

Reply

Adam

Haters be hatin’ I love commenters like Gabriel. No link, no face, no reply, outlandish and unsupported claim… I doubt we’ll hear from him again.

Reply

Matt G

Dan Cederholm of SimpleBits.com uses a serif font in the body copy on his site and a sans serif for titles. Would you say that Cederholm, a CSS/web typography legend, is not “in his right mind?”

Reply

Anthea Grob

Cool, I hadn’t come across the experiment before.

Reply

David Sharp

Interesting article Derek, I tend to use Georgia mostly and size 14 but I think moving to size 16 is on the cards. It is also worth mentioning that a black font on a white background is the best for readability. So many times I land on a site with a dark background and is such a big turn off for me.

Reply

Derek Halpern

You’re absolutely right. Black font on light background is best. White font on black background is horrible.

Reply

Monica

Hi! I just installed Thesis and am just starting to play around with it. I tried changing the font size AND the font style in the content section of the design panel and it’s not changing anything on the site. Am I missing something? (obviously I must be, do you know what I’m missing?) And I did click the Big Ass Save Button.

Reply

Derek Halpern

You should check out the support forums for that:

http://diythemes.com/forums

Reply

Peter

Awesome post again Derek! You are already my fave person to follow on Twitter and quickly becoming my fave writer online. Good work and keep the great content flowing!

Peter

Reply

Derek Halpern

That’s exactly what I love to hear. I’m a sucker for compliments, ha ha :-D

Reply

Marc Quinn

Watch now as 10,000 people’s sites change from Tahoma to Helvetica Neue and Georgia…

Reply

Derek Halpern

haha

Reply

Danika

Awesome blog post Derek! Couldn’t have come at a better time – I’m just going through the stages of picking my fonts and sizes! You read my mind ;-)!

Your work is gold!

Reply

Derek Halpern

Thanks Danika. Glad you’re digging it.

Reply

Shawn Collins

If I am trying to convey a fun, playful theme on a site, would you recommend using Comic Sans?

Reply

Derek Halpern

As much as people love to hate on comic sans, I’ve got to say this: people who are outside of “the world of the web” seem to love that font. I’m not sure why, but they do. There’s something to learn from that for sure, heh.

Reply

Brankica

I so agree with you, I can’t read sites with small font anymore, I guess being so much online, I just see such big difference between regular size like here and then the small font and no line space.

Reply

Elisa Rodriguez

Hey Derek! What’s (aff) in reference to Thesis topography?

Reply

Derek Halpern

That means if you buy Thesis through that link, I earn a commission.

Reply

Gideon Shalwick

What if I don’t like reading?

And I only want to watch videos?

:)

Gideon Shalwick

Reply

Derek Halpern

Touche!

Reply

Herman Grobler

Thanks for the advice Derek.
Starting out in a specific niche your ideas are so important.
How can one be sure a fancy font will be legible by all? Should one pdf or do some other trick?
Herman

Reply

Robert

I’ll be honest. I didn’t read the whole article. So this comment is only relevant to the opening paragraph.

Any decent designer would but both aesthetics and functionality on an equal plane, or at least strike as closer balance between the two as possible. So really and truly, only a bad designer would focus purely on how your website font ‘looks’.

Reply

Suraj

Hey Derek, nice article. I prefer 14px size for fonts and near about 600px width for content.
btw bloggers must try Google Webfonts ( http://www.google.com/webfonts ), they have many user-friendly fonts which can be used on blogs, specially for titles.

Reply

Mandy Kilinskis

Wonderful post, Derek!

It’s so funny, the first time I ever visited your blog, I was so excited to see that you use Georgia as your body copy. I am well aware that that sans serif fonts are becoming the new norm for the web, but there is absolutely nothing wrong with serif fonts — especially for longer articles.

Font is so important and it’s one of the last things that people think about. Readability is key, people. If it’s hard to read, people won’t. It’s just that simple.

Reply

Reg Gupton

This is amazing research, Derek.

I am loving this. Not just an opinion. Real differences with real results for a slight change.

Thanks.

Reg Gupton

Reply

Kyle Zimmerman

Gil Sans Light when possible for body and Gil Sans Light all caps for headlines is my yummy.
Thanks, Derek.

Reply

Jason Fonceca

Droppin’ pure science, as always Derek.

I like how you explained it simple language, along with your simple fonts ;)

Reply

Jim Fortin

Good post Derek. To add a bit, your menu example was great. Research has also discovered that on menus, when the $ sign was removed and it was just the number: EG – 18 instead of $18 – people had higher checks with the first example. Again, great post!

Reply

Justin

Hi Derek,
I switched my font size from 12 to 14 on my blog as well. Two pet peeves of mine for blogs are small font and a black background.

Reply

Patrick Hitches

Dude – After listening to one of your consulting videos, I already made my font to the NEW 12 to 14 :)… Thanks for the continued goodness brother!

Patrick

Reply

Stephanie

Your article is terrible and a full on insult to designers. Learn what design is and what a designer does and then you might be able to write a credible and intelligent article. Lesson #1: A designer chooses fonts that clearly convey a message as defined by the client or business. For that message to be clearly conveyed, that font must also be clear and easy to read.

On behalf of all respectable designers, it would behoove you to remove the attack on designers and direct your message towards elsewhere. You’re speaking about idiots that don’t know what they’re doing… not designers.

Sincerely,
Stephanie

Reply

Derek Halpern

The reality is that there are a lot of designers out there who don’t know this. If they all knew it, I wouldn’t need to write this article, but many people have emailed me their web designs asking for my feedback, and some of the designs have been complete abominations.

Reply

Geoffrey Gordon

Hi Derek

Once again, another solid post Derek. I have to tell you when ever i want to explain a concept to my clients. I am often referring them to a blog post you have written here.

I love the built in fonts in the thesis theme, its fantastic. My favorite is Lobster 1.4, I guess based on the psychology of fancy fonts, its a good font to use as a website designer. And the thesis framework rocks!!! We design most of our clients websites on the thesis framework because it is so flexible, any hints as to when the next version is coming out…

Lastly I absolutely agree with you when it comes to font size. The problem with fancy fonts though is they only look good large or in a header. They are pretty terrible if you had them in a size 16 anyway. ;D

Reply

Sarah Gogstetter

With the blogger service there isn’t much selection in fonts and sizes.

Reply

Dennis O'Brien

You really have cemented a theory I have regarding the reason literacy levels are dropping in schools in this country (not sure about others).

As children we had a limited selection of fonts to read in books magazines and newspapers. I have been alluding to teachers that the incredible range of fonts children are subjected to from a very early age creates confusion for the child.

The reluctance of a child to want to read more is understandable when they have difficulty establishing patterns in their reading. I would love to be given a research grant to look into this but I doubt that will happen. Too many are quick to blame video games and other entertainment for the drop in reading and comprehension standards.

Thank you.

Reply

Sig Kappel

Nice.
I love it when rules and art converge into a better user experience.
Thanks

Reply

peter

Hi Derek,
As usual I like your content. But I am a bit puzzled. When I use Firebug on your site it tells me that your font size for the main content is 10px. And when I compare it by opening my site in a new window and moving the two together across on the screen, my font is definitely larger than your.
And if I increase the font display of your site to 14 using firebug, then the two fonts look about the same size. Well allowing for the fact that I choose to use Verdana.
So, if font size is important as you say, should I immediately stop reading your posts? (Just joking, well only just)
regards peter

Reply

peter

Derek, Thanks for your email telling me that you actually use font 15. Turns out that with Thesis, Firebug looks at a default style.css file and not the active file. And Verdana is slightly more spaced out sideways than Georgia which explains why the font on my site looks “bigger”.
Sorry for confusion. peter

Reply

Kathlb

I may be clear off base, it’s been a long day. But I was taught years ago that you needed to use a common font that everyone has on their system. If you don’t, and they don’t have that font, it’s substituted and it may be substituted with a font that does more to run people off than keep them reading. Is that no longer true? Was it ever true??? :-) Just wondering out loud but I’m really interested in the answer too. Great articles here Derek, thank you!

Reply

Alan Chatfield

Hey Derek,

Interesting stuff as always,

I hadn’t thought about the idea of using a different font for titles and content, that seems like a good idea so I may just give that a try.

It seems a tragedy to me to write great content but then not have it absolutely as easy to read as possible, hence not doing that great content justice. It seems to me that distractions and poor formatting can both do this.

I’ve been working on the former (completely removed sidebars and recently all adsense ads from my site completely) and though I’m realtively happy with my fonts, something still wasn’t right for me formatting-wise so thanks for this post, I’m going to have another look.

I will also take a look at your post on page width/content width (I think I saw a link up there),

thanks again Derek & best wishes,
Alan

p.s. out of curiosity why never Times New Roman?

Reply

Alan Chatfield

sorry, ‘relatively’

Reply

W. Michael Hsu

Some great advices here – turned around and made a few changes to the website. Thanks.

Reply

Jenn

Uh… so which fonts are fancy, and which are simple? I would have assumed serif are fancy and san serif are simple, but apparently you mean something else, or else you’d be using Helvetica for the body and Georgia for the headlines. My apologies if I missed something, but I read the article twice and don’t see an explanation for how to tell if a font falls into which category.

Reply

Tony

Hey Derek, great post. If using size 16 or even 15, what size would you recommend for the headline?

I read through some of your other posts and I’m happy to report that my width is on track with your post on content width. :)

I’m at 600px.

Reply

Marvn Kane

Right on Derek. My biggest battles with clients are around fonts. Seems they believe fancy fonts will make their sites look cool or different. After reminding them that the purpose of their site is to generate revenue, I usually win the battle. Thanks for being clear and concise.

Reply

Extreme John

Amazing post! I never could have realized that font styles have psychology in them. This makes a lot of sense. I actually checked my site to see if I’m on the right font style and font size. Thanks for such an eye-opener Derek.

Reply

Sergio Felix

Love it,

Going to apply this ASAP although I think I have to dabble with the teaser sizes as well.

Amazing tool nevertheless, thanks for sharing it!

Sergio

Reply

Eddie Gear

I believe that as long the fonts are easy on the eyes and evenly spaced out, its good. At the end of the day its all about readability and how comfortable the reader is. There is this interesting article on Smashing Magazine about how to choose a typeface. http://www.smashingmagazine.com/2011/03/24/how-to-choose-a-typeface/

Reply

chel

Hi Derek,
LOVE your site. Big fan. Visit often as well as get updates.
Question about fonts and SEO. Was hoping you could answer…
Does Google ignore 8217 finds on the page from HTML for single quotes, ect? And if not how does badly this affect keyword density for SEO??

Reply

Gary Anderson II

Hi Derek, Gary here…
I know I’m kinda late to comment, so no need to reply…. unless you just want to ;)
Anyway, a few months ago I installed the Prose theme by Genesis on a pee-on (that means for testing) blog of mine and right out of the box it had a somewhat fancy font. No biggie… EXCEPT!

I “Thought” I finally figured out how to easily hard code a larger body font in the themes of all my blogs… it has always worked flawlessly, except for the prose theme!

I admit, I know almost nothing about coding, so maybe it’s something simple I’m missing. Anyway, that being said…

Even 2 or 3 years ago, it was my personal feeling that 12 point font was just too dang small! Why was no one else getting it! (well, so few anyway). You are the first blogger that I’ve heard say it out loud in public, ON Video about the stupid standard 12 pt font in wordpress themes. Ok, sorry so long, Thanks for letting me babble!

Gary Anderson II

Reply

Brian Gardner

Gary, to increase the body font size in Prose, all you should have to do is change the font size in the “Global Styles” box on the Design Settings page.

Reply

Trista Mordecai

No way for “The Art Of Flight” soundtrack ?? ok i’m trying to recompose this album one title by one title. ; I

Reply

JohnM

“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).”

Not really! The themes out there now incorporate more Google fonts than Thesis does. Last time I looked at Thesis, the font directory was not that comprehensive. In fact other developers include the whole Google directory. Plus, they throw in Cufon fonts as well. Sometimes the options get insane with over 200 font choices.

Getting back to use of the Pearson Golden Ratio thingy. It just sets the margins far too wide. There is so much space, a bullet could fly clean through them.

Typographically, this just looks ugly because the large white negative spaces of white break the page up into scattered blocks of text. This breaks up the smooth even flow of the content for the reader.

This is a typographical issue I dislike with Thesis, and the way other web developers deploy typography. Even on this site, the margins are set too wide.

As an example let use the Golden Ratio thingy and run an example with Georgia 15px at 600px content width, and below is the result. The px size and line-height looks fine with the content width.

But, the returned result gives us paragraph spacing or a margin-bottom of 24px. Far too wide.

font-size: 15px;
line-height: 24px;
width: 600px;
and
margin-bottom: 24px;

If we had to amend the ‘margin-bottom: 24px; to ’12px-14px’, the paragrapghs of content start to create a smooth, comfortable flow for the reader.

For example, (and example only) on this website the font-size is 1.5em, line-height 1.6em, and margin-bottom is set at 1.6em. That’s pretty wide…a .45 bullet will fly through that no problem. If I reset the margin-height to ’0.6em-0.7em’, the art direction in the typography looks more cohesive, and still retains that ‘minimal white space look’.

Typography is not a mechanical process per Pearson’s Golden Ratio thingy, but more a process of creatively structuring type as an element
of design and communication that creates a unique style for a brand, book magazine or website etc.

The trick is to acknowledge the intrinsics of typography and use in a smart way. There are no hard and fast rules. I worked in a famous company, where we basically art directed with 6 fonts spread between mega-million clients, and every client’s brand image looked totally different, even with the same font use.

Type is a creative element, not some Golden Ratio thingy (wish I could bold that thingy thing), or haphazard Word document dump into a website. So at the end of the day, Georgia can make a website look beautifully different from one to the next. Just like this one.

Reply

Toni

Thanks for your insights John :)

Reply

Matt Horwitz

Much thanks John! Really insightful comment, and I was searching for “line-height” and came right to yours. I do like Derek’s space between lines and wanted to model it. What do you think is ideal space (in pixels if you can) between the lines, and then also between the paragraphs?

And what’s the CSS called for paragraph space ?

Reply

Dinesh Verma

Is typography related to niche in any way?

Reply

Aydar

Useful. Thank You.

Reply

Greg

I didn’t read all the comments, so I’m not sure if someone addressed this already… but I recently read that you should always use the ‘em’ unit instead of pixels when defining font size. This is because people with sight impairments may have their browser’s default font size set larger than those who have normal vision. What are your thoughts?

Reply

Jimmy

I think you make some great points, though to any self-respecting designer, these should be obvious. I did notice that your article had way too much white space. You repeatedly used one sentence paragraphs, which made it difficult to read and required a lot of scrolling. I know when writing for the web you should use shorter paragraphs, but they shouldn’t all be just one sentence. Just something to think about.

Reply

Hans Koevoet

Indeed, Derek, I’d love to know whether this way of writing is just the way you always did, or that you have good reasons to do so. And in the latter case, are those reasons based on your own thoughts and experiences, or on research on it? Or more specifically: do you have reason to believe this way of writing helps the reader in comprehending the points you want to make?

Reply

Ronelex

Nice thought. It helps for people who are still new in these field :)

Reply

Toni

Enjoyable article Derek.

Something else I’ve read about font combinations is that all fonts used on a page should use the same style for the letters. Look at ‘a’ and ‘g’ for a quick check.

Reply

muazfaris

hi derek, just wanna ask.. what font do use for ur sidebar coz u dont mentioned it on your post

Reply

Hans Koevoet

… doesn’t seem Derek is around here anymore?

Reply

Rachelle Weymuller

Thanks for this post, I was thinking of changing my font just because there was an option but you are correct. It’s not about what looks great or what I think would be fun but actually what is easiest to read.

Reply

Melinda Brack

Hi Derek,

What I find even more interesting about your blog than this article is that the formatting style of your blog posts follow the principles of technical writing that I was taught by a couple of technical writing aficionados I worked with over 20 years ago. Moreover the advice you give about writing blog posts also follow very similar principles – except the tweets and the sign up for a newsletter of course. I have to confess I did have a chuckle when I came across your blog and saw it. Keep up the good work.

Kind regards.

Reply

Tim Biden

Thanks Derek.

It seems to me that part of the reason that 16 is the new 12 is higher resolution monitors. My screen is set to 1920 x 1080 and people reading on my monitor always complain that things are too small. Just a thought.

I just increased the kerning and leading of my text but not the size of the font as it was already at 16. It’s a lot more readable now. Thank you for the encouragement.

Reply

Jessica Bosari

Wow Derek!

Two things:

1. You should be writing splash pages / long form sales copy if you aren’t doing it already. You’re a natural!

2. The way you put the font resources at the end of the article kept me reading throughout, even though this is the one thing I was looking for. You hooked me enough with your intro that I kept reading to find it instead of going elsewhere, something few bloggers ever pull off with me. VERY skillfully done!

Keep up the kick as blogging.

Reply

Matt DeLucia

It’s interesting, when I go in to see a new client (usually law firms as my firm does law firm websites) and the conversation inevitably goes to other law firm’s websites, when we go through their competitors I can invariably tell when the website was designed… not an exact date of course, but certainly the year. While some of this is inherent in where my head has been over the past 15 years (looking at these darn things, law firm websites ugh!), much of how I can tell the date of a website is from their fonts! Not just the style (outdated, modern, etc.) but from the size. I have noticed that lately some of the best websites (including some we have designed, of course!) utilize larger easier to read font typefaces that don’t require any adjusting from the user, be he/she 20 or 80 years old. That is important, as many websites still churn out huge amounts of content with a default typeface that no one above 25 (I’m 52) can read without reading glasses and a crooked neck! So I do like this move toward better and larger fonts… if I want to read a book I’ll take one into my bed… if I want to read online for knowledge please make the fonts larger!

Reply

Joep van Os

Hi Derek,

This is a great article.
Filled my sunday with reading and applying this post to my website.

I really like the Helvetica font too. Was using arial before, now changed it to Georgia, great! The whitespace between the lines is a great advice, website reads much easier.

What do you think of the result?
http://archilecture.nl/blog/8-secrets-of-using-dwg-files-in-vectorworks/

Also changed the colors to two. Black/grey and a green one, works well I guess.

Keep on posting blogs like this!!
Helps me a lot!

All the best,
Joep

Reply

Hans Koevoet

Well, Joep, I’m getting a 404, but it’s a nice one ;)

Reply

Joep van Os

I have a tip for you as, if you like to know…
It would be very nice to add a ‘back to top’ button in the lower right corner.
I’m using a Macbook Air and I have to scroll al the way back to the top, to find the menu.

Yep, what a luxury right?
It’s because all the great comments on your posts…

There’s one on my website.
I’m prepared to get lots of comments… ;-)

Joep

Reply

Zulhilmi Zainudin

I’m Helvetica lover! :D

Reply

Josh Cintron

Nicely said. Just confirms my belief that BIGGER is BETTER. Lol.

Reply

Bogdan S

I’m glad that spend 5 minutes on reading your post. After reading it I jump straight to my site and double checked my font and guess what I was using 12 px, that I hardly can read it myself. After I applied your advice and change it to 16px, my friends and clients told me that looks much better and they can read it easily. Thank you again for this great info.

Reply

Wayne Hanby

I enjoyed your article. Have you ever addressed the colors of fonts and the color of the background? For example, I am considering using a turquoise background with white text. What do you think?

Reply

Ali

This clears up all the questions in one’s minds about using fonts in websites. I would still suggest going for 16px for boyd font, though. And depending on the font (Arial/Helvetica vs. Georgia/TimesNewRoman) and how you feel it looks on your page, 18px would also be an option. Especially if your headlines have big font sizes. Thanks!

Reply

John

Hi Derek, First off great article. You clearly have done some research into this. I have always gone for verdana or arial which I understand are specifically designed to be easy readable on a computer screen. I try for at at least 12px this would be the minimum for visually impaired. 16px if possible. Which we should all be mindful of.
Also try typing some 16pt verdana and 16pt Perpetua. The point size of a typeface is not the same as its apparent size. It is the apparent size that it important. 16pt Perpetua is a instant turn off, to small, cannot be bothered reading that. With something like 3 seconds to get the readers attention before they click off the screen it needs to be right first time. The content quality will not matter if no one will read it. The other important factor which you use very well is white space and loads of it.
Stay Well Stay Happy
John

Reply

Leave a Comment

{ 5 trackbacks }

Previous post:

Next post: