Get the Top 10 Inbound Marketing News - once a month:

  by Anurag Gupta |

Typography Tips For An Incredible Web Design


Turning their website into a mean lead generating machine is indeed the top goal of marketers. They relentlessly invest their efforts in optimizing the keyword density, Meta tags and links in hope of increasing the conversions.

Professionals spend time and efforts on loading the landing pages with SEO juice, while basic elements like typography are often overlooked. Along with on-page SEO, Search engine rankings are based on the human behavior on a website and by enhancing the overall experience on the page you improve the bounce rate, session time and exit rate to a large extent.

So, consider your website. If despite a strong SEO and design it is failing to bring in expected conversions, read this post and know how you should merge your keyword optimization efforts with typography to extract best results.

How Typography Influences User Behavior?

The font is one of the fundamentals of a great website. Being a transformative element of the design, typography gives a personality, voice and visual hierarchy to your landing page. In fact, 95% of the design is typography.

So if you want to convey your message to the audience without any distractions, avoiding typographic errors should be on the top of your list. While on page SEO improves your ranking on search engines, typography enhances a website’s UX, and thus increases the engagement and session duration.

Typography Tips:

Use Header Tags Properly

Usage of header tag plays a dominant role in giving a visual hierarchy to your text. As per W3Schools, <h1> to <h6> tags are used to define the heading on your web page. While <h1> is the boldest and used to highlight the most critical content on a page, text under <h6> is the smallest and holds the least importance.

Categorizing your text under the heading tags make design easier to scan for users as well as web crawlers. As search engines now give a lot of importance to user experience, the spiders check the relevancy of the content with the header tag associated with it.

Key Takeaway: W3Schools recommend using one <h1> tag per page and structuring it with sub headings. While optimizing your keywords, put the focus keyword in the Meta tags, title and <h1> to enhance the website’s ranking.

Pick Standard Fonts

Making the website look fresh and exciting is every designer’s goal but playing with the font type might not be the only way to achieve it. Users are familiar with standard fonts like Times New Roman, Arial, Calibri, Helvetica, and Trebuchet; therefore, read them faster. Stick to the basics, unless your page needs a custom font for branding purposes. While using standard fonts may limit your creativity, avoid making bad decisions and risk readability.

Key Takeaway: Use standard fonts with around 60 characters per line on your page to enhance the readability. It would engage users and lower the bounce rate.

Display Legibility

Today’s readers are picky and read only the content that interests them; therefore, you can never go wrong with minimalism. A de-cluttered website with appropriate whitespace is an instant turn-on for a visitor.

Introduce breaks to your copy and keep the paragraphs to 4-5 sentences with one concept. You can also add well-placed bullets and make the text easy to scan. Breaking up the content and presenting the important ideas grasp users’ attention right away and keep them glued to your website for long.

Key Takeaway: Presenting content in bits with one idea at a time allows users to skim through the content with ease. Also, you get bonus points for a clutter free interface with visible CTAs.

Pair Cautiously

After you’re done selecting the font/fonts for your website, you also have to consider which typefaces will work well together. For example- Sans Serif fonts are good for your text, while Serif is recommended for the titles. While fonts from the same family go well with each other, you can also pick different fonts.

Remember one thing; avoid picking more than two fonts per page as it makes your page look unprofessional and cluttered. Also, stick to the similar structure and fonts throughout the website to maintain consistency in your design.

Key Takeaway: When you use too many fonts they all fight for attention, and thus reduce the impact of the design. Pick only two fonts and use their serif and non-serif counterparts to balance the impact of the content.

Create an Experience

Use vivid color shades and bold gradients on the background to create a dramatic experience for your visitors. Typography isn’t just for reading. Use this tool to evoke emotions and enhance storytelling.

Dramatic typography with rich colors helps in building a brand’s personality to a large extent. Create an eye-catching composition that facilitates storytelling. Using this approach will enhance user recognition and engagement in your brand.

Key Takeaway: While working with dramatic typography and rich colors, keep your narration precise. Select one key selling point for one page and ensure website’s usability through an easy functionality.

For WordPress – Use Plugins to Improve Design

WordPress knows that good typography increases session duration by enhancing the user experience; therefore, many premium WordPress themes already come with typography plugins that let you play with the typography on your page.

Some of the plugins that designers can leverage are Typekit Fonts for WordPress, Google Font Manager, wp-Typography, Easy Google Fonts and Zeno Font Resizer. All these plugins let a user improve the typography on a page without tweaking any code.

Key Takeaway: The mentioned typography plugins are effective and easy to use; however, you have to find out whether your theme supports them or not.

Key Takeaway

Don’t overlook the little things like typography while optimizing your pages as it has a great impact on how people perceive your website. If still in doubt, work on your typography and run an A/B test to observe the change in conversions. With the hope that this article makes you do wonders with your web design, I take your leave. Thank you!


Double Your Growth.

We curate the best of inbound marketing news and send over the top 10 we know will contribute to your growth - once a month.

Skip to toolbar