<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=826555570791023&amp;ev=PageView&amp;noscript=1">
planeHeader.jpg

Inbound Marketing Blog

    How to Use Web Fonts in Print Media--Properly

    Posted by Brittney Ervin

    This blog was submitted by Anna Cruz of LD Products in Long Beach, California. LD Products is one of the largest online retailers of printer supplies in the United States. 

    Choosing the right typeface sounds easy, right?

    Marketers who have invested time into doing it right will tell you otherwise. The nuts and bolts of good typography are more complex than just choosing a font that pleases the eye. Studies show 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.

    Perhaps the biggest misconception among marketers when choosing a font for print is that all fonts that look great online cleanly translate to print.

    Unfortunately, this simply 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 we use online and in print can help a marketer work better with designers to get great results.

    Why Does It Matter?

    web_fonts.jpg

    Modern digital typeface is designed to tackle eye fatigue and make text easier to read, despite wide variations in screen sizes.

    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.

    Typographic consultant Ilene Striver writes: “Fonts intended for use on the web are optimized and often modified to enhance readability and performance on-screen in a variety of digital environments.”

    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.

    These modifications, on the other hand, 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-- but more on that later).

    Know the Differences

    Desktop fonts are designed to be used with desktop programs such as MS Word and Adobe Photoshop and are optimized for print. These 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.

    Not knowing the differences between the two can create design havoc if you are trying to use the wrong font type on a medium it was not designed for.

    • First, many web fonts are custom built for specific websites to take full advantage of the design potential unique to digital interfaces. Some web font kits do not include a corresponding desktop-use font, and this can present problems when it comes time to convert your web look to print marketing materials.
    • Secondly, many marketers who are unaware of differences will use them interchangeably.

    Above all, the differences between the two are noticeable to your customers.

    If you’ve printed enough articles from the web, chances are you’ve encountered this “that just doesn’t look right” feeling. That's because 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:

    1. Lower weight contrast, simple strokes, consistent font weight
    2. Taller X-height
    3. Wider letters and more spacing
    4. Wider punch width

    Here is an illustration from Sitepoint to better demonstrate these qualities:

    font.png

    The same amount of web text, sized to the same font point, will often look bigger and more openly spaced compared to similar print fonts.

    This additional spacing allows designers to focus on and emphasize different aesthetic elements than print text, using heavier thin strokes around curves and pronounced serifs.

    In many cases, ascenders and descenders used for visual appeal on print lettering will be reduced for the web as well.

    Transferring web copy directly to print without altering your kerning and leading means less available space between the margins for your text, as well as lettering that can look too “spaced out.”

    Thicker serifs and strokes that make a dramatic headline font pop on the web may look cartoonishly-dramatic when applied to print.

    Remember: Licensing is Important, Too!

    Before we go any further, we need to address the matter of licensing

    Licensing is perhaps a bigger concern for designers than aesthetics when transferring designs from one medium to another.

    As a marketing professional, knowing which fonts are licensed for each purpose prevents miscommunication between you and the design team. It will also minimize undue stress and headaches.

    Most desktop fonts come equipped with EUPA licensing agreement that does not transfer to online and digital uses. Conversely, many web fonts are licensed explicitly for web use and aren’t legally available for print use.

    + So even if your web font transfers cleanly to your printed materials, you could be essentially 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 (Adoble Illustrator is one great example of this phenomena). 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 okay. Always double check licensing agreements before transitioning web typeface to print.

    Even when using a desktop font kit, the differences between your screen and the printed page may require some adjustments. Thankfully, understanding the common font mistakes marketers make when creating online media clue you into the errors that will inhibit successful conversion to print.

    Here is an essential checklist of things to keep an eye out for when you are applying 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. Conversely, when transferring web fonts to print, the lettering might appear bolder than intended as if they’re more suited for headline text than body. Understanding differences in thickness between web fonts and display fonts will give you an idea of where you may need to adjust for weight when converting to print. Similarly . . .

    + Contrasting.

    Personal anecdote: a new breakfast joint opened up around the corner from my house. They left a flyer in our mailbox and everything on the menu seemed pretty good, except for one problem: the font they chose for their copy washed out into the background, so you couldn’t read it!

    My roommate commented that the place must be pretty affordable, because “they clearly didn’t hire a graphic designer for this flyer.”

    You don’t want your brand to come off this way! Beware that 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.

    Size conversion matters in a big way when using web fonts for print.

    Web fonts naturally have larger counters and a taller X-height so they take up more room.

    Using a web optimized font on print might result in larger lettering which will require more than a simple size adjustment. This becomes especially important if your web font is bolder. Thanks to your web font’s heavier weight, simply shrinking it might result in a crowded look that, at smaller sizes, becomes virtually illegible. On the other side of the spectrum, 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.

    Neil Patel at Crazy Egg notes that improving the kerning on logos and call-to-action elements can give a different impression about your brand and help drive conversions.

    Web fonts tend to be kerned more widely than print typography to increase legibility, help support larger X-height, and 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. This is especially true when moving copy between different types of media. Transitioning web font kerning to print without adjustments can result in inconsistently spaced letters which---for lack of better words---just looks bad.

    + 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, since 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 (as well as a waste of valuable ad space!)

    + Alias/anti-alias.

    Anti-aliased fonts are web fonts that, in order to smooth out squared pixels for a natural feel, feature softened edging to give them a more rounded look.

    This helps create 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. Of course, printing out proofs and font samples along the way can give you a good idea of how your design will come across in print. Whether it’s maintaining the feel of your branding or simply not upsetting your graphic designer too much, knowing what to look for is a great first step towards successfully getting the type of print results you desire. 

    About LD Products

    ld_logo.gif

    The LD Products content team constantly researches and writes about the ways businesses in various industries can cost-effectively utilize printing technology for improved efficiency in design, marketing, and overall office operations.

    FREE: B2B Marketer's Guide to Social Media Strategy

    Topics: Design