For its first 20 years, the web had a problem with typography. Font choices were limited to those pre-installed on your computer, with styling options restricted to bold and italic. 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. Compromises and hacks ruled.These days, developers use modern CSS to create websites that work consistently well on all browsers. 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. All good, right?Well, not quite. Web developers measure every asset, including fonts, for their impact on latency. 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. 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.Furthermore, 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.Hello, variable fontsIn late 2016, Microsoft, Apple, Adobe, and Google presented a remarkable solution: OpenType variable fonts.One variable font file can contain every font in a traditional static font family. This is an immediate win in terms of raw file size, as it compactly packages the entire font family. The more static fonts that are replaced, the more dramatic the savings become—even up to 70% compression for very large font families.Even better, designers and developers can also access fonts located “in between” those static styles. For example, a variable font that stores regular, bold, and condensed styles can also offer countless options between them. Want to take regular 70% towards bold and 30% towards condensed? No problem!A full spectrum of stylistic variation
Guide