There’s a reason you can recognize an Apple ad right away. Same with Nike and Airbnb. A big part of that is because of imagery, copy, and layout, but typefaces play a huge role as well.
Although the ROI of having a strong brand is harder to measure than, say, clear button copy, it’s telling that some of the most respected companies in the world have strong design cultures and distinct aesthetics.
When designing landing pages, you need them to be on-brand, pixel for pixel. Great design is often a tell-tale sign of more sophisticated marketing (and can give you an easier time getting conversions as it can help convey that you’re well established). One of the most obvious elements that need complete design versatility on your landing pages is your typeface.
This is why Unbounce launched built-in Google fonts in September of this year. Now there are 840+ fonts to choose from for all your text and button needs, straight from the text editor’s properties panel:
For some inspiration on how to best use this newfound world of hundreds of fonts, we’re passing the mic to some of our in-house designers at Unbounce. See what they have to say about everything from the best fonts for creating a visual hierarchy to how your text can communicate emotion. Plus see what types of fonts they’re excited to use in their upcoming design work in the builder.
Break the rules where possible
Cesar Martinez, Senior Art Director here at Unbounce, hears a lot of talk about rules. But they’re not the be-all-and-end-all. As he tells us:
“Often when discussing typography with my peers, I hear about all sorts of design principles, some of which I’ve always challenged myself to learn almost as commandments. I realized that is very easy to fall into a vortex of overused principles of visual communication that can potentially damage your integrity (or what some call originality) as a brand.
|77db327da0df30fb360acca239dd46f2| (then A/B test to see what works and doesn’t). For example, you could use more than two typefaces in one paragraph, break the kerning on your headers, use a big bold-ass serif on a semi-black background and see how it looks with a thin handmade brushed calligraphic font as the subheader…I know it sounds crazy, but this can lead to unexpected results and it’s something I’m really looking forward to doing with the builder’s new built-in Google fonts.”
“I love what ILOVEDUST does when it comes to typography. I also recommend reading Pretty Ugly2 as an introspection of “bad” typography applications that succeed in the way they communicate a visual idea.”
|250b0c1a87835ec81dbcb494a96a161e| Roboto, Playfair, and Abril Fatface.
Denise Villanueva, a Product Designer, created our Unbounce Academy with clear and consistent hierarchy in mind.
“Good typography is the most straightforward way to create a clear content hierarchy. That, above anything else, should be the main criteria of choosing typefaces for your brand.”
Denise provided some specific pointers to help you achieve sound content hierarchy on your landing pages:
“When in doubt, using one font family in 2–3 weights (or two font families in 1-2 weights) will work the vast majority of the time. Using more than three typefaces can be distracting and chaotic — avoid doing it.”
As an example, Unbounce’s Fitspo template features the Raleway font (in all caps for headers and sentence case for regular body copy) and a clear, attention-grabbing header with supporting sections that guide you further down the page. Think of it as presenting your information in clearly defined levels that are easy to read.
landing page template" width="650" height="1178" class="aligncenter size-blog-medium wp-image-66704" srcset="http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo-650x1178.jpg 650w, http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo-44x80.jpg 44w, http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo-83x150.jpg 83w, http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo-768x1391.jpg 768w, http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo-138x250.jpg 138w, http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo-1000x1812.jpg 1000w, http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo-300x544.jpg 300w, http://unbounce.wpengine.netdna-cdn.com/photos/Fitspo.jpg 1280w" sizes="(max-width: 650px) 100vw, 650px" />
For Denis Suhopoljac, our Principal User Experience Designer, using the right typography can evoke feelings in your audience:
“Typefaces are all about composition, harmony, and mood rolled into one. |82f861e7a6061cc408a7c968f5c544ea| When it’s done right, typography makes your copy (and your entire brand experience) legible, readable, and appealing.”
To Ainara Sáinz, our Interactive Designer, good typography can do double duty and save you from having to use other supporting imagery.
“If typography is done well, you don’t always need extra elements like images, backgrounds or even colors to reinforce the message. And sometimes, the execution is so flawless that the audience might not even need to know how to read to understand and feel the message behind it. Like Ji Lee’s Word as Image project—just… wow.”
Having solid branding does wonders for a brand’s credibility, and our customers have been telling us that they want to get in on the action. Get into the builder today to explore the 840+ new typeface options available, and find your favourite pairings for your next landing page.
~ Thomas Jefferson