c's casual considerations

- variable font

so recently, i found myself looking at the official page for the ubuntu font. don’t remember why, just kinda was.1 and i noticed something. they mention a variable font, multiple times, and have a slider to let you experiment with it

now, i had already heard of variable fonts multiple times, and i thought the idea was awesome. despite shipping only 4 font files, i felt like it was just far too much from the start. i love the concept of shipping one font file with every style in it. but the ubuntu font never had this, so i gave up looking into it

but today, i see this mention. and i’m like oh, awesome! but it’s not in the download. it’s not ANYWHERE. google fonts isn’t using this, this isn’t in the source code repository, nothing. they advertize this as a feature of the font, but don’t give it to you! so i do the only sane thing anyone can do: download ubuntu.com’s entire css stylesheet, search for any instance of the string @font-face, and download the variable font from them

i immediately integrated this into my site, and it just… seems to work! variable fonts have about the same support as normal woff2, which was already the only thing i bothered shipping, as well as some other features on my site. (my logic is: if someone isn’t using a browser from the past 5 years, bandwidth and raw speed is likely more of a concern than being ultra pretty) so now instead of 4 font files for normal, italic, bold, and bold italic; i have only two font files for normal and italic! both of these files have light and bold variants built in, and even the condensed version! and i can interpolate between any thickness or compactness that i want! and these files are smaller AND include more characters than i was previously shipping! it was only ascii before, now there’s some accent characters. stripping these extra characters actually makes the file larger, presumably it has some symlink-like magic going on there.

this ubuntu variable font seems to be a very very new development. looking at archive.org, the site was updated to have it between and of this year. so i guess i got in very early! or i just totally missed the part where they announced this. either way, i have it now, and there’s nothing they can do to stop me >:D

the only issue i’ve had with the variable font is that it’s noticeably less bold by default. the standard 400 font weight seems quite thin. i had to set it to 475 to somewhat match the standard font i was previously using. same with bold text, i was previously using the normal bold keyword (700), and i upped it to the max of 800 to make it look the same. it’s minor though, and perhaps a bug they will fix later on. for now, i shall bathe in the glory of mild bandwidth savings!

  1. i remembered after writing more, i started trying to include the monospace version, which would include 4 more font files and i thought “man, i have like 8 font files now. this sucks, i wonder if there’s a better way to do this”. and there was! as you either just read or are about to read ↩

appendix

i forgot to mention, there is also no monospace italic. their own example just has the browser fake italics by skewing the font. which is ugly, and doesn’t match the normal font! the original monospace italic is distinctly different from the normal monospace! i hope they ship this as a variable font eventually as well. for now, i am using the original italic and italic bold monospace

it’s also worth noting that, despite canonical removing all mention of the condensed version of ubuntu from the website, it is available in the font! for those unaware, this can be accessed with the font-stretch property, and ubuntu accepts a range of 75%-100%