Gimlet Variable Font File Size Tests

In these tests, I have slowly built up a type palette using my typeface Gimlet with both conventional static fonts and the simplest variable font that can express those styles.

I generated each font in these tests in TTF format, pyftsubsetted to unicodes only, and converted to WOFF2. There is no STAT table or hints added. More details and caveats below.

Generally, what I’m finding is that how I save using the variable font depends a lot on how many sources are present and how they mesh with the instances I actually want to display on my page. So I wouldn’t assume that these tests are representative of all variable fonts or all type palettes. But still, it’s interesting to see some numbers.

In tests 1, 2, and 3, the number of instances that I use is equal to the number of sources in the variable font. Because a new set of deltas gets added to the variable font for each additional instance, the filesize savings are on the smaller side...but they’re there.

In tests 1a, 3a, and 3b, I add instances that fall on points along the existing axes. This means they do not require any additional sources in the variable font, so the variable font is essentially giving them to me for free. This is where I start to see significant savings.

Test 1: Text Regular and Bold styles

Primary text. The quick brown fox jumps over the lazy dog.

Strong text and subhead. The quick brown fox jumps over the lazy dog.

1 axis
    - 'wght' 400-700
2 sources
2 instances
 
GimletText-Regular.woff2  : 16,476 bytes
GimletText-Bold.woff2     : 16,548 bytes
----------------------------------------
Total instances           : 33,294 bytes
----------------------------------------
GimletTextVF.woff2        : 31,012 bytes
----------------------------------------
VARIABLE FONT SAVINGS     : ~2 kb
PERCENT CHANGE            : ~6%

Test 1a: Text Regular and Bold styles, plus Medium

Subhead. The quick brown fox jumps over the lazy dog.

Primary text. The quick brown fox jumps over the lazy dog.

Strong text. The quick brown fox jumps over the lazy dog.

1 axis
    - 'wght' 400-700
2 sources (same as test 1)
3 instances
 
GimletText-Regular.woff2  : 16,476 bytes
GimletText-Medium.woff2   : 16,608 bytes
GimletText-Bold.woff2     : 16,548 bytes
----------------------------------------
Total instances           : 49,632 bytes
----------------------------------------
GimletTextVF.woff2        : 31,012 bytes
----------------------------------------
VARIABLE FONT SAVINGS     : ~18.6 kb
PERCENT CHANGE            : ~38%

Test 2: Text Regular and Bold styles, plus Display Light

Headline. The quick brown fox jumps over the lazy dog.

Primary text. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Strong text and subhead. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

2 axes
    - 'wght' 400-700
    - 'opsz' 12-48
3 sources
3 instances
 
GimletText-Regular.woff2        : 16,476 bytes
GimletText-Bold.woff2           : 16,548 bytes
GimletDisplayNarrow-Light.woff2 : 16,272 bytes
----------------------------------------------
Total instances                 : 49,566 bytes
----------------------------------------------
GimletVF.woff2                  : 43,756 bytes
----------------------------------------------
VARIABLE FONT SAVINGS           : ~5.5 kb
PERCENT CHANGE                  : ~11%

Test 3: Text Regular and Bold styles, plus Display Light and Black

Headline 1. The quick brown fox jumps over the lazy dog.

Headline 2. The quick brown fox jumps over the lazy dog.

Primary text. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Strong text and subhead. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

2 axes
    - 'wght' 400-700
    - 'opsz' 12-48
4 sources
4 instances
 
GimletText-Regular.woff2         : 16,476 bytes
GimletText-Bold.woff2            : 16,548 bytes
GimletDisplayNarrow-Light.woff2  : 16,272 bytes
GimletDisplayNarrow-Black.woff2  : 16,480 bytes
-----------------------------------------------
Total instances                  : 66,046 bytes
-----------------------------------------------
GimletVF.woff2                   : 55,472 bytes
-----------------------------------------------
VARIABLE FONT SAVINGS            : ~10.3 kb
PERCENT CHANGE                   : ~16%

Test 3a: Text Regular and Bold styles, plus Display Light, Medium, and Black

Headline 1. The quick brown fox jumps over the lazy dog.

Headline 2. The quick brown fox jumps over the lazy dog.

Headline 3. The quick brown fox jumps over the lazy dog.

Primary text. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Strong text and subhead. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

2 axes
    - 'wght' 400-700
    - 'opsz' 12-48
4 sources (same as test 3)
5 instances
 
GimletText-Regular.woff2         : 16,476 bytes
GimletText-Bold.woff2            : 16,548 bytes
GimletDisplayNarrow-Light.woff2  : 16,272 bytes
GimletDisplayNarrow-Medium.woff2 : 16,724 bytes
GimletDisplayNarrow-Black.woff2  : 16,480 bytes
-----------------------------------------------
Total instances                  : 82,770 bytes
-----------------------------------------------
GimletVF.woff2                   : 55,472 bytes
-----------------------------------------------
VARIABLE FONT SAVINGS            : ~27 kb
PERCENT CHANGE                   : ~33%

Test 3b: Text Regular, Medium, Bold styles, plus Display Light, Medium, and Black

Headline 1. The quick brown fox jumps over the lazy dog.

Headline 2. The quick brown fox jumps over the lazy dog.

Headline 3. The quick brown fox jumps over the lazy dog.

Subhead. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Primary text. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Strong text. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

2 axes
    - 'wght' 400-700
    - 'opsz' 12-48
4 sources (same as test 3)
6 instances
 
GimletText-Regular.woff2         : 16,476 bytes
GimletText-Medium.woff2          : 16,608 bytes
GimletText-Bold.woff2            : 16,548 bytes
GimletDisplayNarrow-Light.woff2  : 16,272 bytes
GimletDisplayNarrow-Medium.woff2 : 16,724 bytes
GimletDisplayNarrow-Black.woff2  : 16,480 bytes
-----------------------------------------------
Total instances                  : 99,180 bytes
-----------------------------------------------
GimletVF.woff2                   : 55,472 bytes
-----------------------------------------------
VARIABLE FONT SAVINGS            : ~43 kb
PERCENT CHANGE                   : ~44%

Additional notes

Only the static instances are loaded on this page. The variable fonts are available for testing upon request.

I realize that a font for subheads could use an optical size between Text and Display rather than the Text style. This could easily happen in the variable font with no added filesize, however for the purposes of these tests I wanted to match the existing non-variable styles.

To keep things simple for now, these examples do not include italic styles, even though they play an important part in type palettes as emphasis or in secondary roles. Including an "ital" axis in the variable font might not always be practical due to differences in the designs of the Roman and Italic. Instead of doubling the filesize with a full Italic designspace, static Italic instances could be loaded as needed, or an Italic variable font with a smaller designspace could be used (such as the configuration from example 1).

Any questions?

Get in touch.