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.
Do you want to grow your blog?
Use simple tactics found in this free ebook to attract your first 5,000 subscribers
Yes, send me the free ebookThe 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.
Do you want to grow your blog?
Use simple tactics found in this free ebook to attract your first 5,000 subscribers
Yes, send me the free ebook
Am I missing something here? You talk about 16px being the new 12px and you talk about using Georgia — yet on this blog post, the paragraph text is 14px and the font used is Calibre!
As I read through your post, I felt myself connecting more and more to the post. I read very quickly and agreed with what you had to say, and the tone of the post. I think it was the font man… I’m changing things up!
Mike, I wanted to give you a HUGE shout out. This is a great post. I’ve always known how important font is but reading this helped me to see a different perspective. I am a new blogger and to be honest, I’m exhausted. I knew it would be a lot of work but DANG. 😉
Thanks again for a great read and very useful info. I’m off to make some changes STAT.
Maria
Derek, articles like this one is why I really love your blog. This is going to be SO HELPFUL for my blog and future readers! Thanks Man!
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
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!
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?
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.
Nicely said. Just confirms my belief that BIGGER is BETTER. Lol.
I’m Helvetica lover! 😀
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
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
Well, Joep, I’m getting a 404, but it’s a nice one 😉
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!
Couldn’t agree more. And I have worked for multi-national law firms! It surprises me with what their websites have used for font size. If i were a client, I’d be turned off.
My site on the other hand… might not be much better. 😐 Need to work on that!
I hear you and couldn’t agree with you more. And even those books I take to bed would be more fabulous and a hell of a lot easier to read if more of them came in big print. Instead, I have to buy readers and keep them all over the house.
Working on my website and using Georgia 18…Researching to spice it up.
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.
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.
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.
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.
… doesn’t seem Derek is around here anymore?
hi derek, just wanna ask.. what font do use for ur sidebar coz u dont mentioned it on your post
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.
[…] reviewed some of the research on fonts in his excellent post, What’s the Best Font For Your Site? (The Psychology of Fonts). Derek writes, “Once you know the psychology behind fonts (simple and fancy fonts), there is […]
Nice thought. It helps for people who are still new in these field 🙂
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?
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.
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?
[…] A couple of weeks ago, Derek Halpern wrote a data-driven post about how the size 14 is the new size 12. […]
[…] The Regular Text – This is self-explanatory. This is the text that people read on your site, and it should be no smaller than 14 pixels. […]
Useful. Thank You.
Is typography related to niche in any way?
“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.
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 ?
Thanks for your insights John 🙂
[…] Fonts – The style of lettering you utilize on your website should be easy to read not only for you but for your intended target audience. For example, if your website is geared towards the older generation, try to select fonts that might be slightly larger and easier to read. There is a whole science behind choosing the right font for your website. Check-out the following article by Derek Halpern if you would like to learn more: What’s the best font for your site? (The psychology of fonts) […]
No way for “The Art Of Flight” soundtrack ?? ok i’m trying to recompose this album one title by one title. ; I
[…] Is your font size the right size? […]
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
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.
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??
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/
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
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.
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.
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.
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.
Some great advices here – turned around and made a few changes to the website. Thanks.
sorry, ‘relatively’
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?
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!
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
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
Nice.
I love it when rules and art converge into a better user experience.
Thanks
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.
With the blogger service there isn’t much selection in fonts and sizes.
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
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
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.
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
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.
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!
Droppin’ pure science, as always Derek.
I like how you explained it simple language, along with your simple fonts 😉
Gil Sans Light when possible for body and Gil Sans Light all caps for headlines is my yummy.
Thanks, Derek.
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
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.
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.
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’.
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
What if I don’t like reading?
And I only want to watch videos?
🙂
Gideon Shalwick
Touche!
Hey Derek! What’s (aff) in reference to Thesis topography?
That means if you buy Thesis through that link, I earn a commission.
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.
If I am trying to convey a fun, playful theme on a site, would you recommend using Comic Sans?
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.
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!
Thanks Danika. Glad you’re digging it.
Watch now as 10,000 people’s sites change from Tahoma to Helvetica Neue and Georgia…
haha
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
That’s exactly what I love to hear. I’m a sucker for compliments, ha ha 😀
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.
You should check out the support forums for that:
http://diythemes.com/forums
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.
You’re absolutely right. Black font on light background is best. White font on black background is horrible.
Cool, I hadn’t come across the experiment before.
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
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?”
Gabriel, do you have new studies that suggest this or are you using the studies from 10 years ago?
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.
Where’s your research to back up this specious claim?
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?
Good point about that contrast, Viktor.
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!
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!
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
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.
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!
Wow! The typography tool is amazing, thanks so much for providing that link.
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
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.
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.
Thanks Chris. So glad I can get rid of my ugly fonts!
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 :>)
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
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.
Aw man, you left out my favorite font combination…
Small, fancy font on reverse type.
Guaranteed to impact results!
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.
Rather than using native fonts try http://www.typekit.com.
Moving to web based fonts made a big difference for me. 🙂
What about color? Does the color of the font matter?
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 🙂
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 🙂
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
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?
Yes, change the CSS of your design… or you can use something like Thesis and it’s a simple drop down.
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
Hey, love to hear that ;-D
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!
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
Derek,
I use Arial font on my sites and I like this one very much.
~Mir Imran Elahi
The first two were designed by Matthew Carter, specifically for computers. That’s why they work.
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?
Yes… but I wouldn’t use times new roman ever.
I’d instead use Georgia.
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.
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
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.
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
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.
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.
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!
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”.
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.
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.
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.
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.
Ha ha, I don’t write it publicly because if I did, everyone would use it ;-p
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.
I’d love to hear the results of that too.
“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.
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 🙂
I think he said: “…there are designers…” but he could be more clear.
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.)
You’re like that… as is everyone else 🙂
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
Nice to see you here Bradley. When did you change your domain name?
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
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.
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.
Hi Derek,
I will definitely go through my site and take a second look at my font. Thanks for sharing!
You’re welcome Cathy.
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
Funny how that works, right? People hate small or difficult-to-read fonts, and yet, people still use them. It boggles my mind.
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?
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.
Glad you liked them John.
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 😀
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 🙂
This is great stuff, thanks for the tips! I’ve always wondered about fonts, this is a nice guideline.
Glad you liked it Shane.
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
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 😀
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 🙂 ?
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
Yep. Works great. And the sidebar images + logo just tie it all together.
Really, really interesting (and helpful).
I went up a size after reading your blog. 😛
Perfect!
So if 16 is the new 12, are you going to change Social Triggers’ font? Right now you’re at 1.5 em. 😛
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.
Your site’s too narrow. As of Monday, I’m using the golden ratio AND size 16. Time to widen up, mate. 😀
I love that you back it up with research. Love this.
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 😉
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.
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.
Mike, have always been a lover of simple, crisp fonts. Love the clarity of your website. Nice job!
D.
Thanks David.
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?
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.
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.
You’re welcome!