What branding specialists need to understand about web font delivery.
A primary visual consideration for a brand, most accept that a graphic designer has knowledge of typeface decisions based on the tone that a brand wants to convey. This is absolutely true, and this process is critical to conveying a voice and values to ultimately tell a story. Historically, it’s been sufficient to choose a typeface that looks gorgeous on printed pieces, and then settle on a globally available system font option. There were no beautiful font options and every site matched (though their aesthetic beauty can be argued due to their creation specifically for the web application).
Today, print and web no longer need to be divided. However, part of choosing a typeface includes decisions which provide a more robust and comprehensive solution.
Performance is Design
Planning from the beginning can result in elegant type systems across all solutions. This conveys not only branding and legibility, but a smooth experience that users (i.e. customers!) deserve.
Non-technical project members do not need to know the exact specifications to execute a solution, but an understanding of the type system’s principles will be important to pass on. Your brand shouldn't be represented by outdated typefaces nor should they be outright dumped on a server with the latest files lacking technical considerations. This could result in users encountering long loading times (heavy files to download) and/or flashes of unstyled text which renders before your heavy font files load. There is a balance to be had, and some practices to allow that. Here are some basic tips on choosing a typeface with the web in mind.
- Make sure the font is available for the web in addition to print needs.
- What are the weights available? Will it complete your typographic system needs?
- Choosing 3 weights max on the web with varying size applications is usually a good rule of thumb. Consider varying sizing vs adding another weight for performance considerations.
- What are some options for services to provide the font files for all your needs? This is a business decision, but also a performance – and therefore design – decision. There are quite a few options to hosting fonts for web use today and they each come with pros and cons. Subscription models differ (per month, per traffic, or download and own the file). Each have benefits.
Care should also be taken to compare font file sizes. Different services have varying sizes for the same typeface. Some services take the time to actually remove unnecessary pixels to beef up compression efforts. Most foundries will do custom subsetting (removing unnecessary characters to get a smaller file) for web fonts if you ask them (thanks, JTDType!). Again, this may or may not be your job but it’s important to know and in some cases can vary greatly.
Artifacts & Decisions
Aside from the gorgeous and detailed branding guide (which may or may not be paired with a style guide or pattern library), developers will need to know a few other design decisions.
What fallback font and styles do you want (to avoid FOUT/Flashes of Unstyled Text or a blank page until the file actually loads)?
Yes, fallback fonts are somewhat old school, but a great alternative to a blank screen in a bad service area. This method also provides a smooth perception of a font loading into “view” the way users have seen with images. Remember that experience is often felt as perception and not always from the viewpoint of intent.
Get familiar with traditional web font formatting using basic styles such as Headings, Paragraphs, San-serif, Serif, etc.
This way it can make your decisions for a fallback pairing easier, while retaining the time for details like kerning and title case for top quality type systems. Test and provide these basic values for the most control.
This may or may not be your final say, but providing requirements and what’s acceptable around these options is important to discuss in your project. Having a strong understanding can help you solve problems more efficiently and give you and edge.
- Typography tools for better web type: Type.js allows you to write new CSS properties to take finer typographic control of type styles on the web. http://typejs.org
- Try out type on the web: https://typecast.com/
- Fonts: myfonts.com
- Fonts: typekit.com