Slice — an app to remove variable font axes
- Published at
- Updated at
- Reading time
- 2min
On my font optimization journey, I've learned that subsetting is an invaluable approach to reducing font file sizes. I've been able to cut down Roboto's size from 785kB to 200kB by subsetting it to ASCII characters. And when going the extreme way, I could even bring it down to 58kB by aggressively limiting the included characters.
But could one squeeze out even more bytes of the Roboto font?
When you inspect Roboto with Wakamai Fondue, you'll discover that it ships 13(!) variable font axes.
That's great, but I wonder if you need all these variable configuration parameters in production and argue that a good design defines only a few font variations. 13 configurable axes shouldn't be needed at all times.
Thanks to Tobias Kunish, I learned you can also remove axes with some tooling! Does the removal of font axes affect the font size? Let's find out!
Slice is an open-source application to create custom font design spaces from variable fonts. Unfortunately, I'm not enough font nerd to understand all of Slice's functionality, but what I get is that you can inspect a font's axes and limit their ranges or define a static value for each.
For example, if you're not interested in including all the variations of the parametric figure height (YTFI
), set a value and drop the axis from the font entirely.
To test things out, I kept the opsz
, wght
, GRAD
, wdth
and slnt
axis untouched and set a fixed value for the eight other axes to remove them from my local Roboto font.
Font | Size with 13 axes | Size with 5 axes |
---|---|---|
Roboto (all characters & glyphs) | 784kB | 710kB |
Roboto (Latin) | 322kB | 292kB |
Roboto (ASCII) | 202kB | 182kB |
Roboto (only a few characters) | 58kB | 52kB |
And indeed, removing font axes resulted in more saved bytes!
So, if you're on the journey of optimizing your fonts, subsetting will give you massive results, but if you want to go the extra mile, you can also shave off some more bytes by limiting font axis range values or removing axes entirely. Happy optimizing!
Join 5.5k readers and learn something new every week with Web Weekly.