4 steps to using variable fonts

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.
(Image credit: Future)

Variable fonts enable font designers to define type variations within the font itself, enabling one font file to act like multiple fonts. Standard fonts are grouped into font families that contain multiple separate font files, each representing a different style, for example a light weight or a bold weight. Variable fonts contain all this same information in a single font file.

Using Source Sans Pro as an example, the variable version of the font totals approximately 394kb and comes in a wide variety of weights. If we were to use these font weights individually as standard font files, they are, on average, 234kb each – resulting in a combined file size of approximately 1856kb. Of course, this calculation assumes that all the font weights exist individually as a standard font, which they don’t. (Although if you are looking for just regular fonts, check out our post on the best free fonts available.)

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

net staff

net was a leading magazine for web designers and web developers, which was published between 1994 and 2020. It covered all areas of web development, including UX and UI design, frameworks, coding and much more. Much of its content lives on in Creative Bloq. View the net archive on Creative Bloq.