The Inter typeface family
@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:
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!
This nonsense test string reveals some of the main differences when comparing typefaces, like their weight and related characteristics.
Writing is best when it is easily understood by readers. Everything I write goes through an extensive editing phase to improve its readability.
Instead of navigating many layers of directories when importing files, we can use aliases that cover that error-prone part for us.