1. 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.

2. 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.

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

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

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

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

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

10. Bold #1
Bold #2
Regular
Bold #3

11. Light
Bold
Semilight
Bold
Regular

12. Segoe UI Light Semilight Regular Semibold Bold

13. Segoe UI

14. Microsoft JhengHei UI (Traditional Chinese)

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

16. OpenType variable fonts

17. OpenType variable fonts
OpenType version 1.8
Cross-industry initiative

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

19. 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

20. 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

21. 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.

22. 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.

23. How variable fonts work
Default outline + deltas

24. How variable fonts work
Default outline + deltas

25. 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.

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

27. 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.

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

29. 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.

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

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

34. Call to action Windows 10 Creators Update
Search for example variable fonts on the Web
Selawik Variations test:
Monotype Avenir Next Variable:

35. Call to action
New DirectWrite APIs coming
Windows Insiders previews

36. Call to action
OpenType spec — variable fonts overview

37. 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.