These substitutions automatically switch at smaller sizes (18 pt and below), but can be toggled manually at larger optical sizes. “The Wonk axis controls the substitution of “wonky” characters. Along this axis, letterforms adjust in stroke curvature, contrast, and terminals to go from a sturdy, rational Linear to a friendly, energetic Casual.” – sign
“Recursive uses its Casual axis to offer a range of personality, allowing you to get just the right tone for any context. Here are two examples of recent typeface projects commissioned by Google Fonts to showcase what variable fonts can do:
Designers and developers have to discover how they work, so type designers may provide explanations about how more intricate axes are intended to be useful within typeface specimens.
Registration means axis settings are well-defined and commonly used in many different fonts, and their settings can be retained instead of discarded when switching between fonts. There are currently five registered axes in the Microsoft OpenType specification itself-weight, width, italic, slant, and optical size. Since there are millions of possible instances in any given variable font, font designers make things more manageable by providing preset “named instances,” that show up in the font menu for easy selection (even in apps like Word and TextEdit which don’t otherwise support variable fonts). When values are set on a variable font’s axes, they produce what is called an instance-a unique font which works just like an old-fashioned static font.
Want to take regular 70% towards bold and 30% towards condensed? No problem! A full spectrum of stylistic variationĮach kind of variation within a variable font is defined on an axis-essentially, a sliding scale with minimum, maximum, and default values. For example, a variable font that stores regular, bold, and condensed styles can also offer countless options between them. The more static fonts that are replaced, the more dramatic the savings become-even up to 70% compression for very large font families.Įven better, designers and developers can also access fonts located “in between” those static styles.
This is an immediate win in terms of raw file size, as it compactly packages the entire font family. One variable font file can contain every font in a traditional static font family. In late 2016, Microsoft, Apple, Adobe, and Google presented a remarkable solution: OpenType variable fonts.
Subsetting and the WOFF2 format can help by removing unused glyphs and applying font-specific compression, but limiting the number of web font styles is still a common issue for designers.įurthermore, if CSS layouts can adjust themselves so fluidly and precisely, why not the fonts too? A tiny bit bolder here, a touch wider there? Many type families today offer 30 or more font styles to help structure information, so it seems reasonable to use them-or even have browsers select the ideal fonts in response to device characteristics or user preferences. If the information hierarchy in a layout calls for multiple font weights and styles, developers might make decisions-like using smaller fonts, and fewer fonts-that compromise typography for the sake of page-loading time. Web developers measure every asset, including fonts, for their impact on latency. Responsive layouts adapt fluidly and intelligently to tiny mobile screens as well as giant desktop displays, and ever since web fonts arrived in 2010, font choice for browsers is about the same as it is for desktop apps. These days, developers use modern CSS to create websites that work consistently well on all browsers. Different computers had different fonts pre-installed so the same page would render inconsistently, and it was difficult to create web layouts that worked as well as print designs. Font choices were limited to those pre-installed on your computer, with styling options restricted to bold and italic. For its first 20 years, the web had a problem with typography.