Content, content, content—we get it. What you publish on your site says the most about your brand on the web. But does it actually? Turns out the words and phrases you spin together on your site are not magical enough to entertain your users alone. You also need to check your typography. And yes typography involves the type of font you choose for your content. However, the truth is you need to look beyond font at more pressing matters if you want your text to take center stage.
Before you dive into the deep-end of typography you need a foundation. Let’s start with tails, and no tails. You’ll see fonts like Microsoft Sans Serif and PT Serif Caption, and wonder what the heck all that sans and serif means. Here’s a breakdown:
- A serif is a flip little flourish or tail tagged onto the end of an otherwise basic letter. The most iconic serif font is Times New Roman.
- A sans serif, is sans the serif, meaning it is free of fanciness. It’s a basic letter shape like Arial or Helvetica.
When choosing a font type you might want to go with something because it looks cool or different. Don’t. Don’t just choose a type based on your personal preference alone. Your font must speak to the end user aka the person who’s going to visit your website. Consider their vision needs.
Are you marketing to senior citizens or any demographic with vision correction issues? In the most obvious example, if you are a vision care center selling your services online, your content should be free of serifs. Those dangling designs are difficult to make out if you have vision problems. Furthermore, with any audience, if your text is too froo-froo it’ll detract from your content message.
Now let’s chat about fonts in current fashion. Are you someone who sticks with Times New Roman or Arial Black no matter what the content cause? What if I told you that you don’t have to go with the old standby of basic font types you find in Word or Pages? Graphic designers and lettering artists are constantly creating and evolving fonts to match the current scene. A great place to start your typography search is, fittingly called, Typography featuring fonts by Hoefler and Co. And, yes, there’s even an app for that called app.typography!
By the way Hoefler and Co. are the typeface masters behind the fonts used by Tiffany and Co., The Wall Street Journal, Twitter, and Coca-Cola. So yeah, this company knows its fonts and how to use them. Some of the fonts recommended by H&Co that you might want to use to elevate your web design include:
- Surveyor, a family of fonts, noted as resembling engraved lettering found on old school maps
- Idlewild, a sans script characterized as spacey and tranquil
- Tungsten, which has been redesigned to include 32 styles well-suited for anyone hoping to get the most mileage out of their typography
- Ideal Sans, designed using handwritten typeface so that it looks as organic as it actually is; makes for the ideal, ahem, font for websites hoping to connect with the users on the other end
As a side note, just reading the font family descripts by H&Co makes you think you’re choosing a fine wine rather than a text type. While you may not be able to financially afford an entire font family, H&Co provides web-use fonts for free. And of course you can look for new fonts in other places around the web. Just be careful when downloading fonts from suspicious font dealers. They are typically suspicious-looking for a reason, and you don’t want to download a virus or two in the process.
The next step is choosing how to use typography. Your content varies to include headings, subheadings, captions, and blocks of text. So should you use a different type of type for each type? Goodness that’s a lot of type! Say you have a header in American Typewriter, your captions are PT Serif Caption, and your content body is hit with Helvetica. This is the right way to write on the web, right? The answer is overwhelmingly nope.
When you see a website that has a home page with five different font types, used to distinguish messages or ideas, it’s a mash up. It looks juvenile and sloppy, which is the last marketing message you want to promote on your business’s branded pages. Instead take this approach. Choose a font family that has multiple styles within a single type of font. Here are some groups available on Pages to give you context:
- Arial includes Arial Black, Narrow, Rounded MT Bold, and Unicode MS
- Bodoni 72, Old Style, and Small Caps
- PT Mono, PT Serif, and PT Serif Caption
By choosing a font family you can enhance your content by using font cousins to change up the typeface. Your text is cohesive, yet certain aspects like headers and captions have a twist that helps these stand out.
Here’s the kicker. When you are developing your website using a template you’ll notice that most of the time about a dozen different fonts are littered throughout. Your blog post dates, title headings, tabs, and footers all have their own font. Then you’ve got your company logo that has another font altogether. See how easily the disconnect between fonts can happen to anyone, even a business with a website that is far from sloppy? So do some digging and make sure that all of your fonts, and I do mean all, are on the same proverbial page.
A final word of wisdom about choosing your font—go with a type of font that eludes the emotion and feeling you hope to get out of your web design. Do you have a traditional business with a conservative vibe? Your font type must support that. Same goes for a more modern, hipster, professional or quaint design. Find the type of font that best suits your design aesthetic.