This article comes from WeChat public account “Founder font” (ID: foundertype), author Tang Ting, article slightly There is a deletion, and Ai Faner is authorized to publish.
On the afternoon of September 24, 2019, Xiaomi launched the new MIUI 11 system, and the small Milan Pavilion Pro and dynamic font system were officially released.
In the MIUI 11 system, the user can enter the font module by the operation of “Setting – Display – Font Size and Weight”, and drag the corresponding slider to change the font size and weight of the word used in the mobile interface. MIUI dynamic fonts support textless stepless adjustments, and everyone can find the right weight for themselves.
Smart Bold also thickens the text according to the content level and importance.The reading experience is even more extreme.
The MIUI 11 equipped with a dynamic font system has also been optimized and improved in terms of interaction details.
*The above videos and photo material are from the official release of Xiaomi, and the copyright belongs to the original author. Span>
About variable fonts, many designers and friends have heard about it, but the practical application in the Chinese field is still very limited. Next, this article will discuss “variable fonts” in detail with everyone.
What is a variable font?
Variable Fonts technology is derived from the OpenType v1.8 font format specification released by Adobe, Apple, Google, and Microsoft in 2016. The release of the specification will allow a single font file to support multiple font morphologies at the same time. It can compact several fonts in a single font file and define a single-axis or multi-axis design space by defining changes within the font.
The current mainstream operating systems, browsers, and design software mostly support variable fonts to varying degrees. The most well-known image editing software in the design world, Photoshop CC 2018, Illustrator CC 2018 also supports this technology, designers can use these two design software to call preview using variable fonts.
Advantages of Variable Fonts
Unprecedented degrees of freedom
Founder Lanting Black series font is the most abundant family font of Founder Company. It supports 10 words and adds flat characters and long characters. In other words, Founder Lanting Black provides 10 variations in the word dimension, which is provided in the word width dimension. Two changes, providing two variations in the word height dimension, for a total of 14 changes. When the designer uses the Lanting black series font, there is still a situation where the existing word weight can not meet the layout level requirement. The stroke is too fine, and the next level of gray is too heavy.
▲ Founder Lanting Black Family font, support 10 word size dimension, 2 word width dimension, 2 word height dimension change
The existence of a variable font can solve this problem well. Variable fonts include single-axis or multi-axis design space. By adjusting the available axes to control the precise word weight, word width, word height, and mid-joint, the smooth and fine adjustment of the glyphs is realized. Designers can easily get custom glyphs that meet the needs of different layout designs.
▲ Multi-axis infinite changes in variable fonts allow fonts to have more free space to change
For example, in the operation of Illustrator CC 2018, you can find the Founder Black variable font in the font library list. When we open the character panel through the window-text-character operation When you find out that there is a variable font button on the right side of the character style, a variable movement slider for variable fonts is provided under this button. Among them, the Founder Black variable font has three axes of the word weight axis, the word width axis and the word height axis, and the corresponding adjustment sliders are Weight, Width, Height. By sliding these adjustment sliders, you can change the individual fonts in different dimensions, which are special properties that are not available in common standard fonts.
▲ Founder Black three-axis variable font in the design software Illustrator CC 2018 variable operation interface, the user clicks the variable font button, you can see the square axis of the word, the word width axis and the word High-axis three variable axes, adjust the slider to get the font style to meet the needs
Small and large energy
For the conventional standard fonts, the current popular family series fonts are combined in the form of Thin, Light, Regular, SemiBold, Bold, and Heavy, which are 6 words in weight and exist in 6 separate fonts. The files are organized according to the GB18030-2000 standard. The font file size is more than 8MB, and the 6 font files are close to 50MB.
However, a variable font that supports word-to-axis changes can provide 800 words in a single font file, conforming to the GB18030-2000 encoding standard, and has a file size of about 20MB. In smallerA greater change has been achieved within the space.
▲ Variable fonts not only have much more room to change than regular family fonts, but their file size is much smaller than the file size of family fonts
Apps for variable fonts
Webfont+Variable Fonts
Webfont technology has many advantages: it can apply high-quality fonts on web pages to provide the ultimate reading experience; the text on the webpage is easy to modify and edit; supports search, selection, copying, etc., supports tool translation; Need to convert to image restrictions, restore text information from images to fonts, be more friendly to search engines, and improve keyword search rankings.
▲The New York Times official website in English has embedded several family fonts into the website in the form of Webfont. The New York Times Cheltenham family font is mainly used for the title content display, and the New York Times Franklin family font is Used for annotations, menu labels, etc., while satisfying the logical hierarchy of the layout, and making different themes have different styles and effects
▲ The Guardian, one of the UK’s three major newspapers, uses a huge family font, Guardian, which is made up of a number of authentic custom fonts. Strive to create more blanks on each page without reducing the number of words for easier and more comfortable reading
What would be a surprise if you put Webfont technology on a variable font? First of all, the infinite change of variable fonts can provide different styles and effects of font style for multi-level information typesetting. Variable fonts will bring more free design space to the page, and readers can experience a smoother reading environment at the same time. Second, because the file size of variable fonts is significantly compressed compared to family fonts, smaller font file sizes mean fewer server-specific times, lower bandwidth requirements, and page load times are significantly shorter.
▲ Webfont is equipped with a variable font application demo page. When the variable font embedded in the web is activated, the webpage will automatically adjust the font style according to the information level and layout effect, making it more in line with the user’s browsing habits. OLIVER SCHÖNDORFER development and production
Page Adaptation
Different display devices have different horizontal and vertical screen ratios, screen resolutions, and match different viewing distances. We can’t predict how big a user will open a web page and what resolution, page adaptation becomes a web designer, front-end development projectThe problem that the teacher needs to solve, therefore, the responsive web design that can automatically respond to the user equipment environment becomes a trend. The use of variable fonts is just a convenience for glyph-level changes in responsive web pages, using visual zoom to enhance display output at different screen sizes.
▲ Responsive web design with variable fonts, as the text area changes, the font size, word weight, word width, and character spacing of individual characters are adjusted accordingly
Reading mode
With the emphasis on user experience, the personalized exploration of system reading patterns has received more and more attention. Apple introduced dark mode in macOS Mojave and the latest iOS 13 system. Dark mode uses a deeper color scheme. Apple users choose this mode in system preferences, and the entire system, including the Mac, comes with The application, as well as the appearance of third-party applications, will be globally switched to a dark background to help users focus on the system.
▲ The macOS Mojave system has a built-in dark mode, allowing users to switch between depth and mode according to their usage habits
▲ A mobile device equipped with a light sensor that automatically adjusts screen brightness and contrast according to the light and darkness of the light
If you embed a variable font into your system, you can respond appropriately in both cases, and improve the legibility of the page text by fine-tuning the glyphs. .
Founder font Chinese variable font
Because of the huge difference between Chinese fonts and Western fonts, the Chinese character library has a large character set and complex fonts, making it more difficult to implement fonts without variable polarity. As a leader in Chinese font design, Founder Font Library is based on rich experience in font design and explores Chinese variable font design through technological innovation.
Founder Black Variable Font
In November 2017, the Founder Library released the world’s first Chinese three-axis variable font – Founder Yau black ” (click on the blue word reading ), this variable font realizes the changes of the weight axis, the width of the word (Width) and the height of the word (Height). In the future, consider adding other axes, such as the center of gravity, the center, and the thickness of the stroke. Wait.
The squared black variable font requires at least two glyph data for each axis, providing specific changes between different extremes of the font design; it also allows intermediate file data to be added to each axis, increasing the entire glyph set. Or the possibility of an intermediate design of a single glyph to provide finer control over font fit changes as the design space changes.
Founder Yu Song Variable Font
With the widespread use of mobile devices, Founder fonts in early 2018 released the world’s first on-screen Song – “ Founder leisurely Song ” (click to read in blue). As a digital font using the latest technology, Founder Song is also a variable font with the fontless change characteristics.
Founder Yu Song variable font supports the change of the word weight and the dimension of the Zhonggong. The designer can finely adjust the font in terms of font thickness and literal width. The weight of the word and the infinitely variable nature of the Zhonggong make Founder Song can meet the visual needs of different media scenarios, increasing the visual recognition of the Song Dynasty and the plasticity level of the information hierarchy. The attempt of the Founder Font Library to transform the Song Dynasty characters into black characters also creates new possibilities for the changing dimensions of Chinese variable fonts.
▲ Fang Zhengyou Song variable font has realized the change of word dimension in the actual font product
▲ Fang Zhengyou’s Zhonggong variable, and the experimental attempt by Fang Zhengyou Song to become Founder’s black, opened up a new dimension of Chinese variable fonts
Conclusion
With the reform and innovation of technology, font design has entered a new era of openness that can be changed without restrictions. The appearance of variable fonts allows the font to be arbitrarily enlarged, reduced, bolded, thinned, stretched or bent within a predetermined range.It is possible to make a font that you can adjust to the scale and size you want.
With the combination of variable font technology and different scenarios, users can choose the font combination that best suits their needs. Ultimately, users, designers, and font makers will benefit from the widespread adoption of this technology.
Technical Guide 丨Chen Chen
Image Design 丨Ting Ting, Yi Ming, Xiao Mei