GT – Web Fonts Guide

notion image

Font Formats

When you purchase web fonts licensing, you should receive a package of font files that include some of the following formats:
  • Web Open Font Format: (WOFF) was developed in 2009 as a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported by all modern browsers.
  • Web Open Font Format 2: (WOFF2) is an update to the original WOFF format. Developed by Google, this is considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.
  • TrueType: (TTF) is a font format developed by Microsoft and Apple in the 1980s. Modern TTF files are also called TrueType OpenType fonts. TTF can be useful for extending support to some older browsers, especially on mobile, if you need it.
  • Embedded OpenType: (EOT) is a legacy format developed by Microsoft. Older Internet Explorer versions require EOT to render your web fonts. EOT is often served uncompressed so, if you don’t require browser support of the likes of IE8 or below, then you’re better off leaving it out.
If you are mostly targeting users with modern browsers, you can get away with a progressive method of using @font-face that only serves WOFF and WOFF2 formats. These offer the best compression and allow you to deal with fewer files in your code. And if a user’s machine is so old that it doesn’t support either of these formats, it may be better to just serve them a system font for performance reasons.
If you want to expand support as wide as possible, you can add TTF files to the mix. SVG and EOT fonts have also been traditionally used for expanding browser support but, at Grilli Type, we don’t offer these formats anymore since they come with a number of downsides.

Embedding Web Fonts

We make use of @font-face to include fonts in CSS. Here’s the deepest level of support, including all of the font file formats we’ve discussed so far:
@font-face { font-family: FontName; src: url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff'), url('path/filename.ttf') format('truetype'); }
We can trim things down a bit if we’re only aiming to support modern browsers:
@font-face { font-family: FontName; src: url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff'); }
Once the font has been declared and defined, we can put it to use on our elements. For example:
body { font-family: 'FontName', Helvetica, Arial, sans-serif; }

Hosting Web Fonts

The most flexible way to load web fonts is to self-host them. That means that you host the files on your own server and your fonts will always be available when a visitor comes to your website without a third-party dependency. Neither tracking codes nor JavaScript is generally required to load self-hosted font files.
Many small type foundries offer fonts as a direct download so they can be self-hosted and at Grilli Type, we are convinced it’s the best way to serve fonts. Some other foundries only offer hosted solutions, meaning they host the files on your behalf. This can bring its own benefits, but also makes you dependent on that type foundry’s continued hosting services and promised uptime.
Make sure you know how a type foundry’s web fonts are offered before you buy licensing, because the difference in hosting and the terms of use can affect how they are implemented. Just make sure you’re using them legally and according to the foundry’s licensing agreement.

Advanced Typographic Features

Let’s take a look at some of the more advanced features of web fonts.

Spacing and Kerning

There are two settings inside font files that define the space between characters:
  • letter-spacing: This is defined as side bearings on the left and right side of each character.
  • font-kerning: This refers to adjustments between two specific characters.
Spacing cannot be turned off at all, because otherwise the text rendering engine (your browser) wouldn’t know what to do with these letters. Kerning, on the other hand, is turned off by default in some older browsers, and should always be turned on, by you, in your CSS.
notion image
Comparing type with kerning enabled and disabled
It’s easier to control kerning than you might think! Here’s how to activate it across all browsers that support it:
p { font-feature-settings: "kern" 1; font-kerning: normal; }
If you don’t use something like Autoprefixer to help manage browser support in CSS, then you’ll want to manually write out the browser vendor prefixes for this setting to extend browser support to older versions:
/* All vendor prefixes for `font-feature-settings` */ p { -moz-font-feature-settings: "kern" 1; -ms-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; -webkit-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }

Advanced OpenType Features

We just discussed how to use the font-feature-settings attribute to control kerning, but it can also be used to control other available OpenType features in your web fonts. The number of supported features has grown over time, and CSS-Tricks Almanac is a good place to reference what is possible with OpenType.
OpenType features are really exciting because they open up a bunch of possibilities for controlling fonts without having to serve multiple files to get the same effect. At the same time, it’s worth noting that the features an OpenType font file supports is up to the font designer and that not all fonts support the same features. All Grilli Type web fonts have the same features as other font formats—we love good typography, no matter if it’s in print or on screens.
To illustrate how advanced OpenType features can be chained together, the following code would turn on the numeric characters of an OpenType-enabled font that supports both old-style numerals (onum) and proportional numerals (pnum), plus enable kerning and activate a specific stylistic set included in the font:
.my-element { font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1; }
notion image
Type with and without the activated OpenType features in the code example.
The font-feature-settings attribute can be used to activate stylistic alternates, discretionary ligatures, different types of figures available in a font, small caps, and other handy things. Here’s a list of (some) the features you can use in many of our fonts:
  • kern Kerning is important for the correct spacing between letter pairs like AV, which would otherwise stand too far apart. Active by default.
  • liga Common ligatures are common ligatures like fi and fl. Active by default.
  • dlig Discretionary ligatures are more unusual and you may not always want them on. For example, an extravagant ligature connecting letters like s and t.
  • calt Contextual alternates are context-dependent. This is often used in script typefaces, but can be useful in other styles.
  • smcp Small Caps are smaller variants of uppercase letters, usually sized in between caps height and x-height. This feature will turn all lowercase letters into small caps, while uppercase letters remain the same.
  • c2sc Small Caps from Caps are a great companion feature to Small Caps. If you want all letters of a sentence the same size, this will force uppercase letters to turn into their small caps variants, too. Most often used together with the feature above.
  • lnum Lining numerals are what you’re used to: the numbers sit on the baseline and are about the same height as uppercase letters.
  • onum Oldstyle numerals are most often used in body copy text, and especially with serif typefaces. Some of the numbers sit below the baseline, and they have a varying height that fits well with running text.
  • pnum Proportional numerals are numbers that take up as much or as little space as they need—each number is different!
  • tnum Tabular numerals are numbers that all take up the same width. This is helpful for, as the name implies, setting tables full of numbers that all neatly line up. Many typefaces can combine lnum and onum with pnum and tnum; you could for example use tabular lining figures for one part, and proportional oldstyle numerals for another part of your design.
  • ss01–ss20 Stylistic sets contain alternate designs for certain letters. There are no rules there: some typefaces contain none, others contain dozens of alternate designs. For example, stylistic sets will often be used for one-story a and g designs. This can expand the utility of a typeface by giving it multiple possible looks.
To get an overview of available features for any of our typefaces, head to their respective pages and have a look at the Typeface features section.
Because font-feature-settings is used to set many OpenType features at once, it’s not possible to define a single setting differently in a child element, as the other choices won’t be inherited. All of the features would need to be defined again to change the settings for child elements.

Letting Spacing and Word Spacing

CSS has long supported the letter-spacing and word-spacing attributes. When used correctly, both provide a fair amount of control over two very important aspects of how your type will look.
As with all things typography, you’ll want to learn how to evaluate different options both functionally and visually and make decisions based on your impression. Different contexts may call for different spacing needs.
At smaller sizes, most typefaces will benefit from a little extra spacing between characters and words. In larger contexts, like headings, typefaces may benefit from more narrow spacing. In either case, the right decisions require attention and your best judgment based on the outcomes.
Both letter-spacing and word-spacing work best using em units for the values. That allows the spacing to adjust fluidly based on the font size of the element they are applied to. The following example will give your content a little more room to breathe at smaller font sizes:
p { font-size: 12px; letter-spacing: 0.015em; word-spacing: 0.001em; }
notion image
Comparing the difference with letter and word spacing turned on and off.

Font Rendering

Using type on screens brings up important questions about how they are rendered. Fonts are usually designed on about a 1000 units tall grid—or even larger—but then are displayed at something like a 16px font size. In an interplay between device, screen, and software, this reduction in resolution and fidelity requires some smarts to make small type legible and good-looking. Again, be observant, test in many browsers, and use your best judgment to put the best methods to use to increase legibility.

Hinting

Every operating system treats fonts differently from one another. In MacOS, the smarts are in the operating system (and thus can evolve over time), while the fonts themselves can be dumb. Historically, on Windows, the smarts were supposed to be included in the font software, and the system was supposed to use those smarts to decide how a font should be rendered at different sizes. Those smarts are called hinting. Hinting information embedded in the font files can tell a computer that the two stems of an “H” character are supposed to have the same line width, or that the space above and below the crossbar should stay about equal at smaller sizes. Hinting is a very complex and complicated topic, but the important takeaway is that the same font at the same size might render differently, even on the same computer depending on many factors, including the screen, the browser, and even the font and background color.

Font Smoothing

While hinting information included in the font files is mostly being ignored on MacOS, specific browsers offer some additional control over font rendering.
p { -webkit-font-smoothing: antialiased; /* Chrome, Safari */ -moz-osx-font-smoothing: grayscale; /* Firefox */ }
Using these CSS properties leads to sharper, thinner text rendering on MacOS and iOS. But beware: this can also lead to rendering problems, especially if you’re already using a thin font or font weight.
Both antialiased and grayscale are mainly useful to balance the rendering of fonts when using light text on dark backgrounds, as they would otherwise get rendered quite a bit bolder.
The font-smoothing property and its values are not on the path to become a standard CSS feature, so use it with caution and perhaps only in contexts where you know you need to target a specific browser and context.

Caution: OptimizeLegibility

We often come across this attribute when troubleshooting font usage on Grilli Type customer websites:
p { text-rendering: optimizeLegibility; }
Among other things, it activates kerning. That was very useful at some point, but is not needed anymore (as shown above). In addition to kerning, it also activates all kinds of ligatures, including extravagant ones that may be present in the font files.
Although there are some use cases for this, do not use this feature if you don’t know exactly what you’re doing with it. Chances are you don’t need it in the first place.

Web Font Resources

If you’re ready to dive deeper into web fonts, here are a handful of recommended resources you can use to learn more:
  • Copy Paste Character: This is a great website that allows you to access pretty much any special character you might ever use.

Advanced Web Font Considerations

For those who are ready to level up to more advanced techniques, here are even more considerations to take into account:

Uploading Licensed Fonts to Github

If you commit a project to a public repo and use font files that you have licensed, please make sure that either the fonts or the directory that contains them is included in your .gitignore file so that they do not get uploaded. This will prevent others from taking and using your font files, and it can prevent you from breaking any terms of use for licensed fonts that usually have usage and sharing restrictions.
.DS_Store path/to/web/fonts/folder/*

Font Loading Tactics

Loading web fonts can be as easy as simply using @font-face but that doesn’t necessarily offer the best possible performance. For example, it opens up the possibility of a Flash Of Unstyled Text (FOUT) which might be considered poor UX in some cases. Zach Leatherman’s “A Comprehensive Guide to Font Loading Strategies” covers that and methods to improve the loading experience that will make you and your users very happy.

Base64-Encoded Font Files

In some rare instances, encoding your fonts as base64 inside your CSS will be a good idea but generally it’s not—and, not to mention, you might break your font’s licensing agreement in the process. Be sure to proceed with a lot of caution and read up on your font’s terms of use when considering base64.

CSS Text Decoration

The W3C is working on a draft for new controls for text decoration, mainly dealing with how to make underlining text better and easier in CSS. This is not yet usable across all browsers, but have a look!

Variable Fonts

In 2017, the OpenType fonts specification 1.8.2 was released, allowing for what is called Variable Fonts. This new version of OpenType allows for the inclusion of multiple font styles into a single font file, reducing server requests and web font file sizes—and offering great potential for the web. Depending on the type designer’s choices, the format allows for the use of arbitrary styles in between existing weights and widths of fonts, among other things. Changes between different styles can be animated with CSS. Our GT Flexa minisite is a good place to learn about the potential of this new font format. While our newest typefaces already do support it, we are also working on converting our library to support this new format.

Wrapping Up

We covered a lot in this post! Hopefully now you have a good understanding of the different font files out there, how to work with them, and all the amazing and powerful ways fonts can be styled using both tried and true methods and cutting-edge features.
It’s really simple to use custom fonts in websites. The basics are easy to master, and this document will help with that. It also links to further, more in-depth sources that are helpful for advanced developers aiming to perfect aspects like the specific loading of the font files.
  • Written and edited by: Grilli Type Further editing by: CSS Tricks
Guides
Fonts in use
Did you use our fonts? Please send us examples of your work and information about your project.
Recent blog posts
      notion image