Content is king, there’s no doubt about it. But presentation plays a huge role in the way we perceive that content, which is why we design our apps and websites with such care.
That same attention is often absent from our documents though, with many people resorting to the default typeface choices. Spending some time making informed choices about your document’s typography can elevate any written piece’s impact.
We've show you many ways to make great documents in Word, Google Docs, and Pages, but without great typography choices, your documents will never be the best they could be. That's why in this tutorial, I’d like to offer you some jumping off points for selecting good typefaces that will help bring your written content to life.
Typefaces vs. Fonts
Any discussion about typography must begin with a clarification. The two terms you’re used to seeing, font and typeface, are not interchangeable.
A font is a file. It is the .OTF or .TTF file on your computer that you install and call upon to render the text in a piece of software. In the days of letterpressed type, a font was one specific variant of the type family (the Italic variant of Helvetica, for instance).
A typeface is the actual typographic item being rendered by the font. It describes the entire family of fonts that make up a typographic work.
In musical terms, the font is the .MP3 file and the typeface is the actual song.
Does this matter much? Not really. Some old-school typographers might balk at the use of “font” where “typeface” is more appropriate, but I suspect their ire won’t trouble you much.
I mention the distinction here only because most of what we’re discussing in this article is a high-level look at choosing and pairing typefaces; the actual font file that you use isn’t the point.
To return to the musical metaphor, we’re talking about how to make a great playlist, not whether it’s better to keep your music collection in MP3 or FLAC.
Categorizing Typefaces
We don’t need to have a deep understanding of the way typefaces are classified to make better use of them.
If it interests you, there are many excellent resources available to introduce you to the world of type families and their history. It’s no Game of Thrones, but it is a fascinating part of design theory.
Instead, we’ll simply stick to the basics: typefaces are most broadly categorized as either serif or sans serif. The difference lies at the end of each character’s strokes.
A serif typeface has small protruding elements that tend to give each character a more complex shape. Serif fonts are generally considered easier to read, as the serifs serve as visual lubricant, guiding eyes across letter forms more smoothly.
A sans serif typeface does not have these extended elements, leaving letters looking more austere and pure. This look is in vogue at the moment, especially in web typography, and is appreciated for its minimalistic and assertive stance on a page.
Selecting Typefaces Using System Fonts
Choosing a typeface is all about presenting your content in the most appropriate way. Long-form articles have different aesthetic requirements than brochures, and the medium itself—print vs. screen—also needs to be taken into consideration.
One of the most important considerations when designing a document is information architecture: presenting the content in a way that clearly conveys its structure and hierarchy. Smart type choices can help make this scaffolding appear effortless.
Before we delve into the deep (and often expensive) world of professional fonts, let’s see what we can accomplish using the fonts provided on our computers by default.
Many people make type choices starting from the headings, but typography is best established from the inside out: the body copy.
1. The Body Font
No matter what you’re drafting, the body of the work is going to have the most words. How we present those words is the core of how our audience will experience the document, so it makes sense to select a body font before anything else. Here, our primary goal is readability—how simple it is for the eyes to absorb the information.
Traditionally, body copy has been set in a standard serif face like Times New Roman. It’s eminently readable, doesn’t draw undue attention to itself, and is neutral enough to be suitable for almost any subject matter.
The problem with Times New Roman is that it looks painfully generic after decades of use as a default. Thankfully, there are many system fonts on modern machines, and we can appeal to some of them to make our documents shine without having to purchase professional fonts.
Baskerville is one common stand-in for Times New Roman, offering a leaner and somewhat more old-fashioned look.
Georgia is a modern looking alternative, with strong lines and tall characters that look excellent, if a little bland.
If you’re working on something for print, Garamond is worth a try.
If you’re on a Mac, one of my favourite system fonts for body copy is Hoefler Text. It combines Georgia’s presence with a bit more personality and looks beautiful in most contexts.
Speaking of personality, Palatino is another common choice, and one that serves as body text in many of the templates in word processing apps. It’s a little less dense and a little more angular than Hoefler Text.
When you’re working on a document that needs a more contemporary feel, it might be better to choose a sans serif typeface for the body text. In such cases, the beloved Helvetica (or its Microsoft clone, Arial) is often the first port of call.
If you’re keen on Helvetica, at least switch to its contemporary reworking, Helvetica Neue, which is a polished and adjusted version that looks better in more situations, especially on screens.
On Windows, the relatively new Segoe font family is well worth considering. Segoe is Microsoft’s take on the classic Frutiger design, and it offers the same attractive letter forms and readability—Microsoft has chosen it as its default interface font for most products.
If you’re willing to depart from there, Optima is a sans serif system font on Macs that has the unusual property of looking almost like a serif. It’s a dynamic typeface, one that works best in situations where you want the contemporary feel of a sans serif without sacrificing the readability of serif type.
One of the true classics is another system font: Gill Sans. I often find myself using Gill thanks to its elegance and adeptness at multiple scales. Whether your text is huge or tiny, Gill Sans will render it cleanly, and since it comes with a large variety of weights (Bold, Light, Semi Bold, etc.) it is very versatile.
2. Headings and Subheadings
Once the body text looks the way it should, the rest flows more naturally. The next task is pairing the body text with a heading typeface that complements it and balances the layout well.
One of the more famous pairings is Helvetica Neue as a heading font against Garamond for body text. This is a ubiquitous pairing that works great in print.
Another excellent match is Gill Sans, or the more modern Avenir (another system font) as a heading font while Hoefler Text presents the body.
Subheadings often share the same typeface as main headings, but are set at a smaller point size. This is a good way to handle a few levels of headings, but if your document’s hierarchy will include multiple subheading levels, it’s a good idea to make additional adjustments.
To further assist the visual distinction, smaller subheadings may be set in a different colour, or using a bold font, or displayed using small caps instead of title case.
Pairing Principles
The natural instinct is to use an entirely different font for headings versus body text. This is often a good idea, but it isn’t necessary, and in fact one of the most common mistakes that rookie type fans make is trying to include too many typefaces in a given project.
A great rule of thumb is that you should almost never have more than three different typefaces in use for a project. The availability of different sizes, weights, and spacing options for any given font means that you can get a lot of mileage out of a single typeface.
We’ve dedicated an entire tutorial to type pairing principles, so if you’re interested in the theory behind combining typefaces then look no further.
Professional Fonts
If you’re serious about presenting your documents, then inevitably you’ll get to the point where it’s time to take off the training wheels and look into purchasing and using professional fonts.
When discussing professional fonts, it’s important to realize that there’s more to a “professional” font than simply getting a design that isn’t available on your system by default. What sets professional fonts apart from standard ones is quality.
In typographic terms, quality can mean several things, ranging from precise kerning, to extensive weight choices, to the availability of more characters (foreign alphabets, alternate characters, extensive punctuation and mathematical glyph support, etc.) to the presence of ligatures, and other such details.
Definition: Kerning is the typographical term for letter spacing. Properly kerned fonts have even distances between characters and extensive tweaks to ensure that any letter combination looks balanced.
Free vs. Paid
As with most things, you get what you pay for. There are a tremendous number of free fonts available on the internet, and while this is convenient for quickly adding a fresh flavour to your palette, the downsides become troublesome.
More often than not, free fonts only come in one weight. They’re usually poorly kerned, leaving unsightly gaps between letter pairs.
Using a reputable resource like Google Fonts can help you find better quality free typeface choices, like Open Sans. This gorgeous sans serif is one of the most widely encountered typefaces on the modern web, and its five weights and ten variants make it a versatile and capable typeface for many different use cases.
The Roboto family, Lato, Source Sans Pro, and Ubuntu are other examples of quality free font options.
These are, however, the exception to the rule. Most free font files are markedly less polished.
Premium Fonts for Business and Pleasure
The world of paid typefaces is a rewarding one. While the very best are expensive, their flexibility and quality mean that you can purchase a single great package and be set for most of your basic needs.
For example, the catalogue of Hoefler & Co. represents perhaps the pinnacle of typographic design. Whitney and Ideal Sans are among the most beautiful all-purpose sans serifs in existence.
Similarly, Mercury, the stately Requiem, and even the familiar Hoefler Text (remember our system font friend? Hoefler’s basic weights were licensed by Apple for use in Mac System 7!) are examples of serif font design at its finest.
Besides being offered with a staggering breadth of character coverage (including native small caps, fractions, and extended accents for Latin, Greek, and Cyrillic alphabets), a type family like Whitney features no fewer than six weights and more than fifty individual styles.
Outside of Hoefler’s oeuvre, we find other stunning typefaces like Proxima Nova, Brandon Grotesque, and Avenir Next Pro with similar depth. Many of these are available on Adobe's Typekit, which lets you use the typefaces on your website and download them for use on your computer.
Equipped with one or two of these exceptional type families, we open up a whole new world of document layout options that can make any written piece look exceptional.
Layout Example: The Beauty of System Fonts
Now that you’re familiar with some of the options, I’ll show you an example document that we’ll set for print and web.
To drive home the point that you don’t need to appeal to professional fonts to get a great looking document, we’ll restrict ourselves to using system fonts only.
The Default Look
In this example, I have a short story that I’d like to produce an ebook of. I’m using Pages on a Mac, but the same principles apply regardless of what software you have.
Placing the text into Pages using its default blank page template looks exceedingly bland, as we might expect.
While the default template’s style presets allow us to define the visual hierarchy, the fact that everything is in a dull shade of Helvetica makes for a boring presentation.
Step 1: Body Text
First stop is, of course, the body text. Since this is a story and will therefore have a lot of text, It’s a good idea to set it in a serif typeface. As I mentioned earlier, one of my favourite system fonts is Hoefler Text, so I’ll use that.
Because of the way serifs connect characters, paragraphs of serif fonts with default spacings tend to look a bit too dense. To correct this, it’s often best to set the line spacing at either 1.2 or 1.5, if not more. This allows a clear separation between lines and makes it easier for our eyes to follow.
In my example, I’ve set the spacing to 1.4 and I’ve also bumped up the point size from the default 11 to a slightly more readable 13.
From school, you’re probably used to setting everything at a size of 12 or even 10. These sizes are appropriate for printed materials, but on the web and for screen consumption in general, it’s often preferable to set type in sizes of 14 or larger.
This serves the dual purpose of helping text remain readable on a screen, while also changing its appearance to be less of a “wall of text” that might deter visitors. Attention spans are short on the internet.
Since the first paragraph is an introductory quotation, I’ve set it in italics and made it slightly larger. I also set the first few words of the chapter in small caps (the Hoefler Text system font actually doesn’t have a small caps variant so I had to fake it by dropping the point size and increasing the weight).
Now I have to do something about those headings, which look out of place at this point.
Step 2: Headings
It’s tempting to use a sans serif for the headings here to maximize contrast, but again, the priority is harmony.
So instead of switching to a new typeface, I’ve simply tweaked our old friend Hoefler Text. The title uses a point size of 35 and is set in the “black” weight, and the chapter subheadings are the same except the point size is 18.
In this case, my text features an additional chapter description line, and rather than overworking Hoefler Text, I’ve opted to set this line in a sans serif typeface, specifically the distinctive Optima.
While different enough to do the job, to really draw attention to this important line, I have also changed the text colour to a dark red; this immediately gives the overall document more dimension and lends it a sophisticated feel.
Straight away, our formerly dull story has taken on a much more distinguished appearance, without compromising its readability or appearing “fancy” just for the sake of it. And if we save these style choices, then we can very easily take advantage of this look for future documents without having to spend more time recreating things.
And remember that we haven’t spent a penny to get here! Just imagine what you could accomplish when you're armed with a professional font or two.
Making Your Documents Shine
As you’ve now discovered, professional looking documents don’t require you to stick to a template, nor to purchase expensive fonts if you don’t want to.
All it takes is a little care and craftsmanship.
Creating your own document type styles not only helps your work look its best, it also subtly brands it as your own; your choices of typefaces, size, colour, and arrangement become a sort of fingerprint that can help you establish a “look” for all the documents you produce.
As long as you keep in mind the basic principles—information architecture, readability, and using 3 or fewer typefaces per document wherever possible—you’ll be well on your way to improving the look of your next important document!
