- Personal site: https://chad.is
- Twitter: https://twitter.com/ubuwaits
- LinkedIn: https://www.linkedin.com/in/chadmazzola/
My company, Universal Avenue, offers internships and apprenticeships for designers and developers who are getting started in their career.
- Fonts have typically been distributed so that each weight and style comes in a separate file. Variable fonts allow a range of dynamic styles within a single font file.
- Variable fonts have one or more axes of variation, which describe the allowable range for that aspect of the typeface.
- There are five registered axes, as standardized by the WC3, but individual type designers can define unlimited custom axes.
- Weight:
font-variation-settings: 'wght' 400; // value is typically between 0 and 1000 - Italic:
font-variation-settings: 'ital' 1; // value should be 0 or 1 (off or on), but implementation varies by font - Slant:
font-variation-settings: 'slnt' 20; // value is usually between 0 or 20, but can have negative values too - Optical Size:
font-variation-settings: 'opsz' 36; // this helps optimize details of the typeface at different sizes - Width:
font-variation-settings: 'wdth' 120; // 100 is usually the default, with higher/lower values expanding or compressing the width
- GRAD:
font-variation-settings: 'GRAD' 500; // Similar to weight, but without changing horizontal spacing. Used in SF font. - Softness:
font-variation-settings: 'SOFT' 100; // Makes letters more or less soft. Used in Fraunces font.
- Inter: excellent open-source typeface that includes a variable version.
- Fraunces: another nice open-source typeface typeface with variable version. Appears to still be under development.
- Variable fonts on macOS: overview of the variable font options available when using the SF, the default macOS system font, on the web.
- v-fonts.com: gallery of more variable fonts.
Example:
p {
font-feature-settings: 'dlig'; // enables discretionary ligatures
}
- Fine-grained control over characters and character groups: ligatures, alternate characters, different number styles, and more.
- Google Fonts often trims some of these features from fonts in order to reduce file size.
- Access open type features with the
font-feature-settings:property.
- Vollkorn: Vollkorn has excellent support for a number of open type features.
- Fira Code: Fira Coda is a programming font with extensive ligature support (which is controversial to some).
- The Complete CSS Demo for OpenType Features: thorough guide to open type features, including those for non-latin alphabets.
These are the strategies we discussed for improving font performance on the web.
You can reference the local version of the file first in the src rule. If the local file is found, then the browser will use it. Otherwise, the external version will be downloaded and used by the browser. If you want to be 100% certain the user will see the latest version of the typeface, this trick might not be for you.
@font-face {
font-family: 'Lora';
font-stretch: normal;
font-style: normal;
font-weight: 100 900;
src: local('Lora'),
url('/assets/fonts/lora/Lora-VF.woff2') format('woff2-variations');
}
Whenever possible, use the .woff2 version of the font. It delivers the best compression and is supported by ~95% of browsers.
If you want to be certain that a font will be visible when a page loads for the first time, you can preload the file by using a preload link in the <head> of the page.
<link rel="preload" href="AlegreyaSans-BlackItalic.woff2" as="font" type="font/woff2" crossorigin="anonymous">
This CSS property allows you to have more fine-grained control over how the browser will treat embedded fonts.
p {
font-display: auto; // block | swap | fallback | optional
}
Get the full story here. This article goes into even more depth with font performance.
- Butterick's Practical Typography (Site)
- The Elements of Typographic Style by Robert Bringhurst (Book)
- Detail in Typography by Jost Hochuli (Book)
- Thinking with Type by Ellen Lupton (Book and site)