4/26/2018 6:35 AM P4081 OpenType Variable Fonts: How to use fewer fonts and get a lot more typographic richness Peter Constable & Shrinath Shanbhag Windows Graphics Team © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Often taken for granted, but deserves attention Microsoft Build 2017 4/26/2018 6:35 AM Text is ubiquitous Often taken for granted, but deserves attention Good typography communicates © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Typeface family & design variation Family: common design features Within family: design-variation parameters — axes

Typeface family & design variation Family: common design features Within family: design-variation parameters — axes Weight:

Typeface family & design variation Family: common design features Within family: design-variation parameters — axes Weight & width:

Typeface family & design variation Family: common design features Within family: design-variation parameters — axes Other axes of design variation:

Typeface family & design variation Family: common design features Within family: design-variation parameters — axes Separate fonts

Bold #1 Bold #2 Regular Bold #3

Light Bold Semilight Bold Regular

Segoe UI Light Semilight Regular Semibold Bold https://docs.microsoft.com/en-us/windows/uwp/style/typography

Segoe UI

Microsoft JhengHei UI (Traditional Chinese)

Challenge: rich typography = many fonts Footprint on disk Download size # of assets

OpenType variable fonts

OpenType variable fonts OpenType version 1.8 Cross-industry initiative

What is an OpenType variable font? A single font that behaves like an entire family of fonts Variation on a design axis…

What is an OpenType variable font? A single font that behaves like an entire family of fonts Variation on a design axis… or on multiple design axes

What is an OpenType variable font? A single font that behaves like an entire family of fonts Variation on a design axis… or on multiple design axes

Named instances Extended Black Bold Regular Condensed Light Microsoft Build 2017 4/26/2018 6:35 AM Named instances Extended Black Bold Regular Condensed Light © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo One font, many instances File-size savings 4/26/2018 6:35 AM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

How variable fonts work Default outline + deltas

How variable fonts work Default outline + deltas

Demo Dynamic interpolation of glyph outlines Named instances © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Variable fonts in Windows 10 Creators Update Named instances supported in existing DirectWrite APIs Transparent to apps

Demo Enumerating named instances of a variable font 4/26/2018 6:35 AM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Microsoft Build 2017 4/26/2018 6:35 AM Custom font sets sample: https://github.com/Microsoft/Windows-classic-samples/tree/master/Samples/DirectWriteCustomFontSets © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Named instances in XAML 4/26/2018 6:35 AM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Beyond Windows 10 Creators Update New DirectWrite APIs Access any design — continuous variation

Benefits of OpenType variable fonts More design variants, smaller size New opportunities for good typography New APIs — coming soon!

Call to action Windows 10 Creators Update Search for example variable fonts on the Web Selawik Variations test: https://github.com/unicode-org/text-rendering-tests/tree/master/fonts Monotype Avenir Next Variable: https://github.com/Monotype/Monotype_prototype_variable_fonts

Call to action New DirectWrite APIs coming https://www.microsoft.com/en-us/software-download/windowsinsiderpreviewSDK Windows Insiders previews https://insider.windows.com/

Call to action OpenType spec — variable fonts overview https://www.microsoft.com/typography/otspec/otvaroverview.htm

4/26/2018 6:35 AM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.