One of the biggest misconceptions among marketers regarding print marketing is that all fonts that look great online will translate cleanly to print. Unfortunately, that isn't the case.
Differences exist between digital-optimized fonts and print fonts that can throw off your messaging and make your print look unprofessional. Knowing the differences between different types of fonts used online and those for print can help a marketer work better with designers to get great results.
There are two types of digital fonts marketers will encounter: Web fonts and desktop fonts.
Web fonts are designed to upload directly into your CSS on the Web. Modern digital typeface is designed to tackle eye fatigue and make text
easier to read (despite wide variations in screen sizes).
Web font designers typically make adjustments to fundamental type features like font weight, proportion, embellishments, spacing, and shape to make them more appealing both on laptops, tablets, and smartphones.
On the other hand, those modifications are what make Web fonts unfit for the print environment. Web fonts fundamentally weren't designed to cleanly convert to print and often aren't licensed for print anyway.
Desktop fonts are designed to be used with desktop programs such as MS Word and Adobe Photoshop and are optimized for print. Those fonts are not optimized for Web use, though in most cases, downloadable font kits will include a Web-ready font along with your desktop font.
Creating design havoc
Studies
indicate that the proper application of typography not only directly
influences the mood of your reader, it can help drive conversions.
Poorly chosen (or badly optimized) fonts have exactly the opposite
effect.
Not knowing the differences between Web fonts and desktop fonts can create design havoc if you try to use the wrong font type on a medium it was not designed for.
Many Web fonts are custom built for specific websites to take full advantage of the design potential unique to digital interfaces. However, some Web font kits do not include a corresponding desktop-use font. That can present a problem when you convert your Web look to print marketing materials.
Moreover, many marketers who are unaware of differences will use them interchangeably.
The differences between the two are noticeable to your customers. If you've printed articles from the Web, you've encountered this "that just doesn't look right" feeling. The majority of Web fonts today aren't optimized for the printed page. Applying Web-optimized fonts to your printed matter without adjustments will likely create the same off-putting visual effect.
Qualities that characterize highly readable screen fonts on the Web are the same as those that make it differ from its print cousins. Sitepoint lists four basic elements that make up a good Web font:
- Lower weight contrast, simple strokes, consistent font weight
- Taller X-height
- Wider letters and more spacing
- Wider punch width
The importance of licensing
Before we go any further, we need to address licensing.
Licensing is a big concern for designers when they transfer designs from one medium to another. Knowing which fonts are licensed for each purpose prevents miscommunication between marketers and the design team.
Most desktop fonts come equipped with an EULA licensing agreement that does not transfer to online and digital uses.
Moreover, many Web fonts are licensed explicitly for Web use, and they aren't legally available for print use. So even if your Web font transfers cleanly to your printed materials, you may be stealing the designer's work by using it on a different medium without permission.
In many cases, design programs themselves will safeguard against licensing breaches by making Web fonts inaccessible.
Similarly, some fonts are licensed for personal and creative use, but not commercial purposes. Bringing your favorite font kit from home for a business design may not be allowed, so always double-check licensing agreements before you transition Web typeface to print.
Even when using a desktop font kit, the differences between your screen and the printed page may require some adjustments.
Fortunately, understanding the common font mistakes marketers make when creating online media clue you into the errors that will inhibit successful conversion to print.
Here's a checklist of what to keep an eye out for when you apply your Web presence to the printed page.
Weight/thickness
Digital interfaces can make thinner fonts wash out and disappear if their weights aren't adjusted to be thicker. This principle applies to stylized serif fonts that vary in thickness as well.
Optimizing for the Web usually involves some leveling out of the weight difference between the narrow and thick elements in the text, so no part disappears into the background.
Contrasting
Contrasting can make a big difference when converting what's
on your screen to the printed page. Ink and pixels are not the same,
and lighter weight lettering can wash out against a dark background.
Size
Web fonts have larger counters and a taller X-height, so they take up more room.
Using a Web-optimized font on print may result in larger lettering that will require more than a simple size adjustment. That becomes especially important if your Web font is bolder. Because of your Web font's heavier weight, shrinking it might result in a crowded look that, at smaller sizes, becomes illegible.
Moreover, fonts that are too thin can be unreadable as they get smaller too. Layers Magazine notes that "all type programs default to settings for creating full-sized text. When you start setting smaller type than this, whether it's for footnotes, contracts, legal notices, or the front and back matter of books, you have to make adjustments."
Kerning
Kerning describes the placement of letters in relation to the other letters next to them.
Properly kerned letters will vary in distance depending on their geometry: thickness, ascenders, descenders, and more.
Improving the kerning on logos and call to action elements can give a different impression about your brand and help drive conversions, according to Neil Patel at Crazy Egg.
Web fonts tend to be kerned more widely than print typography to increase legibility, help support larger X-height, and offer heavier strokes without looking crowded.
Many design programs have automatic kerning features that improve intra-letter spacing, but if you want it to look right, you will want to consult the sharpest kerning tool: the human eye.
Leading
Proper leading optimizes space on the page while helping encourage proper reading flow for the eye.
Web-optimized fonts are spaced wider than print fonts; longer lines of text on a digital screen require that for legibility. Default on Web browsers is usually 1.2, but experts recommend 1.4 to 1.6 for better legibility.
When transferred to print, this interline spacing can look oversized, creating unsightly text gaps and resulting in a change in the overall effect of the ad and a waste of valuable ad space.
Alias/anti-alias
Anti-aliased fonts are Web fonts that feature softened edging to give them a more rounded look. Doing so creates the feel of printed typeface on the Web but can also make letters more difficult to read at smaller sizes or with increased boldness.
Transferring anti-aliased font direct to print can lead to lettering that prints without adequate sharpness and looks blurry, even on high-quality printers.
* * *
Matching your print typeface closely to your Web presence helps promote consistency across all channels. Knowing the basics about different kinds of computer-based fonts and how they are change when applied to print can make a big difference in your ad.
