:control_knobs: The Inter typeface family

October 30, 2019

Thanks to @font-face, we are no longer limited to using “web-safe fonts” on our websites. Google Fonts or Adobe Fonts make thousands of typefaces easy and reliable to use. However, each new variation of a typeface results in a larger download for our visitors. If we wanted to use regular and bold versions of a typeface, our visitors had to download two separate files. Throw in italic versions of both and we’re at four files. Using many typefaces impacts our site’s performance through larger and longer downloads.

Variable fonts are about to fix all that. Instead of serving one variation per file, they will contain all variations in one file. You will be able to set this one typeface to any weight at no extra cost. Some variable fonts even allow you to adjust the slant (italics) or other parameters. A single download will give you access to every variation of an entire typeface family! This is great for performance and gives us much more granular control over what our text looks like.

My favorite variable font right now is the Inter typeface family:

A sample of the Inter typeface containing uppercase- and lowercase letters, numbers, and some special characters

Inter is completely free, and it comes with instructions on how you can start using it today. Browser and software support for variable fonts is growing, and they are well worth a look. Check out v-fonts.com for even more options.

If you use Inter or another variable font for something, send me a screenshot!

– Dom