Typography 101: How to Choose the correct Landing Page Fonts

Posted on Posted in Blog

Visualize you’ve finished generating your brand name plus messaging. After hours of study and brainstorming, you do have a name and an offer you’re proud of.

Then you send those people deets over to your designer, and they come back again with this business credit card :

You’d cringe a little, right? You might be cringing at the moment.

As a marketer, you know your choice of words matters. Well, your font choice issues as much as your messages . This basic principle applies to any marketing asset, including your landing page.

Consider this guide your crash course in the world of typography and how to use it best in your landing pages.

The Psychology Behind Typography

What makes every font “feel” different? You will find the answer within your noggin .

According to psychological research, we treat each font kinda like people— we give each typeface its own “personality. ” For instance , Americans find satire written in Times Brand new Roman funnier and sassier than in Arial.

These research findings mean the fonts you choose for your squeeze page will impact exactly how visitors understand your own copy . You might not even realize that you’re giving your landing page an underlying tone through your typography.

For example , the name “Browman & Sons” can seem like it belongs to another business depending on the font you write it in. Which of these font choices looks like it belongs to a lawyer? Which should belong to a list store?

You’d probably associate the very first typography choice having a law firm and the 2nd with a record store. (Unless you’re dealing with some funky lawyers. ) The very first example’s use of a traditional font feels expert, while the second example’s round script seems fun, vintage, and artsy.

Any time a font carries baggage

Since we assign every font its own character within our brains, some fonts also have specific reputations in our minds—good and bad.

Plenty of fonts carry a backstory because of branding. Look at this logo and ask yourself: What’s wrong with this picture?

Pop this logo on a hoodie and call it fashion.

Supreme and Disney are two brands with very distinct fonts, so pairing the Supreme-style logo and a Disney-ish font just doesn’t look right , huh?

Sometimes, a font has a not-so-great reputation . For example , many people consider fonts like Jokerman and Comic Sans cheesy.

Keep your font’s reputation in your mind and how it’ll affect your website landing page . If each font is like a person, you want to keep a network of fonts with good reputations and no conflicts of interest.

Typography 101

Now that you recognize the emotional impact of your font choices, here’s the nitty-gritty behind typography and its design specs .

Type classification and families

Fonts fall into four broad types:

Font Family Types
Image courtesy of Design Shack.

Let’s dig a little more in to each font type listed in the picture above:

  • Sans-serif: No divots or embellishments at the ends of the letter (e. g., Arial, Verdana)
  • Serif: Includes divots or flourishes at the ends of each letter (e. g., Times New Roman)
  • Script: Curvy with connecting strokes, like cursive handwriting (e. g., Lobster and Sacramento)
  • Slab: Extra thick and distinct letter strokes with or without serifs (e. g., Rammetto One and Slabo)

You’ll mainly see sans-serif and serif fonts used on a landing page . Some pages use a slab or script font in a headline, but those font categories don’t work well for body copy.

Another type of font you may see used outside landing pages is just a decorative font. While the name implies, their purpose is to decorate a design. These fonts often come custom-made, making them less ideal for site content like landing pages.

Editor’s note: If you’re scratching your head over what kind of font to use on your landing page, you can sign up for the guesswork with a template. Templates like FreshGoods simply take the guesswork out of font choice and combination to help you focus on making great content.

Kerning and leading

The area between your letters and lines matters as much as your font choice. Jumbled text is tricky to read, and text with too much spacing just looks off. You want a good balance of white space for better visual appeal and simple reading.

Let’s go over two terms to help you space your text the right way: kerning and leading.

Kerning is the amount of spacing between letters. Fonts generally have one of two monospacing types: proportional and monospaced.

Proportional vs Monospace
Image courtesy of Wikimedia .

Some fonts have tight kerning between specific character combinations, so give your text a once-over before finalizing your font choice .

Leading is the amount of spacing between lines of text. If you’ve ever had to write a document for someone else, you know how important line spacing is for readability. Look at the big difference leading makes in this text:

The 2nd example feels crowded and hard to learn, right? As you structure your splash page text, make sure every line has enough space to be legible .

You should also realize that kerning and leading can differ between desktop and mobile layouts of a landing page . As you review your text spacing, check both your desktop and mobile formats. A mobile-friendly landing page builder will handle most of the work for you.

Size

Typography isn’t one-size-fits-all.

You really paid attention to that line, right? In typography, larger fonts suggest more important text, and smaller fonts represent less critical text.

Due to that rule of thumb, you’ll see titles and headers in larger fonts than body text.

However , make sure that your human body text isn’t too small—you want your visitors to be able to learn it. According to usability research, your body font should be at least 12pt for younger readers and 14pt for older readers. And honestly, since so many folks read websites on mobile, you ought to aim for even larger sizes .

The Learn UI Design Blog recommends the following font sizes for mobile-responsive web sites:

  • Body: 16pt
  • Text input: At the least 16pt
  • Secondary text (captions, etc . ): 13pt or 14pt

They also suggest staying with about four different font sizes throughout your page —any more is going overboard.

This website landing page from Intercom has good contrast among its header, subheader, and body font sizes while keeping everything readable:

Image due to Intercom.

Intercom writes their header—and main product benefit—in a font that’s at least twice as large as the subheader font to make a huge impact. You don’t have to make your font sizes as distinct as Intercom, but you want to have different header, subheader, and body font sizes throughout your landing page.

Color

Your font’s color affects its psychological impact and its own legibility on your page. If you’re working on your landing page design from scratch, make sure your font color matches the sensation you’re going for and works with surrounding colors.

Contrast is your number one goal for font color. Generally in most landing page designs, back ground and image colors do the heavy lifting for emotional impact. While a green font on a black background might seem cool, you’re gonna have trouble making it easy to read.

If you decide to go unconventional with a non-black-or-white font, use it to draw attention . Think headers and subheaders. Since those text lines come in large sizes, readability will soon be easier to achieve.

This advice doesn’t mean you have to avoid mixing fonts at all, though. You just have to combine them strategically. Try using a color wheel tool to find complementary colors for your font.

Peep this squeeze page contest design for clever use of unconventional font color:

Image courtesy of 99designs user Prismonline.

See those satisfying hints of yellow? The hero image header text pulls yellow from its form box to emphasize benefits. Look for approaches to keep your font colors consistent with your landing page design while drawing the eye where you want it to go.

Pairings

Landing pages that use a mixture of fonts look more dynamic than pages with uniform fonts— if the creator plays their cards right .

If you decide to enhance your landing page with a font pairing, it’s best to mix fonts from different categories . (Think a serif with a sans-serif or a slab with a sans-serif. ) This list of more than 30 font pairings can help eliminate the guesswork and stoke your creativity.

Wanna see website landing page font pairings for action? This example from the Place for Mom mixes a serif header with a sans-serif subheader:

Font Pairing Example
Image thanks to A Place for Mom.

Both fonts look distinct but elegant enough for a serious topic like senior care. Once you choose a font pair, keep in mind that both fonts should match the theme and tone of one’s landing page .

Remember to Note Everything in Your Style Guide

Once you find some fonts that mesh with your brand, you’ll look more professional when you use them consistently in your marketing assets. Make a note of these typefaces in your style guide , including ideal font styles, kerning/leading, sizes, and colors. That way, the next time you need to make a landing page or another piece of marketing content, you can choose from your style guide and progress to creating.

Design Your Landing Page for Conversions

As you choose the fonts for your next landing page, remember this: Your visitor’s experience always comes first.

It may be tempting to use a bunch of different fonts, colors, and formatting all at once. But, while it’ll be fun for you personally, your visitor may possibly bounce because of font confusion (nobody loves to have their eyeballs assaulted). Start simple, and get more creative as you get a handle on landing page design best practices.

Your visitors will relish it, and you’ll have a better chance at those sweet, sweet conversions . Looking for more conversion-focused landing page design tips? Check out the 7 Principles of Conversion-Centered Design.

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *