{"id":52044,"date":"2019-05-21T11:48:50","date_gmt":"2019-05-21T18:48:50","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=52044"},"modified":"2024-04-18T04:20:02","modified_gmt":"2024-04-18T11:20:02","slug":"what-is-a-variable-font","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/what-is-a-variable-font","title":{"rendered":"What is a Variable Font?"},"content":{"rendered":"

Variable fonts are single font files that include an entire font family, allowing for many different variations in style without the need to use a separate file for each.\n

<\/span>How Are Variable Fonts Different To Static Fonts?<\/span><\/h2>

\nNormally, a typeface, such as Arial, has many font files associated with it: Arial Regular, Arial Light, Arial Bold, etc. The typeface is a family of designs created in a particular style; the fonts are individual files within that family.\nEach of these fonts uses the same typeface but differ in one or two attributes; a bold font, for example, has a higher weight (or thickness) than a normal font. Because of this, a typeface might have 20, 30, or more static files associated with it.\nA variable font contains all the varieties (and more) that these static files represent, but in just one file. The Manufaktur typeface, for example, includes 60 fonts, but can instead be downloaded as one variable font:\n

<\/figure>\n \n<\/p>

<\/span>How do Variable Fonts Work?<\/span><\/h2>

\nVariable fonts have been designed to have one or more axis of variation. These axes allow the designer to enter any value within a given range for a particular aspect of the design. Sometimes this is a scale (e.g. weight), and sometimes it is a choice of on or off (e.g. italic).\nUnlike static fonts, which are available in a few select options, a designer can enter any applicable number on the scale. Want a font weight of exactly 553? No problem.\nThere are five standardized axes: weight, width, slant, italic, and optical size, and designers can also create custom axes to define other values that are not covered by these options.\nAll variable fonts allow you to define a value for at least one of these axes, but few include them all. This Figuera Variable Font enables you to enter a custom value for width and weight:\n

<\/figure>\n \n<\/p>

<\/span>Benefits of Variable Fonts<\/span><\/h2>

\nVariable fonts benefit both web design and graphic design:\n<\/p>

<\/span>On-The-Fly Design Changes<\/span><\/h3>

\nUsing variable fonts in graphic design enables designers to make quick changes using a slider, rather than fiddling around with different font files. You can customize your designs quicker and easier, which is particularly useful when you’re making changes live while discussing the project with your client.\n<\/p>

<\/span>Smaller File Size and Fewer HTTP Requests<\/span><\/h3>

\nMost websites use 6-8 variations of a font, each one requiring an HTTP request and a download of around 20kB (or more). Using a variable font reduces this to one HTTP request and a smaller overall download size. This reduces loading times, improving the user experience.\n<\/p>

<\/span>Limitless Design<\/span><\/h3>

\nVariable fonts allow designers to use a wide variety of weights and widths without requiring multiple files. This allows for better design decisions; you can use as many sizes, styles, weights as you like without impacting on site performance. Designers can design for style and readability without worrying about loading times.\n<\/p>

<\/span>It’s Just Easier<\/span><\/h3>

\nSick of having to download and install 20 separate files every time you want to try a new font? Us too! Variable fonts just make sense. It’s much easier to find the design you like by moving a few sliders than it is by trying lots of different versions.\n<\/p>

<\/span>How to Use a Variable Font as a Graphic Designer<\/span><\/h2>

\nYou can use variable fonts in Adobe Photoshop and Illustrator, but not InDesign (yet – Adobe say they’re working on it). The latest versions include a few example variable fonts so you can get started even if you haven’t purchased any yet.\nThe included variable fonts are Acumin Variable Concept, Minion Variable Concept, Myriad Variable Concept, Source Sans Variable, Source Serif Variable, and Source Code Variable.\nUsing a variable font is easy:\n<\/p>