How Typography Of The Landing Page Affects Conversions?

What typeface to choose for your landing page? What type of font is the most appropriate to read on the computer or mobile? What is the ideal typeface for landing pages?

When designing your landing page, you will have encountered one of the biggest doubts that usually exists: typography. Finding the perfect typeface for landing pages is tricky, as each typeface has an “ideal” use and its readability varies.

According to many studies, reading on the screen is 25% more difficult and slower than reading something that’s printed on paper.

On the web, in fact, we read when we are really interested in it. We tend to look for highlighted words or more significant titles to understand if the page corresponds to what we are looking for. Everything that does not seem important to us and all those parts where the text is not easy to read is skipped by us.

Therefore, without a doubt choosing the correct typeface is a factor to consider when designing a landing page. It is not a mere designer whim: finding the right typeface can affect the conversion rate.

The shape of the words also has the power to communicate, beyond what the words say. Knowing that power and how to apply it is important to drive your marketing goals.

What Is Typography?

Typography can be defined as typefaces that share common characteristics. Numbers and symbols are also included in that common type.

All fonts vary from one another on issues such as thickness, spacing, serif, etc. All these elements make a typeface have its own, personal characteristics, necessary to differentiate itself from others.

How To Choose The Perfect Typeface For Your Landing Page?

The use of fonts can be very interesting and lead to results of all kinds. For this reason, it is not surprising that when designing a website, you end up making beginner mistakes, easy to solve.

Here are some tips you can follow to find an ideal landing page font:

1. Clarity Above All

Users generally do not spend more than a few seconds viewing the content of a page. For this reason, the fonts you choose must be readable in a very short time, and must be displayed perfectly on mobile. Use a few different fonts, to achieve a clear hierarchy of information that helps users quickly understand the content of the landing page.

Both Hind and Montserrat work very well for headlines. For smaller text sizes, like product descriptions, choose something serifed like Merriweather that works great for body text or Open Sans that adjusts to a wide variety of weights making it more versatile.

2. Combine Fonts With Each Other And With Other Visual Elements

It is an art to compose with types that combine well. However, it is not convenient to choose more than two or three different types for the same landing page, so choose wisely how to combine. A good tactic is to choose a font family and use its variants (light, bold, condensed).

And in turn, keep in mind how those fonts look with the visual environment of the landing page: the colors, the images, the layout. There are fonts that look great on a blank screen, but with some color combination they become illegible. Try different options to see which ones look perfect in your design.

Try the combination of headlines in Lato (Thin) with body text in Merriweather for something elegant. The titles in Roboto Slab and text in Open Sans are also very good for something more dynamic.

3. Convey The Essence Of The Product

Typography has the power to evoke certain sensations that must be aligned with the product or service that you are promoting on your landing page. And that has a strong cultural support: in certain areas, we are used to seeing certain typefaces.

Respecting those expectations helps to communicate the message more easily and connect better with the user.

If your landing is for wedding cakes, an italic typeface for the headline and an elegant Serifa to detail the menu will work best. If instead you have a technology startup for students, you will opt for a modern and practical typeface.

In addition to thinking about the product, service or category of your landing, think about your audience. For younger generations, aim for more trendy fonts like Roboto or Lato. If your audience is more mature, choose fonts that convey confidence and seriousness, such as Times New Roman or Georgia.

4. Take Care Of The Institutional Image

If you work with a brand that has a well-defined aesthetic, with a typography already established for its graphic content, you must take care that the typefaces of your landing are aligned to them. And if there is no guideline regarding the fonts to be used, check that they match well with the logo. The design of your landing can not be a collage of aesthetic cutouts. It should give a unified and pleasant message.

5. Be Original Without Losing Simplicity

Some designs deliberately seek to break some typographic rules to generate a new meaning. If you are going to design “out of the box” (for example, combining two typefaces in the same paragraph, or creating an entirely typographic composition, without images), you must do it intentionally and make sure that the artistic game does not go against your conversions.

Take advantage of the A / B Testing tool to find out which typefaces bring the best conversion results.

Where To Look For The Ideal Typography For Your Website?

By offering an intuitive and robust collection of open source designer web fonts, Google Fonts has established itself in the world of web design as the go to source for typefaces.

Google font is:

The richness and diversity of the fonts offered is undoubtedly an element that explains the success of Google Fonts.

To integrate a Google Fonts font, simply copy and paste a line of HTML code into the <head> of your website and fill in the @ font-face rule in your CSS. The integration is extremely simple, especially when compared with Flash or JavaScript integrations.

Plus, Google Fonts allows you to easily mix several fonts, in order to create combinations. The number of possible combinations is enormous.

On Which Criteria To Choose Your Google Fonts?

Faced with the quantity of fonts available on Google Fonts, a question immediately arises: how to choose a font? What criteria should be taken into account? Defined below are 4 criteria:

How To Effectively Combine Google Fonts?

Here are some tips for finding good font combinations:

A few font associations that work quite well:

Final Thoughts

The “bad choice” of a typeface is often blamed when a landing page fails to obtain conversions. However, bad typography is not always to be blamed.

A design that relegates typography to secondary place where it is impossible to stand out is very common. The font may be hidden by a photograph, a poorly chosen color, or a poorly selected font size.

Designing everything in such a way that it is striking and all the elements stand out by themselves is what is important. It does not matter if a landing page has many elements or not, the important thing is that the purpose of the landing page itself and its elements stand out.

To save time and improve conversions various landing page builder tools can be used. Some of the popular ones are Unbounce, Landingi, Leadpages, Lander and Elementor.

Vaibhav Lall

With more than 12 years of experience in digital marketing and consulting, Vaibhav is passionate about helping businesses grow through the strategic use of digital marketing best practices. When he's not busy advising startups, Vaibhav takes delight in listening to Jazz or John Mayer and Coldplay songs. He is also an avid proponent of the practice of mindfulness and starts his day with a calming meditation session. In his free time, Vaibhav can be found in quite corner, reading a Simon Sinek or Ben Horowitz book.