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:
- A catalog of 915 font families
- Fonts available in 135 languages
- 100% free and open source fonts
- Fonts that are easy to install and the fastest to load
- Fonts compatible with all browsers and devices
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:
- Readability, which is the most important criterion. The font must be as readable as possible, whatever the type of screen used and the display resolution.
- Flexibility and diversity. The font must offer at least three styles (light, regular, bold…) in order to allow you to rank the pages of your website.
- Efficiency. You must choose a font with a full glyphset. In fact, many free fonts have a very small number of glyphs (= special characters).
- Compatibility. The font must be compatible with any browser. You must also take into account the “aesthetic” compatibility. The quality of the font must not be impacted by the quality of screens or operating systems.
How To Effectively Combine Google Fonts?
Here are some tips for finding good font combinations:
- Use Font Families: Font families are groups of fonts that go well together. Combining two fonts belonging to the same family allows you to vary your fonts without any risk of errors. Google Fonts are precisely grouped by families.
- Play with contrasts: The whole point of combining several fonts is to then be able to play with contrasts. It is interesting, for example, to combine a “fat” font with a “light” sans-serif font. Mixing two fonts that are very similar from an aesthetic point of view is of no real interest and affects readability.
- Limit yourself to a maximum of three fonts, both for readability and load time reasons. Adding web fonts tends to slow the loading time of your pages.
- Choose combinations depending on the type of content that is present on your site. If you go for a modern writing style and editorial line, choose a font that exemplifies this quality.
A few font associations that work quite well:
- Lobster & Cabin
- Raleway & Goudy Bookletter 1911
- Allerta & Crimson Text
- Arvo & PT Without
- Dancing Script & Josefin Sans
- Allan & Cardo
- Molengo & Lekton
- Droid Serif & Droid Sans
- Corbin & Nobile
- Ubuntu & Vollkorn
- Montserrat and Oswald
- Merriweather and Special Elite
- Homemade Apple and Raleway
- Permanent Marker and Open Sans
- Sniglet and Cabin
- Raleway and Open Sans
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.
