Skip to content

Instantly share code, notes, and snippets.

@ubuwaits
Last active December 21, 2020 09:56
Show Gist options
  • Save ubuwaits/81bd4945c94ab905333a5ce686daca11 to your computer and use it in GitHub Desktop.
Save ubuwaits/81bd4945c94ab905333a5ce686daca11 to your computer and use it in GitHub Desktop.
Hyper Island Lecture: Modern Web Type

Modern Web Type

Lecture notes by Chad Mazzola, Head of Design at Universal Avenue

My company, Universal Avenue, offers internships and apprenticeships for designers and developers who are getting started in their career.

1. Variable Fonts

  • 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.

Five registered 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

A few custom axes (as defined by type designers)

  • 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.

Links

  • 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.

2. Open Type Features

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.

Links

  • 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.

3. Web Type Performance

These are the strategies we discussed for improving font performance on the web.

Reference local file in @font-face import

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');
}

Use the .woff2 format

Whenever possible, use the .woff2 version of the font. It delivers the best compression and is supported by ~95% of browsers.

Preload critical fonts

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">

Take advantage of the font-display property

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.

4. General information about type

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment