{"id":5859,"date":"2021-06-25T15:34:09","date_gmt":"2021-06-25T12:34:09","guid":{"rendered":"https:\/\/typetype.org\/fr\/?p=5859"},"modified":"2026-05-15T10:19:34","modified_gmt":"2026-05-15T07:19:34","slug":"variable-fonts-whats-new-in-them-for-designers","status":"publish","type":"post","link":"https:\/\/typetype.org\/fr\/blog\/variable-fonts-whats-new-in-them-for-designers\/","title":{"rendered":"Variable fonts: What\u2019s new in them for designers?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1400\" height=\"700\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/var_fonts.gif\" alt=\"\" class=\"wp-image-5860\"\/><\/figure>\n\n\n\n<p>In&nbsp;this article we&nbsp;will tell you about <a href=\"https:\/\/typetype.org\/fr\/fonts\/variable\/\">variable fonts<\/a> and what an&nbsp;interesting and useful, yet underrated instrument they are. We&nbsp;will also mention their disadvantages and nuances of&nbsp;working with them.<\/p>\n\n\n\n<p>The article will cover the following issues:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creation history<\/li>\n\n\n\n<li>Technical peculiarities<\/li>\n\n\n\n<li>Advantages and disadvantages<\/li>\n\n\n\n<li>Use peculiarities<\/li>\n\n\n\n<li>Creative use examples<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Creation history<\/h2>\n\n\n\n<p>To&nbsp;start with, let\u2019s talk about the history of&nbsp;variable fonts technology development.<\/p>\n\n\n\n<p>In&nbsp;late 1980s, Adobe presented the PostScript format and Apple presented the TrueType format for font file development. They both used Bezier curves to&nbsp;construct characters. We&nbsp;use these formats in&nbsp;their updated forms to&nbsp;this day when working with font files.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"328\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-1024x328.png\" alt=\"\" class=\"wp-image-5861\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-1024x328.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-768x246.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-1200x384.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-2048x655.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-8-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">1980s&nbsp;\u2014 PostScript (Adobe), TrueType (Apple)<\/figcaption><\/figure>\n\n\n\n<p>In&nbsp;1991, Adobe presented the Multiple Master technology as&nbsp;an&nbsp;extension of&nbsp;the PostScript format. It&nbsp;allowed storing several contour variants for one glyph in&nbsp;the same font file. These variants were the end points on&nbsp;a&nbsp;scale, between which you could find intermediary values, for example, in&nbsp;order to&nbsp;change the weight or&nbsp;width.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-1024x327.png\" alt=\"\" class=\"wp-image-5862\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-768x245.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-1200x383.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-2048x654.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-9-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">1991&nbsp;\u2014 Multiple Master (Adobe)<\/figcaption><\/figure>\n\n\n\n<p>To&nbsp;use such a&nbsp;font, a&nbsp;static face had to&nbsp;be&nbsp;generated first using a&nbsp;special program (Adobe Type Manager). It&nbsp;then had to&nbsp;be&nbsp;uploaded to&nbsp;the system for use in&nbsp;a&nbsp;graphic editor. Due to&nbsp;the difficulty of&nbsp;use this format has never become popular and font designers continued to&nbsp;create static faces.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-1024x327.png\" alt=\"\" class=\"wp-image-5863\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-768x245.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-1200x383.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-2048x654.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-10-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Static font<\/figcaption><\/figure>\n\n\n\n<p>In&nbsp;1997, Adobe and Microsoft together presented the OpenType technology. It&nbsp;was based on&nbsp;the TrueType format but allowed for a&nbsp;much larger number of&nbsp;characters to&nbsp;be&nbsp;implemented (65000, previously the limit was 256). TrueType also allowed for&nbsp;OT features, without which we&nbsp;can not imagine a&nbsp;modern font anymore. Here we&nbsp;are talking about small capitals support, tabular characters, superiors, stylistic sets, contextual alternates and so&nbsp;on. The OpenType format remains most popular to&nbsp;this day.<\/p>\n\n\n\n<p>Finally, in&nbsp;2016, Adobe, Apple, Google, and Microsoft have announced the new version of&nbsp;the OpenType format&nbsp;\u2014 OpenType Font Variables. Since then, font designers can write the information on&nbsp;several faces of&nbsp;a&nbsp;font family in&nbsp;the same file. The key point of&nbsp;this format is&nbsp;similar to&nbsp;Multiple Master but has one crucial difference: now static faces don\u2019t have to&nbsp;be&nbsp;generated in&nbsp;advance. Parameters can be&nbsp;set directly in&nbsp;the graphic editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-12.gif\" alt=\"\" class=\"wp-image-5864\"\/><figcaption class=\"wp-element-caption\">2016&nbsp;\u2014 OpenType Font Variables<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Technical peculiarities<\/h2>\n\n\n\n<p>Let&nbsp;us have a&nbsp;closer look at&nbsp;how this format is&nbsp;different from the classic OpenType.<\/p>\n\n\n\n<p>When a&nbsp;designer buys a&nbsp;font family, say, a&nbsp;sans serif of&nbsp;9&nbsp;weights, he&nbsp;or&nbsp;she obtains 9&nbsp;separate font files. These faces have been previously prepared by&nbsp;a&nbsp;font designer and the weights were calculated such that the widths are arranged gradually from the lightest to&nbsp;the boldest.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-1024x327.png\" alt=\"\" class=\"wp-image-5865\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-768x245.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-1200x383.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-2048x654.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-13-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-norms-pro\/\">TT\u00a0Norms Pro<\/a><\/figcaption><\/figure>\n\n\n\n<p>A&nbsp;variable font, on&nbsp;the other hand, consists of&nbsp;only one file and the range of&nbsp;faces is&nbsp;limited only by&nbsp;the thinnest and the boldest ones. And the designer can choose any one among them that he&nbsp;or&nbsp;she likes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-14.gif\" alt=\"\" class=\"wp-image-5866\"\/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-norms-pro\/\">TT\u00a0Norms Pro<\/a> Variable<\/figcaption><\/figure>\n\n\n\n<p>If&nbsp;you look into a&nbsp;font, you\u2019ll see that each character has anchor points, based on&nbsp;which it&nbsp;is&nbsp;constructed. If&nbsp;the number of&nbsp;these points is&nbsp;the same in&nbsp;the lightest and boldest faces, the program can connect them and calculate the midpoint positions. Font development&nbsp;is, of&nbsp;course, not as&nbsp;simple and straightforward, and we&nbsp;often have to&nbsp;specify more than two masters, but this does not affect user experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-1024x327.png\" alt=\"\" class=\"wp-image-5867\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-768x246.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-1200x384.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-2048x655.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-15-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Anchor points<\/figcaption><\/figure>\n\n\n\n<p>The range between two end faces is&nbsp;called an&nbsp;axis. In&nbsp;graphic editors like Adobe it&nbsp;looks like a&nbsp;slider that can be&nbsp;adjusted to&nbsp;choose the needed value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-16.gif\" alt=\"\" class=\"wp-image-5868\"\/><figcaption class=\"wp-element-caption\">Slider in&nbsp;graphic editor<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Variation axes options<\/strong><\/h4>\n\n\n\n<p>The first<strong> <\/strong>variant is&nbsp;the weight axis that has already been described. In&nbsp;most font families, there are several faces of&nbsp;different weights and theoretically they all can be&nbsp;variable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-17.gif\" alt=\"\" class=\"wp-image-5869\"\/><figcaption class=\"wp-element-caption\">Weight axis<\/figcaption><\/figure>\n\n\n\n<p>Let\u2019s imagine that you have bought a&nbsp;regular font family and plan to&nbsp;use it&nbsp;to&nbsp;set a&nbsp;book or&nbsp;a&nbsp;website with a&nbsp;large array of&nbsp;text. You know what the optimal weight of&nbsp;the main text should be&nbsp;so&nbsp;that it&nbsp;is&nbsp;comfortable to&nbsp;read. But you have a&nbsp;problem: the regular face in&nbsp;the family looks too light, and the next one, say, the medium, looks too bold. A&nbsp;weight between regular and medium would be&nbsp;perfect, but it&nbsp;does not exist. But if&nbsp;you were using a&nbsp;variable font, you could move the slider in&nbsp;the editor or&nbsp;specify a&nbsp;custom value in&nbsp;CSS to&nbsp;create&nbsp;it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-1024x327.png\" alt=\"\" class=\"wp-image-5874\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-768x245.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-1200x383.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-2048x654.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Optimal weight<\/figcaption><\/figure>\n\n\n\n<p>The next rather frequent axis is&nbsp;the width of&nbsp;the font. In&nbsp;static families, you have several width options, for example, Normal, Condensed or&nbsp;Extended. In&nbsp;the variable font you can manually select the needed width between the narrowest and the broadest faces.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-19.gif\" alt=\"\" class=\"wp-image-5871\"\/><figcaption class=\"wp-element-caption\">Width axis<\/figcaption><\/figure>\n\n\n\n<p>This setting may come in&nbsp;handy if&nbsp;you are setting the text in&nbsp;narrow columns which have to&nbsp;fit in&nbsp;as&nbsp;much text as&nbsp;possible. Normal width is&nbsp;too broad for this purpose, and the narrow is&nbsp;inconvenient for reading large texts. A&nbsp;variable font would have allowed you to&nbsp;make the face a&nbsp;little narrower without compromising its readability.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1024x327.png\" alt=\"\" class=\"wp-image-5872\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-768x245.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1200x383.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-2048x654.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-18-1-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Optimal width<\/figcaption><\/figure>\n\n\n\n<p>The third axis is&nbsp;slant. It&nbsp;is&nbsp;applicable when the characters in&nbsp;the slanted face are constructed the same way as&nbsp;in&nbsp;the upright. Most often, this variant can be&nbsp;found in&nbsp;sans serifs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-22.gif\" alt=\"\" class=\"wp-image-5875\"\/><figcaption class=\"wp-element-caption\">Slant axis<\/figcaption><\/figure>\n\n\n\n<p>You can choose the incline angle yourself, thus regulating how much this face will stand out in&nbsp;the text. This option is&nbsp;useful if&nbsp;you need to&nbsp;set a&nbsp;large text array in&nbsp;an&nbsp;inclined face without causing the reader any discomfort.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-1024x327.png\" alt=\"\" class=\"wp-image-5877\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-768x245.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-1200x383.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-2048x654.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-23-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Optimal slant<\/figcaption><\/figure>\n\n\n\n<p>Finally, an&nbsp;axis that is&nbsp;less widely spread but is&nbsp;also embedded into the OTF Var format, the optical size axis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-1024x327.png\" alt=\"\" class=\"wp-image-5878\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-768x246.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-1200x384.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-2048x655.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-24-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-fors\/\">TT\u00a0Fors<\/a> Display<\/figcaption><\/figure>\n\n\n\n<p>You might have seen Display and Text subfamilies in&nbsp;variable fonts. The first usually stands out due to&nbsp;its higher contrast, more detail and narrower spacing. Display faces are used in&nbsp;titles, posters, and other cases where large text size is&nbsp;needed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-1024x327.png\" alt=\"\" class=\"wp-image-5879\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-768x246.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-1200x384.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-2048x655.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-25-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-fors\/\">TT\u00a0Fors<\/a> Display<\/figcaption><\/figure>\n\n\n\n<p>The Text subfamily, on&nbsp;the contrary, has lower contrast and fewer details. Overall, it&nbsp;is&nbsp;better readable in&nbsp;smaller sizes and large texts.<\/p>\n\n\n\n<p>In&nbsp;a&nbsp;variable font, you can generate an&nbsp;intermediary variant which will still be&nbsp;well readable in&nbsp;small sizes but more refined than a&nbsp;simple text face. This variant would be&nbsp;ideal in&nbsp;smaller titles, for example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-1024x327.png\" alt=\"\" class=\"wp-image-5880\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-768x246.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-1200x384.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-1536x491.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-2048x655.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-26-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-fors\/\">TT\u00a0Fors<\/a> Text<\/figcaption><\/figure>\n\n\n\n<p>We&nbsp;have now covered the axes that were implemented by&nbsp;the format developers. Specific names have been developed for them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wght&nbsp;\u2014 weight<\/li>\n\n\n\n<li>wdth&nbsp;\u2014 width<\/li>\n\n\n\n<li>slnt&nbsp;\u2014 slant<\/li>\n\n\n\n<li>ital&nbsp;\u2014 italics<\/li>\n\n\n\n<li>opsz&nbsp;\u2014 optical size<\/li>\n<\/ul>\n\n\n\n<p>But font designers can also invent and implement their own axes.<\/p>\n\n\n\n<p>You can find completed examples where the following parameters change: serif length, height of&nbsp;lowercase and uppercase characters, height of&nbsp;ascenders and descenders, contrast, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-28.gif\" alt=\"\" class=\"wp-image-5881\"\/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/www.axis-praxis.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis.org<\/a><\/figcaption><\/figure>\n\n\n\n<p>A&nbsp;font can of&nbsp;course be&nbsp;changed decoratively. Only the author\u2019s imagination is&nbsp;the limit here.<\/p>\n\n\n\n<p>Imagine now that one axis can provide you with a&nbsp;thousand options for font faces. If&nbsp;you have two axes, there are now a&nbsp;million options. Now, when you have custom axes, the font options become endless.<\/p>\n\n\n\n<p>To&nbsp;sum&nbsp;up, almost any typographic task can be&nbsp;solved with the use of&nbsp;variable fonts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages and disadvantages of&nbsp;variable fonts<\/h2>\n\n\n\n<p>Now let&nbsp;us discuss some of&nbsp;the problems we&nbsp;encounter when using variable fonts and interesting use cases of&nbsp;variable fonts.<\/p>\n\n\n\n<p>It&nbsp;should also be&nbsp;noted that the variable font technology has existed for many years now. However, while the technology of&nbsp;font editors advanced greatly and variable fonts have become so&nbsp;much easier to&nbsp;create, they are still not very popular or&nbsp;widely used. This means that either there is&nbsp;not yet an&nbsp;area where they can be&nbsp;used or&nbsp;that the product itself does not correspond to&nbsp;the market demand, or&nbsp;that the instruments do&nbsp;not allow using them. At&nbsp;the moment, not all graphic editors and browsers support variable fonts&nbsp;\u2014 for example, not all browsers support design apps.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-1024x327.png\" alt=\"\" class=\"wp-image-5883\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-1024x327.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-768x245.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-1200x383.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1-300x96.png 300w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.1.png 1440w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/v-fonts.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"328\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-1024x328.png\" alt=\"\" class=\"wp-image-5884\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-1024x328.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-768x246.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-1200x384.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-1536x492.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-2048x655.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-31-33.2-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/v-fonts.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">v-fonts.com<\/a><\/figcaption><\/figure>\n\n\n\n<p>The greatest disadvantage of&nbsp;variable fonts is&nbsp;the low quality. Most<strong> <\/strong>variable fonts are of&nbsp;mediocre quality, and consequently, they may act up&nbsp;at&nbsp;the worst moment when in&nbsp;use.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-34.gif\" alt=\"\" class=\"wp-image-5885\"\/><figcaption class=\"wp-element-caption\">Low quality of&nbsp;some variable font<\/figcaption><\/figure>\n\n\n\n<p>Another example. If&nbsp;you have a&nbsp;website that is&nbsp;loaded 1000000 times per day and uses the full Norms PRO family, it&nbsp;takes up&nbsp;5306 Kbytes on&nbsp;the webpage. If&nbsp;you use the variable version of&nbsp;the family, it&nbsp;only takes 1875&nbsp;Kbytes. Have a&nbsp;close look at&nbsp;the table below. We&nbsp;see that with this huge number of&nbsp;loads per day, there can be&nbsp;a&nbsp;total difference of&nbsp;3272&nbsp;Gb that has to&nbsp;be&nbsp;loaded from the server. Obviously, it&nbsp;does not matter much for each individual loading instance, but when summed&nbsp;up, it&nbsp;matters.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"328\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-1024x328.png\" alt=\"\" class=\"wp-image-5886\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-1024x328.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-420x134.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-768x246.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-1200x384.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-1536x492.png 1536w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-2048x655.png 2048w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-600x192.png 600w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-944x302.png 944w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-80x26.png 80w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-35-35-300x96.png 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The difference between static and variable version of&nbsp;the font<\/figcaption><\/figure>\n\n\n\n<p>It&nbsp;also has to&nbsp;be&nbsp;noted that most variable fonts are not hinted. It&nbsp;is&nbsp;a&nbsp;difficult process that has to&nbsp;be&nbsp;learned. Because of&nbsp;this, variable fonts may not always display properly in&nbsp;small sizes.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1040\" style=\"aspect-ratio: 1920 \/ 1040;\" width=\"1920\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-37.mp4\"><\/video><figcaption class=\"wp-element-caption\">Hinting of&nbsp;variable font<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to&nbsp;use variable fonts<\/h2>\n\n\n\n<p>Now let&nbsp;us talk about using <a href=\"https:\/\/typetype.org\/fr\/fonts\/variable\/\">variable<\/a> fonts in&nbsp;work.<\/p>\n\n\n\n<p>Let&nbsp;us first look at&nbsp;Adobe Illustrator. For instance, you have already typed a&nbsp;text and would like to&nbsp;choose an&nbsp;already installed variable font for&nbsp;it. Such fonts have a&nbsp;\u00abvar\u00bb sign next to&nbsp;them in&nbsp;the list. By&nbsp;the way, Adobe has its own variable fonts installed in&nbsp;the latest software versions, so&nbsp;you can start experimenting with them.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"792\" style=\"aspect-ratio: 1430 \/ 792;\" width=\"1430\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-39.mp4\"><\/video><figcaption class=\"wp-element-caption\">Selecting variable font in&nbsp;Adobe Illustrator<\/figcaption><\/figure>\n\n\n\n<p>Once you have chosen a&nbsp;variable font, an&nbsp;additional button Variable Font appears in&nbsp;the Character panel. All variable axes present in&nbsp;the font hide behind&nbsp;it, and you can change the parameters with the sliders. You can see the results immediately. Other settings in&nbsp;this panel remain unchanged.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"792\" style=\"aspect-ratio: 1430 \/ 792;\" width=\"1430\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-40.mp4\"><\/video><figcaption class=\"wp-element-caption\">Variable sliders in&nbsp;the character panel<\/figcaption><\/figure>\n\n\n\n<p>You can also choose one of&nbsp;the faces from the list and use that family as&nbsp;static.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"792\" style=\"aspect-ratio: 1430 \/ 792;\" width=\"1430\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-41.mp4\"><\/video><figcaption class=\"wp-element-caption\">Variable font as&nbsp;static faces<\/figcaption><\/figure>\n\n\n\n<p>The process in&nbsp;Sketch is&nbsp;absolutely the same, but it&nbsp;has no&nbsp;special marks next to&nbsp;variable fonts.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"792\" style=\"aspect-ratio: 1430 \/ 792;\" width=\"1430\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-42.mp4\"><\/video><figcaption class=\"wp-element-caption\">Selecting variable font in&nbsp;Sketch<\/figcaption><\/figure>\n\n\n\n<p>Variable fonts can be&nbsp;implemented in&nbsp;the web with help of&nbsp;CSS. We&nbsp;will not cover this in&nbsp;detail, but we&nbsp;can have a&nbsp;look at&nbsp;how variable fonts are integrated in&nbsp;the web.<\/p>\n\n\n\n<p>Here you can see that changing the properties of&nbsp;variable fonts is&nbsp;available using CSS Transitions.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1050\" style=\"aspect-ratio: 2554 \/ 1050;\" width=\"2554\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-44.mp4\"><\/video><figcaption class=\"wp-element-caption\">CSS Transitions<\/figcaption><\/figure>\n\n\n\n<p>This demo shows support for CSS Animation.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1050\" style=\"aspect-ratio: 2554 \/ 1050;\" width=\"2554\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-45-1.mp4\"><\/video><figcaption class=\"wp-element-caption\">CSS Animation<\/figcaption><\/figure>\n\n\n\n<p>And also an&nbsp;example of&nbsp;how it&nbsp;is&nbsp;possible to&nbsp;animate each letter separately.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1050\" style=\"aspect-ratio: 2554 \/ 1050;\" width=\"2554\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-46.mp4\"><\/video><figcaption class=\"wp-element-caption\">Animation each letter separately<\/figcaption><\/figure>\n\n\n\n<p>You can read more about using variable fonts on&nbsp;the web in&nbsp;Richard Rutter\u2019s articles on&nbsp;Medium:<\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@clagnut\/get-started-with-variable-fonts-c055fd73ecd7\" target=\"_blank\" rel=\"noreferrer noopener\">Get started with variable fonts<\/a>&nbsp;\u2014 a&nbsp;quick but rich introduction. <br><a href=\"https:\/\/clearleft.com\/posts\/how-to-use-variable-fonts-in-the-real-world\" target=\"_blank\" rel=\"noreferrer noopener\">How to&nbsp;use variable fonts in&nbsp;the real world<\/a>&nbsp;\u2014 description of&nbsp;problems you may encounter and how to&nbsp;solve them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creative use examples <\/h2>\n\n\n\n<p>Let\u2019s have a&nbsp;look at&nbsp;creative examples&nbsp;\u2014 how you can use <a href=\"https:\/\/typetype.org\/fr\/fonts\/variable\/\">variable<\/a> fonts with a&nbsp;bit of&nbsp;imagination.<\/p>\n\n\n\n<p>Example of&nbsp;stretching the font depending on&nbsp;the size of&nbsp;the container.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 2012 \/ 1080;\" width=\"2012\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-21.mp4\"><\/video><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/vimeo.com\/303531520\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Example of&nbsp;interesting attempts to&nbsp;use variable fonts in&nbsp;AR.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-49.mp4\"><\/video><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/vimeo.com\/303531635\" target=\"_blank\" rel=\"noreferrer noopener\">Variable fonts in&nbsp;AR<\/a><\/figcaption><\/figure>\n\n\n\n<p>Example of&nbsp;how a&nbsp;font can change depending on&nbsp;the looking distance.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-50.mp4\"><\/video><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/vimeo.com\/178954414\" target=\"_blank\" rel=\"noreferrer noopener\">Distance Based Interpolation<\/a><\/figcaption><\/figure>\n\n\n\n<p>Example of&nbsp;adapting font saturation depending on&nbsp;reading conditions, lightning in&nbsp;this case.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-51.mp4\"><\/video><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/blog.prototypr.io\/an-exploration-of-variable-fonts-37f85a91a048\" target=\"_blank\" rel=\"noreferrer noopener\">Variable font in&nbsp;different reading conditions<\/a><\/figcaption><\/figure>\n\n\n\n<p>You can make a&nbsp;step further and create moving images from the font, as&nbsp;<a href=\"https:\/\/www.axis-praxis.org\/playground\/horse\/\" target=\"_blank\" rel=\"noreferrer noopener\">axis-praxis<\/a> suggest. You can even make them colorful by&nbsp;overlaying several letters, as&nbsp;you may see in&nbsp;<a href=\"https:\/\/www.axis-praxis.org\/playground\/horse\/\" target=\"_blank\" rel=\"noreferrer noopener\">Toshi Omagari<\/a>\u2019s experiments. But this&nbsp;is, of&nbsp;course, beyond the initial purposes of&nbsp;font use.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1440\" height=\"460\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/slajd-52-53.gif\" alt=\"\" class=\"wp-image-5902\"\/><figcaption class=\"wp-element-caption\">Moving images from the font<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Useful sources<\/h2>\n\n\n\n<p>We&nbsp;would like to&nbsp;suggest several resources where you can try working with <a href=\"https:\/\/typetype.org\/fr\/fonts\/variable\/\">variable<\/a> fonts.<\/p>\n\n\n\n<p>First, this is<a rel=\"noreferrer noopener\" href=\"https:\/\/www.axis-praxis.org\/specimens\/__DEFAULT__\" target=\"_blank\">&nbsp;axis-praxis.org<\/a> that has a&nbsp;large collection of&nbsp;variable fonts. You can also upload font you have there.<\/p>\n\n\n\n<p>Second, there is&nbsp;also<a rel=\"noreferrer noopener\" href=\"https:\/\/v-fonts.com\/\" target=\"_blank\"> v-fonts.com<\/a> where you can try different fonts in&nbsp;their simplified form.<\/p>\n\n\n\n<p>Finally, there\u2019s the great website that we&nbsp;actively use in&nbsp;our work to&nbsp;test variable fonts,<a rel=\"noreferrer noopener\" href=\"https:\/\/dinamodarkroom.com\/gauntlet\/\" target=\"_blank\"> dinamodarkroom.com<\/a> by&nbsp;Dinamo. There you can test not only variable axes, but opentype features as&nbsp;well, and upload static fonts with defined parameters.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instead of&nbsp;a&nbsp;conclusion<\/h2>\n\n\n\n<p><a href=\"https:\/\/typetype.org\/fr\/fonts\/variable\/\">Variable<\/a> fonts have the chance to&nbsp;become an&nbsp;integral part of&nbsp;the font world. In&nbsp;the last years, there was a&nbsp;lot of&nbsp;talk about them, but they have not become widespread yet. At&nbsp;present, they are instruments to&nbsp;solve an&nbsp;array of&nbsp;specific tasks. We&nbsp;also have to&nbsp;note that there appear increasingly more variable fonts. They will take over the world! It\u2019s only a&nbsp;question of&nbsp;time!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In\u00a0this article we\u00a0will tell you about variable fonts and what an\u00a0interesting and useful, yet underrated instrument they are. We\u00a0will also mention their disadvantages and nuances of\u00a0working with them.<\/p>\n","protected":false},"author":1,"featured_media":5860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[188],"class_list":["post-5859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-work-with-fonts"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/5859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/comments?post=5859"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/5859\/revisions"}],"predecessor-version":[{"id":52141,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/5859\/revisions\/52141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/media\/5860"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/media?parent=5859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/categories?post=5859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/tags?post=5859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}