While font might not seem as big of a deal to match across platforms as other design elements, it really does make a difference. As we covered in our conversion-centered design guide, our brains process visual information up to 60,000 times faster than text. So, we’re processing what text looks like before we even know what it says. Check out how you can tell these two landing pages come from the same people: Image courtesy of Compressed.FM Image courtesy of Compressed.FM While both landing pages have similar design layouts, it’s the “Advent of ____” header at the top that ties them together. They use the same sequence of fonts to keep both events on-brand. Keep your font combinations simple After you gather fonts that match your brand, you might end up with a long list. Cut it down to a handful of fonts to use for headers and body text, and make it even shorter for your landing page designs. We recommend sticking to two typefaces for landing pages—a header font and a body font. Why?
We understand most folks reading this blog are scrappy marketers with a lot on their plates. If you don’t design web pages for a living, it’s hard to plan with and track more than two fonts on a landing page. It’s famous for designers to mix fonts from different categories or use a bold typeface as the header for a regular body typeface. Experiment with your font pairings to find a combo that fits your brand. Tools like Font pair will help you nail the right mix. You can see a serif and sans-serif combo in action on Sprout’s landing page: Image courtesy of Sprout buy email list Sprout uses a serif font in headers and sans-serif font everywhere else. Both typefaces feel friendly to match Sprout’s status as a videoconferencing software for hanging out.
buy email list
Even though the page only uses two fonts, it differentiates subheader, button, and body text by playing with typeface sizes. Keep Your Typeface Style on Point After you choose typefaces that mesh with your brand, teach yourself how to use them on a landing page. Get familiar with font sizes, kerning, and leading to keep your text legible. Our guide to landing page typography will get you started. A landing page builder with built-in templates and style guides will also make your life easier. The templates will handle font formatting for you, while the style guide will note your font choices for future reference. Unbounce’s Smart Builder’s got ‘em both.