Hello everyone ~ here are the peanuts that were disturbed by the heavy rain. Of course, it doesn't delay me from talking about design with you.
Since adobe, apple, Google and Microsoft jointly released the OpenType 1.8 specification in 2016, variable fonts have been a hot topic in font design. During this period, many classic fonts have also launched new versions of variable fonts, such as variable otf/tff in bold typeface of Siyuan, Helvetica now variable of helvetica. This year, sigma also added the function of variable fonts, and variable fonts are used more and more in web page design, dynamic posters, creative videos, etc., all of which show the development potential of variable fonts.
Image source: https://www.monotype.com/fonts/helvetica-now-variable
What is a variable font
A variable font is a single font file that can contain the entire font family. As we all know, standard font files generally contain six word weights: thin, light, regular, SemiBold, bold and heavy6. Each word weight exists as a separate font file. If there are variants such as italic, condensed and extended, there can be as many as twenty or thirty related font files.
However, variable fonts can realize the free adjustment of font thickness, width, height, tilt and other styles in a font file, and each dimension can be adjusted in hundreds of steps. A font file can support up to one million font styles, far exceeding the number of static font styles.
Variable fonts can have such an amazing number of styles, which mainly depends on the setting of a single or multiple "axes" of the font. The axis involves many aspects, such as weight, width, height, inclination, italics and optical size. There is a web page dedicated to explaining the concept of variable font "axis" on Fig. interested partners can have an in-depth understanding.
Dynamic font concept https://www.figma.com/typography/variable-fonts/#the -basics
Advantages of variable fonts
Compared with static fonts, the advantages of dynamic fonts include:
1. smaller file size
Taking the classic Western bold font robot as an example, a standard font package contains 12 font files, each of which is about 170kb in size, while the variable font robot flex has only one font file, with a size of 108KB, but the font styles it can support far exceed the 12 static fonts. For web page design, fewer font files and smaller file volume can bring less HTTP requests and faster loading speed to the website, and bring a smoother user experience.
Freer design space
Variable fonts allow designers to freely change font styles through the slider. On the one hand, this allows designers to quickly adjust font styles at any time without waiting for font files to be reloaded; On the other hand, the super rich font styles allow designers to design the layout more accurately and carefully according to their own ideas, leaving more choices and creative space.
Better responsive web adaptability
The variable font can better adapt to the responsive web design. The font shape can be changed according to the different display proportion of the device, so that the page can present the best visual effect under the conditions of different devices, contrast and viewing environment, and provide users with a more comfortable use experience.
Typo labs used variable fonts as part of their 2018 conference visual signage.
5 variable font resource websites
Here are some super easy to use variable font websites, where you can comprehensively understand the popular variable fonts, adjust parameters to preview different variable font styles, download relevant resources, obtain font CSS code, or upload the variable font preview effect on your computer.
1. v-fonts
Website link: https://v-fonts.com/
V-fonts is a simple and easy-to-use public resource search website for variable fonts. It contains most of the currently available variable fonts, and provides basic font information, producers, copyright information and download channels. It is very convenient to find free and commercially available variable fonts.
V-fonts provides a setting interface for all available axes of variable fonts. By adjusting the slider, you can preview the font style in real time. You can also quickly filter the variable fonts you want by font feature labels, designers and font publishers.
2. Axis-Praxis
Website link: https://www.axis-praxis.org/specimens/__DEFAULT__
Axis praxis is a website that collects variable font resources in chronological order. The history of the website can be traced back to 1991, so it has collected a lot of valuable historical data. On axis praxis, we can preview different styles of variable fonts in a complete layout, support modifying text alignment and color, and also support uploading local variable font files for preview.
Click the round I black mark on the right side of the font column to view the font details, including font information, copyright, available axes, naming examples, etc.
3. wakamaifondue
Website link: https://wakamaifondue.com/
Wakamaifondue is a website of variable font preview tool designed by individuals. We can upload the font on our computer, and the website will automatically recognize and display the details, layout features, all character sets and other information of the variable font, and provide the CSS style table download of the font.
3. Font Playground
Website link: https://play.typedetail.com/
Font playground is a website dedicated to previewing high-quality variable fonts. The website provides a whiteboard for freely editable fonts, where you can preview the style effects of multiple fonts at the same time. It is very suitable for observing font details and comparing the differences between different fonts.
The lower left corner of the website provides copyright information and resource channels for variable fonts. On the right is the adjustment panel. If you click "code" above the whiteboard, the right panel will switch to CSS code.
4. Google font's variable font
Link: https://fonts.google.com/variablefonts
Google font has a special variable font section, which collects all the variable fonts on Google font. Click the corresponding font name to go to the details page for download. The fonts are free and commercially available. There are also various axis definitions explained on the website, which are very comprehensive. If you don't understand the abbreviations of various axes of variable fonts, you must remember to look at them.
5. variablefonts
Website link: https://variablefonts.io/
Variablefonts is a very comprehensive introduction to variable fonts popular science website, where you can learn how variable fonts work, how to make UI design easier and more beautiful, and provide relevant available resources.
The above is the variable font related resources recommended for you today. I hope they can help you in your design work. If you have any questions about the article or design content, you are welcome to put forward them in the comment area, and I will reply at the first time. In addition, you are also welcome to join the official design exchange group of YouSHE and communicate with small partners who like design (see the banner below for the group QR code)~
