HOW TO: Get More Out of Your Fonts

font image

Anders J. Svensson is a freelance writer, part-time adventurer, and the senior copywriter at Veer -– a provider of affordable images and fonts to creative professionals. On Twitter, find Anders at @mightyrival and Veer at @veerupdate.

It’s a text-based world. Everywhere you look, there’s a sign, an ad, or a screen relaying information. The hand-lettered signage at your mom-and-pop corner store aside, most of the messages you see are set in familiar fonts.

You’ll find plenty of tips and tricks on using type elsewhere –- and far more technical ones, at that –- but here are some select ideas and advice that will put you (and your online presence) on the path to becoming a font savant.

Know Your Fonts

If you’re wired and online, fonts first fall into three categories: The system fonts that came with your computer, the somewhat tacky fonts you can download at free sites, and the really nice fonts you might pay for if you are in the habit of paying for fonts.

Within each of those categories, fonts can be grouped on more aesthetic grounds. And though it won’t impress many crowds if you’re able to slip phrases like “French Ronde” or “Caslon-esque” into conversation, knowing fonts by their practical applications can help you choose the right ones for your projects.

  • Display fonts are big, beautiful and a bit unwieldy. Like a claymore sword, they look great hanging on the wall. Display fonts are destined for splashy ad headlines, website mastheads and anything requiring just a few words. If you set an entire document in a display font that has an old West, wood-cut, wanted poster aesthetic, your readers would probably gang up on you pretty fast.
  • Text fonts are your go-to fonts. Ones like Arial, Lucida, Georgia and pop culture darling Helvetica are all very readable at any size. This makes them ideal for setting long passages, articles, books and newspapers, where the design calls for multiple levels of headings and content.
  • Pixel fonts appear to be straight out of your favorite 8-bit arcade game. Their letters consist of tiny blocks or dots, making them ultra-readable at small sizes and low resolutions, which is perfect for mobile applications and tiny screens. They can also offer the convenience of being both readable and machine readable. Take that, bar codes!

Beyond the practical, fonts can be further classified by styles (script, stencil, weathered, etc.), decade, country, and even artistic movement (like Art Deco or Bauhaus). Of course, it isn’t all about good looks. Fonts fall into technical categories too.

Understand OpenType

letters image

If regular fonts are cars, OpenType fonts are time traveling DeLoreans. Car on the outside, remarkable effort and technology on the inside. So how do you take an OpenType font up to 88 mph? First, get up to speed on alternates.

Alternates are stylistic variations of characters that can be substituted for the default alphabet. While many fonts only offer a limited character set (26 letters, 10 numbers, and basic punctuation.), an OpenType font is more likely to have dozens, hundreds or even thousands of characters. Plus, advanced features that make automatic substitutions.

If you’re working with a script font, you might want to swap in characters that are ornamental or have repeated letters –- like a double-S –- replaced by a ligature (a character of two or more joined letters) that was specially made and therefore better looking. If you have enough variations of ‘I’ and ‘S’ for example, you could write a word like “Mississippi” with so many different characters, it would resemble custom hand-lettering.

As a general improvement over .ttf (TrueType format) files, OpenType fonts are a universal format; you can install an .otf file on both a Mac or PC, no problem. But just because you can install an OpenType font doesn’t mean you can make use of everything it offers. That depends largely on what design software you’re using the font in.

Imagine having the power to levitate chairs with your mind, but never using it. That’s akin to what you may be doing if you use an OpenType font in MS Word. Instead of the beautiful script you bought, you may see a mess of disjointed letters, because MS Word doesn’t support OpenType’s advanced features. In contrast, if you were using Adobe InDesign, the features would kick in and do some of the work for you.

Plus, you can always turn off autopilot and take control by picking and choosing alternates, ligatures and swashes yourself.

Discover the Glyph Palette

If you’re getting serious about working with fonts, discovering Adobe’s glyph palette is like finding a magical portal to Narnia in your wardrobe. Instead of talking fauns, you’ll find a useful, scrollable grid of every character in the font, which sometimes number in the thousands.

Overwhelming? No problem. A drop-down menu lets you filter the selection and view just ligatures, swash capitals, ornaments or number sets –- whatever the typeface designer has created and organized for you.

You can also select a letter or letters, and filter the glyph palette to display alternates for your selection. If the designer has included a half dozen different “E” variants, you can swap them in manually. Same goes for finding custom ligatures to replace “OO,” “LL,” “TH,” and the like. Some designers will go as far as including entire custom words designed as single glyphs.

Once you’ve spent some time exploring the glyph palette, you’ll know what to expect from future fonts.

Keep Learning, Keep Kerning

Typography is a lot like architecture. The surface aesthetics that everyone can enjoy are a result of an incredibly technical effort by its creators.

Though not all of us are cut out to hunker down and create a great font from scratch, using and power-using fonts is a very accessible creative arena, even for non-designers. You’ll know you’ve delved too deep when you interrupt dinner conversation to point out the ball terminals on the menu’s Bodoni-style serif.

More Design Resources from Mashable:

Top 5 Web Font Design Trends to Follow
The Future of Web Fonts
10 Beautiful Free Hand-Drawn Icon Sets
9 Free Resources for Learning Photoshop
20 Free Social Media Icon Sets For a More Shareable Website

More About: design, font, fonts, how to, opentype, typography, web fonts

For more Dev & Design coverage:

This entry was posted in Channels, contributor, design, Design Lists, features, font, fonts, how to, opentype, typography, Web Design, web fonts and tagged , , , , , , , , , . Bookmark the permalink.