The Top Considerations for Choosing the Right Typography for Landing Pages
Subtle elements of design make a big impact on how users view websites. Web design can get complex when it comes to typography. Each font has its own personality and can evoke different emotions in people.
When generating a new landing page, you must consider readability, tone, uniqueness, and overall brand image. How multiple font families mesh can also impact the feel of the landing page.
Typography falls flat if the user can’t decipher the words. Some font families become unreadable at smaller sizes, and people may access the page via different device types. Consider these factors to determine the best way to set the type on your landing pages. You can also study these examples of how typography looks when it’s done well.
1. Know the Page’s Objective
The purpose of a landing page is to convert the user in some way. Understanding the goal helps you choose the right typeface style and the typographical hierarchy to move the user from point A to point B.
Judy Blue shows how a typography hierarchy can guide the user to the goal. The font appears in different sizes and weights as people move down the page, showcasing the most important headers and elements.
Users may not understand they’re being guided to a call to action (CTA). However, they will intuitively know that the large text is the header and subheader and that the text on the button on the lower left is a clickable link. Clicking on it lets them share their email to get discounts and rewards.
The goal of the landing page is to gather leads for future collections or current sales, and the typography hierarchy works to push the user to that result.
2. Focus on Readability
Typography in web design gives designers a chance to let their creativity shine. However, readability must be the priority. The most beautiful design is effective only if the user can read the text.
Pay attention to how the page looks on different screen sizes. Stand up and look at the design from across the room. Does the site have a nice balance between font sizes and other elements?
Some typefaces are more legible than others. Go with a sans serif font for a more modern look or utilize a serif type for traditional tones.
3. Choose Emphasis to Highlight Words
Landing pages often invite the user to focus on a specific offer or information to move them from the discovery to the decision stage in the buyer’s journey. Knowing when and what words to highlight helps you choose the best typography for the page.
Wilsonart uses typographical emphasis to highlight the words it wants users to pay attention to. You can use the same font for the entire page if you change weights, emphasis and points. Note how it utilizes a larger, bold font for the first header line and italicizes the second line to put stress on the verb. The finer details are in a lower point font with no emphasis.
4. Add White Space
Excellent typography in web design happens with design elements other than the text. For example, you must add white space around your headings to attract attention. A CTA button works best when you have a bit of background and a buffer around the letters.
You can also draw additional attention to specific text by adding extra negative space around the type. Another technique to make words stand out involves tightening or expanding the space between letters — kerning — or adjusting the distance between lines.
5. Consider Mobile Usage
Most customers access the internet via their smartphones at least some of the time. Your landing page must be mobile-friendly to convert the most number of site visitors possible.
Crumbl Cookies offers an excellent look at how typography should adapt to different screen sizes. The text on its landing page is limited. However, it remains the same font, bold and nicely contrasted against the mobile and desktop background.
Note how the font size reduces slightly so the text doesn’t fall off the edge of the narrower smartphone screen. The menu remains a hamburger on both devices. The CTA button relocates to the bottom of the screen on mobile so there is more room for a larger logo at the top of the page.
6. Limit Different Fonts
A key consideration for typography web design is limiting your fonts on a landing page. If you tap into too many different styles, the user may feel unsettled and not even realize why.
Non-designers don’t understand why they have the emotional reaction they do to a page. They just know whether they like the design. It’s your job to learn the rules of thumb in the industry and do your best to create a visually appealing site that doesn’t distract from the page’s purpose.
7. Choose the Right Tone
Each company has a personality. The landing page tone should match the brand’s. If you have a fun, lighthearted approach, the font should be modern, with large, swooping lines and plenty of space between letters. You might choose san serif and closer spacing if you have a more formal look.
Perfect Keto taps into the emotions behind different typefaces to create an encouraging, positive tone for its online retail site. It uses a thick and swooping headline font with open curves. It mixes serif and sans serif, giving it a modern look.
The tone is casual and fun but also authoritative. Finding the exact typography that matches your brand’s personality may take trial and error.
Best Typography Web Design Tips
Although technology is advancing rapidly, the tried and tested rules behind typography remain the same. The design styles that worked 400 years ago still apply today. Typography may be digital, and there may be a larger selection of fonts, but the basic excellent design will always factor in key elements that drive user experience.
Eleanor Hecks is the editor of Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.
Need Help with your Digital Marketing
Submit Your Info and We’ll Work Up a Custom Proposal