Insights
A variable font is a new type of font that allows you to use multiple fonts in a single file. For example, a font family consisting of nine different weights can be used as one file, and you can customize the thickness finely between those nine weights as desired. In addition to weight, various styles can be set as axes, allowing you to use numerous individual fonts within a single file.
Technologies in various fields have been advancing at an astonishing pace recently. In particular, the field of computer science has seen significant developments, especially with artificial intelligence, to the extent that the mainstream trends have changed within just a few years. Fonts are an indispensable element when using computers, yet font technology has not received as much attention compared to other fields. Surely, there must be advancements in related technologies somewhere. To create better fonts and enhance usability, it is essential to understand the trends and development processes in font technology. At Sandoll Typelab, we aim to compile font technologies that benefit both font creators and users. For our first topic, we have prepared a two-part discussion on variable fonts.
「SD November」 VF
The Development Background and History of Variable Fonts
Static fonts, which are commonly used, have fixed weights and styles for each file. If a single font is composed of a superfamily with various weights and styles, the creator must produce all the weights and styles. Additionally, users have to purchase and install each font individually. This increases the burden on creators and the inconvenience for users as the family grows.
Such a font usage environment has also been a significant headache for companies that create operating systems and electronic devices. Issues like compatibility problems arising from font file extensions and limited usability in web typography environments also contributed to these challenges. To address and improve this usage environment, Google, Adobe, Microsoft, and Apple collaborated to announce a new font standard, OpenType 1.8. This announcement included a technology called 'OpenType Font Variations,' now known as variable fonts. Variable fonts garnered much attention upon their announcement and continue to be expected to break the limitations of traditional fonts and advance the font usage environment to the next level.
This technology was announced on September 14, 2016, at ATypI Warsaw by Monotype (link)
The Technology and Principles of Variable Fonts
How do variable fonts work? Variable fonts operate based on a calculation method called linear interpolation. Linear interpolation is a technique used to estimate the value of a point located between two endpoints by calculating linearly according to the straight-line distance. Let’s explain this more concretely using the example in the image below. Suppose we have points A, B, and C located on a straight line, with the distance between A and C as aaa, the distance between B and C as bbb, and the coordinates of A and B given. How can we estimate the coordinates of C? According to the theory of linear interpolation, we can calculate the rate of change in coordinates from A to B based on the total distance a+ba + ba+b and then estimate the coordinates of C by moving aaa units from A. Simple, right?
Extending Linear Interpolation from Points to Shapes. Let's extend linear interpolation from points to shapes. Since it is 'linear' interpolation, conceptually, we need something to act as the line connecting A and B, which we will call the axis. In the image below, rectangles A and B are connected by a single axis and have axis values of 0 and 100, respectively. To estimate rectangle C, which is located exactly in the middle (at 50) of the axis, we use linear interpolation. This means that rectangle C represents the shape of rectangle A exactly halfway through its transformation into rectangle B. Looking at the coordinates of each vertex, we can estimate the coordinates of vertex C1 as the midpoint of the transition from vertex A1 to vertex B1. By applying this principle, we can calculate the coordinates of all vertices of C to draw the shape of rectangle C.
Variable fonts utilize the concept of an axis, based on linear interpolation, to control not only the weight of the font but also its width, detail, style, slant, position, and more. An axis refers to a design element or attribute of the font that can be adjusted. In addition to the commonly known Weight axis, which determines the thickness of the characters, and the Width axis, which determines the width, designers can add axes to control various characteristics such as slant, center of gravity, design details, and other features according to their intentions. Multiple types of axes can be set in a single font, and the changes in font shape along these axes can be adjusted freely according to the designer's vision.
「 SD Minburi」 allows users to choose the spacing for Hangul and Latin characters using the KR Align and LT Align axes. (Scheduled for release in September)
So far, we've briefly explored the history and technology of variable fonts. After reading just part one, you might be wondering, "What exactly makes variable fonts so great?" To address this question, part two will delve into the advantages and disadvantages of variable fonts and showcase various use cases where variable fonts have been effectively utilized. We'll be back with more informative content, so stay tuned for part two.
Insights
Technologies in various fields have been advancing at an astonishing pace recently. In particular, the field of computer science has seen significant developments, especially with artificial intelligence, to the extent that the mainstream trends have changed within just a few years. Fonts are an indispensable element when using computers, yet font technology has not received as much attention compared to other fields. Surely, there must be advancements in related technologies somewhere. To create better fonts and enhance usability, it is essential to understand the trends and development processes in font technology. At Sandoll Typelab, we aim to compile font technologies that benefit both font creators and users. For our first topic, we have prepared a two-part discussion on variable fonts.
The Development Background and History of Variable Fonts
Static fonts, which are commonly used, have fixed weights and styles for each file. If a single font is composed of a superfamily with various weights and styles, the creator must produce all the weights and styles. Additionally, users have to purchase and install each font individually. This increases the burden on creators and the inconvenience for users as the family grows.
Such a font usage environment has also been a significant headache for companies that create operating systems and electronic devices. Issues like compatibility problems arising from font file extensions and limited usability in web typography environments also contributed to these challenges. To address and improve this usage environment, Google, Adobe, Microsoft, and Apple collaborated to announce a new font standard, OpenType 1.8. This announcement included a technology called 'OpenType Font Variations,' now known as variable fonts. Variable fonts garnered much attention upon their announcement and continue to be expected to break the limitations of traditional fonts and advance the font usage environment to the next level.
The Technology and Principles of Variable Fonts
How do variable fonts work? Variable fonts operate based on a calculation method called linear interpolation. Linear interpolation is a technique used to estimate the value of a point located between two endpoints by calculating linearly according to the straight-line distance. Let’s explain this more concretely using the example in the image below. Suppose we have points A, B, and C located on a straight line, with the distance between A and C as aaa, the distance between B and C as bbb, and the coordinates of A and B given. How can we estimate the coordinates of C? According to the theory of linear interpolation, we can calculate the rate of change in coordinates from A to B based on the total distance a+ba + ba+b and then estimate the coordinates of C by moving aaa units from A. Simple, right?
Extending Linear Interpolation from Points to Shapes. Let's extend linear interpolation from points to shapes. Since it is 'linear' interpolation, conceptually, we need something to act as the line connecting A and B, which we will call the axis. In the image below, rectangles A and B are connected by a single axis and have axis values of 0 and 100, respectively. To estimate rectangle C, which is located exactly in the middle (at 50) of the axis, we use linear interpolation. This means that rectangle C represents the shape of rectangle A exactly halfway through its transformation into rectangle B. Looking at the coordinates of each vertex, we can estimate the coordinates of vertex C1 as the midpoint of the transition from vertex A1 to vertex B1. By applying this principle, we can calculate the coordinates of all vertices of C to draw the shape of rectangle C.
Variable fonts utilize the concept of an axis, based on linear interpolation, to control not only the weight of the font but also its width, detail, style, slant, position, and more. An axis refers to a design element or attribute of the font that can be adjusted. In addition to the commonly known Weight axis, which determines the thickness of the characters, and the Width axis, which determines the width, designers can add axes to control various characteristics such as slant, center of gravity, design details, and other features according to their intentions. Multiple types of axes can be set in a single font, and the changes in font shape along these axes can be adjusted freely according to the designer's vision.
「 SD Minburi」 allows users to choose the spacing for Hangul and Latin characters using the KR Align and LT Align axes. (Scheduled for release in September)So far, we've briefly explored the history and technology of variable fonts. After reading just part one, you might be wondering, "What exactly makes variable fonts so great?" To address this question, part two will delve into the advantages and disadvantages of variable fonts and showcase various use cases where variable fonts have been effectively utilized. We'll be back with more informative content, so stay tuned for part two.