<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=120091&amp;fmt=gif">
Let's Talk

Jan

30

2016

How to Manage Your Brand Fonts for Print and Web

branding website

Staying on brand isn't easy, especially when it comes to managing font licenses for your website or printed work.

There's plenty to know about font management, but we want to cover the basics for someone like you who may be responsible for managing your company's brand and/or website. This post covers what you need to know about font licenses, free fonts, print vs. web fonts, file types and style guides. 

License to Font

Let's say you've purchased a fancy font package from a design agency. You're excited to use it in your newly-designed webpage for one of your clients. But wait! Does the company you're designing for have a license to use that font? If not, don't do it.

Yes, YOU own a license for the font, but the agency from which your purchased it didn't authorize it for use for other organizations. Any website that the font packge is used on must have a license, and if you don't? There could be financial penalties. 

Free Fonts

If the idea of misusing licensed fonts scares you, don't fret. You can find great free fonts with Google Fonts. There are hundreds of options available, and you don't have to worry about getting in trouble with the font police. 

You can choose your font, and preview it on their customizable preview page. See a sample of the font Lato below. 

Screen_Shot_2016-04-30_at_12.20.27_PM.png

If you want to make the preview longer, to see how it looks in paragraph form, you can! See an example in Open Sans below.

Screen_Shot_2016-04-30_at_12.25.12_PM.png 

And, again, this is FREE. Who doesn't love free?

Print vs. Web

Unfortunately, not every font can be used interchangably between web and print. Web fonts are specifically designed to be viewed on a screen. Print fonts, however, are meant to be viewed on paper. Thin fonts, in particular, look wonderful in print but don't work on a screen.

The biggest difference between print and web fonts is how the browser renders that particular font; for example, if you're using a light weight font, Firefox will show it a bit heavier than other browsers.

There are fonts that work in both print and web, but it's something you must consider as you're choosing a font for your brand. 

Also, desktop fonts are meant to be used with print; using it for live text on the Internet can violate your licensing agreement. The reverse applies, too; if you've purchased a font package for your website, you shouldn't use that font in your print materials, unless you have explicit permission to do so. 

File Type 

Unfortunately, you can't just hand over your desktop font package to your web developer; you must be sure that your font is in a format that will work on your website. Conversely, your printer can't use font that's formatted for your web developer.  

Don't throw in the towel – you can do this! Yes, there are a million acronyms for font files, but you don't need to know all of them, just the ones that apply to you. You'll need to be sure that you give your web developer fonts that include Web Open Font Format, such as .woff2 or .woff. Should you purchase a font package, check to see that it includes the file types that you'll require for all of your projects. 

Create a Styleguide

After you have selected the appropriate fonts for your brand, and you have the right licensing, it's time to make sure your font and typography rules are clearly stated in your branding and style guide. 

Consistency is essential in branding; don't allow the wrong font to slip in anywhere!

Be specific about which fonts go where on your site. It's helpful for your website designer to give you a styleguide specifically for font use on your website. We put together a styleguide like this one for our design build team and our clients, so they know what styles are meant to be used as headings, subheadings, body text, button text, captions, footers. 

The styleguide lays out all the rules for color, link styling, font size, centering, and more. A styleguide like this is useful for anyone who is going to create new web pages in the future, so they stay consistent with the established style. Your website will stay clean and polished looking if everyone uses a standard reference.

Styleguide-example-for-blog.jpg

Conclusion

In summary, before you begin work on a new website or are going through a rebranding process, make sure to have these decisions and assets in place.

  1. Select fonts that work well for print and web.
  2. Know your licensing and keep the information on file.
  3. Create a styleguide and enforce consistent use of brand fonts and styles on web and print.

Any questions about web fonts? We're happy to answer them. Leave us a comment below.

Get Your Free Audit Kit

Interested
In
Joining
Mojo?

Learn More