How Typography Affects Conversions

When you think about conversion optimization, what comes to mind? Testing colors, call-to-action buttons, headlines, and other elements including text, right?

Although those elements do affect conversions, what about other design aspects such as typography?

I know what you are thinking. How the heck does typography affect conversions? Well, certain font types will affect people’s decisions in different ways. For example, if you are trying to get your users to agree with a passage, they are more likely to do so if you use the font type Baskerville.

If you are worried about readability, you may not know that data shows Tahoma is the most legible at size 10, Courier at 12, and Arial at 14.

To show you how you can use typography to increase your conversion rate, I’ve decided to create an infographic:

Click on the image below to see a larger view:

How Typography Affects Conversions

Click here to view an enlarged version of this infographic.

Conclusion

Don’t overlook the little details when it comes to conversion optimization. Sometimes it is the simplest things that have the biggest impact.

For example, having the cursor blink in the search box of Quick Sprout increased conversions by roughly 16%.

search box

When you are testing how typography affects your conversion rates, don’t take the data above as the be-all and end-all. You can use it as a starting point, but you should still run A/B tests to make sure you are seeing a lift in conversions.

Embed This Image On Your Site (copy code below):

If you want to break through to real profits online, you need some serious firepower. For a limited time I’m sharing some select tips and tricks Amazon, Microsoft, NBC & Hewlett Packard paid thousands of dollars per hour for, FREE.
  • The step by step guide to monster traffic generation
  • The how-to guide for increasing conversions on your website
  • 7 Cashflow killers your analytics tools are hiding from you
     
 
100% privacy, I will never spam you!

Comments

  1. Nice infographic Neil … !

    One quick question – have you tested using unconventional font colors to help improve conversions?

    For example, other than using black on a whit page, you use grey or red on white page.

  2. Hi Neil,

    Very cool infographic. Yes, typography definitely affects. I do not completely have control on this thing but I know why sometimes my conversion rates are higher and why lower on other times.

    This also plays in important role. Thank you for bringing out attention to this aspect.

    Thanks
    Kumar

  3. Very interesting! I made to adjustments to my site but will back track to reconsider my choices! Always great information Neil. Thank you.

  4. Why did you make your website opposite to what is recommended? You have serif as the body and sans for title and subtitle.

    • I noticed the same thing and was about to comment on it. I look forward to Neil’s response to your question.

      • Maybe because it is said that serifed fonts help build more trust.
        I read in some older book about typefaces that serifed fonts help build more trust because it makes the text look more professional and that’s pretty obvious. So, you will get mixed results when you change your font style. You will get a more readable text when using sans serifed font, but also, will look less professional. The site niche and persona of the readers also matters when picking the font. Like, I would pick a serifed font for a law blog/site and sans serif for an entertainement site. There is no magic rule when picking a font, you should always be testing what’s best for your site, niche and readers.

    • It should be switched. I was testing fonts with the blog to see if I can increase readability and I think my dev messed up a bit.

      But it wasn’t his fault initially as a few years ago the designer had it setup the way.

      When we did a/b testing on some of our software sites with fonts, we found that typography is actually having a nice small impact on conversions. :)

  5. Finally something I can comment on without looking like a fool :)
    This is all great stuff, I used to learn that so I can vouch for it. Here’s a few stuff I might add:

    - Comic sans, avoid like the plague, most hated typeface ever. Plus it makes you look kindergarten

    - Helvetica might be overused everywhere (Subway signs, American Apparel, etc), hence the negativity

    - Font size matters but so does line length. Too long lines and you will lose interest. 60 characters including spaces seems to be the most recommended.

    - Space between line aka leading is very important also, eases the eye travel from line to line

    - The part about How people organize information, it’s based on the Gestalt Laws of perception. While it’s a bit out of the scope of Typography, the law of Pragnanz might be useful for bloggers. It states that we see in the simplest way possible, we see the big picture first.

    So put your blog up, stand back from the computer and SQUINT. It will tell you what is see first, what is prominent, what is not prominent enough (CTA!), etc….

  6. Not surprising about Comic Sans. Specialty fonts are amazing for special effects, but not for full sentences.

  7. A cursor blinking = 16% conversion increase? That’s nuts!

  8. Thank you, thank you, thank you. This is a great post and all the thank you’s are for the time and care you put into writing these posts!

  9. Hi Neil

    This is my first visit to your blog. And it seems like a wall of success for every blogger. You done a very great job.

    Thanks to share all the useful tips.

  10. Hi Neil ,
    I thought this tool can help everyone in typo graphy . http://www.pearsonified.com/typography/. We have been using this for our web designs

    Cheers!!!

  11. Flo Williams :

    Typography is very important to perception in my opinion. I receive email from a couple of marketers that insist on using a font, not sure the name of it, that looks like old manual typewriter typeface. I have a strong negative reaction to it. I wonder why they don’t know this.

  12. I’ve considered many things that effect conversion but honestly font never occurred to me. I think its time for a personal experiment. Great post! Nice info graphic.

  13. I’d still recommend always using 16px as the standard font-size for the web.

  14. Great Neil, I agree with you. Topography affects the conserversion. On my personal blog, I experience this many times and it works. It grabs users attention.
    Thank you for your case studies in infographics.

  15. Hey Neil,

    Line spacing (the vertical distance between lines) also matters.
    It is believed, that usually the op­ti­mal line spac­ing is be­tween 120% and 145% of the font size.

    But I’ve seen tendency that more spacious WordPress themes have become popular (more blank space, less clatter), And they have bigger line spacing.

  16. You nailed it Neil. Great article!

  17. hi neil ,

    Great post i never thought that typgraphic plays such a huge role in online business. I don’t know but i like to use Comic Sense font in my document but after reading your article i will try to change that.

    thanks

  18. Neil I didn’t even know that Type can affect conversions the old adage is true, you learn something new every-day. I might have to try this on my site and see if it does increase my conversions.

  19. This is a great infographic! Thanks for sharing, Neil!

  20. Great infographic lot of info. Thanks for shaing.., Neil!

  21. Serifs for the title and Sans Serif for the body. I will use it. Thanks Neil

  22. Great post! People generally ignore how typography affects conversions. Thanks for this useful information.

  23. Thank you so much for sharing this infograph… I was struggling with my template font style for getting a font type which can fit my site design….

    Now i got a way to do that… interesting stuff from you as always…

    Thanks again ;)

  24. Typography is a really integral part of design. When you look at a blog, you’ll notice just how much text there is on the page and how much of an influence it can have on the design as a whole.

  25. Neil you said

    “having the cursor blink in the search box of Quick Sprout increased conversions by roughly 16%.”

    How you managed to conclude that the cursor blink was the factor that increased your conversions?

    And being broad “How can we conclude that which factor or which change made inside or out side the site affected the conversion rate”?

    • I ran an A/B test. That was the only change I made and the software said the results were “significant” which is how you know you can conclude a test.

  26. Hi Neil,
    I’m super new here, just wanted to say thank you for all the heart you put into your teachings. I’ve always received compliments on the way my blog looks and reads, but there are a lot of behind the scenes boo boos I’m working on thanks to your course. What do they say, when the student is ready, the teacher appears?
    Thanks!
    Robin

  27. Neil unless I am reading it wrong, aren’t you using a Serif for the body while you have said in the infographic that a Sans Serif should be used?

  28. Hey Neil, Really awesome inforgraphic. I truly appreciate this in fact I think this is your one of the best infographic ever. But still this post left one question in mind is that font size is really matter in infographic??. And thanks for the lovely post.

  29. What about fonts at 16px +. I’m seeing more websites using larger fonts for improved readability. 10px or 12px seems awfully tiny.

  30. Hey Neil, great bit of info here thank you, I wanted to share it on google plus but only have the option to tweet it as I’m browsing on my phone, is this normal?

  31. Your infographic recommends serf type faces for headlines and sans-serf for the body text yet this article is done in the reverse.

    Is there some reasoning behind this or is it a case of do what I say not…

    Personally I prefer a nice clean pages with all sans-serf type and have been doing a site this way. My worry is that it may make the site look to simple, not “professional” for the visitors.

  32. Great article, Neil! When I launched my blog a few months ago, I was very focused on the look and feel of the site design, colors and fonts. I wound up using custom fonts to create a unique site experience and because I thought they were clean, simple and beautiful. However, this article made me realize I did not conduct any research on readability, etc. so now I am worried that my site design is solely based on something I personally liked. I am curious if you think my blog aligns with your findings in a positive or negative way (my fingers are crossed that it is positive :) Thanks in advance for any help or input! http://www.lemonstolemonade.net

    • The site is fine and you should just create a design that you personally like when you are starting off. It makes things simpler and cheaper, especially from a time perspective.

      Once the site becomes more popular you can pay to get it changed, but for now the site looks good enough.

      Focus your efforts on traffic generation.

  33. rohit addnectar :

    Interesting Article Neil!!!!!!!!!!!!

  34. Awesome as always Neil.

    Very informative post and I loved the Infographic, infact I am stealing it as well talk :P but offcourse with attribute to you :D.

    Thanks

  35. Neil, any idea from where i can get the Serif and Sans Serif font?

Speak Your Mind

*