Getting the Most Out of Variable Fonts on Google Fonts

I've spent years developing the Recursive Sans & Mono font family (with a fantastic team!), and it's finally available on Google Fonts!

Want to use it immediately? Here's the embed code for the complete Recursive variable font family from Google Fonts (but for optimal flexibility and performance, read on!).

<code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Recursive began as my type design master's thesis at KABK TypeMedia. Later, my foundry, Arrow Type, was commissioned by Google Fonts to complete and release Recursive as an open-source OFL font.

Explore Recursive and its capabilities at recursive.design.

Recursive is a versatile font family for websites and code, offering developers and designers a blend of modern aesthetics and cutting-edge font technology.

Let's clarify: variable fonts contain a range of styles within a single file, allowing users to select styles fluidly. These ranges are called variable axes, representing parameters like weight, width, optical size, slant, and more. Recursive lets you control "Monospacedness" (from Mono to Sans) and "Casualness" (from linear to brushy styles). Each font family can have multiple axes, a key design consideration.

Google Fonts has added variable fonts, but many (including Recursive) offer far more stylistic options than the default interface shows. For ease of use, Google Fonts simplifies the display, primarily showing the "weight" axis. However, this hides Recursive's 64 preset styles and five variable axes. The Google Fonts page shows eight styles and one axis, while Recursive actually offers much more.

Recursive can be divided into four "subfamilies":

• Sans Linear: A standard proportional sans-serif font (shown on Google Fonts).
• Sans Casual: A proportional "brush casual" font.
• Mono Linear: A standard monospace font.
• Mono Casual: A monospace "brush casual" font.

Visualizing this is easier than describing it. Two tables (one for Sans, one for Mono) illustrate the 64 named instances (not shown here for brevity). The Google Fonts interface only shows eight, plus the Weight axis.

While this weight-only approach is understandable given Google Fonts' diverse user base, it limits the font's potential. The Google Fonts API offers a solution.

Understanding Variable Fonts and Their Efficiency

Web developers know not to serve oversized JPEGs. Similar principles apply to fonts. Subsetting characters and using WOFF2 compression reduce file size.

Variable fonts are like video files: they contain ranges of information (variable axes) that can be trimmed or "pinned" to specific values, reducing file size. Unlike video, fonts use vector shapes. Variable fonts have multiple "source locations" (keyframes). Styles are created by mathematically interpolating between these locations (deltas). Trimming a variable font means removing unnecessary deltas.

For example, Recursive's Casual axis interpolates between "Linear" and "Casual" letterforms. The ampersand glyph animation (not shown here) demonstrates this.

Each added axis generally doubles the number of drawings. The Google Fonts API lets you select only the axes you need, resulting in smaller file sizes.

Variable Axis Tags

Axis abbreviations are four-letter tags (lowercase for Microsoft-defined axes, uppercase for custom axes). Five standard axes exist:

• wght – Weight
• wdth – Width
• opsz – Optical Size
• ital – Italic
• slnt – Slant

Recursive uses three custom axes (MONO, CASL, CRSV) plus wght and slnt.

Google Fonts API

The Google Fonts interface generates a URL that calls the Google Fonts API. This URL has parts:

1. The API URL (https://fonts.googleapis.com/css2)
2. Font family parameters
3. font-display property

To use the regular weight of Recursive (Sans Linear), use:

<code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

Or, in HTML:

<code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code>

Then, apply the font in CSS:

<code>body {
  font-family: 'Recursive', sans-serif;
}</code>

Default axis values: MONO 0, CASL 0, wght 400, slnt 0, CRSV 0.

Specifying Styles or Axes

The API offers two approaches:

1. Listing axes and specific values.
2. Listing axes and ranges.

To get a Casual style, use Recursive:CASL@1. For Mono Casual Regular:

<code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

For Regular and Bold:

<code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Google Fonts often serves a single variable font covering multiple requested styles. For production, request only needed styles. Using variable axes offers flexibility.

Getting the Full Variable Font

To maximize flexibility, use variable axes. Instead of Recursive:wght@400;700, use Recursive:[email protected] (or Recursive:[email protected] for the full weight range). Add axes alphabetically: Recursive:wght,[email protected],0..1.

The full variable font URL:

<code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

In HTML:

<code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Balancing Flexibility and File Size

Each axis increases file size. Omit unused axes. For Mono Casual styles with varying weights:

<code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

(Note: The above may not currently function correctly. Refer to the original article for updates.)

Multiple font families can be added, alphabetized by name.

Using Variable Fonts

Standard axes use standard CSS properties (font-weight: 425;). All axes use font-variation-settings. For a Mono Casual very-heavy style:

<code>body {
  font-weight: 950;
  font-variation-settings: 'MONO' 1, 'CASL' 1;
}</code>

font-variation-settings works well with CSS custom properties.

Further details on variable font design are available at VariableFonts.io and CSS-Tricks.

Variable Font Performance

Using all 64 Recursive styles as separate files totals ~6.4 MB. The variable font is ~537 KB. A subsetted Recursive WOFF2 with the full weight range is 60 KB; a single style is 25 KB. Using three weights saves ~15 KB with the variable font. The full variable font subset is 281 KB. Beyond file size, variable fonts offer design flexibility. Google Fonts optimizes font delivery.

The rest of the original article is omitted for brevity, but it continues with additional information about using the API, exploring other variable fonts, and promoting the author's work.

The above is the detailed content of Getting the Most Out of Variable Fonts on Google Fonts. For more information, please follow other related articles on the PHP Chinese website!