Slice — an app to remove variable font axes (#note)

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 t…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2023-04-15T22:00:00+00:00) Slice — an app to remove variable font axes (#note). Retrieved from https://www.scien.cx/2023/04/15/slice-an-app-to-remove-variable-font-axes-note/

MLA
" » Slice — an app to remove variable font axes (#note)." Stefan Judis | Sciencx - Saturday April 15, 2023, https://www.scien.cx/2023/04/15/slice-an-app-to-remove-variable-font-axes-note/
HARVARD
Stefan Judis | Sciencx Saturday April 15, 2023 » Slice — an app to remove variable font axes (#note)., viewed ,<https://www.scien.cx/2023/04/15/slice-an-app-to-remove-variable-font-axes-note/>
VANCOUVER
Stefan Judis | Sciencx - » Slice — an app to remove variable font axes (#note). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/15/slice-an-app-to-remove-variable-font-axes-note/
CHICAGO
" » Slice — an app to remove variable font axes (#note)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2023/04/15/slice-an-app-to-remove-variable-font-axes-note/
IEEE
" » Slice — an app to remove variable font axes (#note)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2023/04/15/slice-an-app-to-remove-variable-font-axes-note/. [Accessed: ]
rf:citation
» Slice — an app to remove variable font axes (#note) | Stefan Judis | Sciencx | https://www.scien.cx/2023/04/15/slice-an-app-to-remove-variable-font-axes-note/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.