Vary Your Maps with Variable Fonts

Variable fonts are an exciting new(ish) type of font that enables users to customize variables of a font such as weight, width, slant, and even custom variations the font designer exposes. In this presentation, I’ll introduce variable fonts, how the OpenType font variation technology behind them works, the benefits of using them, and examples you can start with today. I’ll then show how they can be used in your cartographic workflow in mapping applications like ArcGIS Pro and graphic design applications like Adobe Illustrator and Inkscape.

Transcript

1. Vary Your Maps with Variable Fonts Craig Williams Esri https://speakerdeck.com/williamscraigm
2. Static fonts • Each glyph is a fixed design – a font glyph “outline” • Styles of a font family are new font files with independent geometry • Applications show fonts by family - style looks like a choice selection
3. What are variable fonts? • OpenType Font Variations – added to the OpenType 1.8 specification (2016) • Jointly developed by Microsoft, Google, Apple, and Adobe • .otf and .ttf OpenType fonts supported • Allow for a single font to have one or more axes of variation • Specific combinations of variations can be set as named instances • Benefits • Smaller sizes of fonts – one font for light to heavy font styles • Individual control
4. Axis examples • Standard registered axes • Weight <wight> • Width <wdth> • Optical size <opsz> • Italic <ital> • Slant <slnt> • Custom axes can be defined, short names must be ALL CAPS.
5. Example : Bahnschrift • Two axes • Weight • Width
6. Example: Source Serif Variable Static outline Variable outline Variable weight in action
7. File size examples: Noto Sans Font name Size NotoSansCanadianAboriginal-Black.ttf 151.7 kB NotoSansCanadianAboriginal-Bold.ttf 151.5 kB NotoSansCanadianAboriginal-ExtraBold.ttf 150.3 kB NotoSansCanadianAboriginal-ExtraLight.ttf 143.6 kB NotoSansCanadianAboriginal-Light.ttf 143.5 kB NotoSansCanadianAboriginal-Medium.ttf 154.7 kB NotoSansCanadianAboriginal-Regular.ttf 158.0 kB NotoSansCanadianAboriginal-SemiBold.ttf 152.7 kB NotoSansCanadianAboriginal-Thin.ttf 143.5 kB NotoSansCanadianAboriginal[wght].ttf 262.9 kB
8. Where to find variable fonts • Font libraries and font providers • Adobe Fonts • Google Fonts • Font foundries • https://v-fonts.com/ • Open source font collections etc. • Illustrator – pre-deployed with several “Variable Concept” fonts • MacOS – SF Pro and New York • Windows – Bahnschrift on Windows 10+ • MS Office – Look for new variable fonts with Office soon
9. Application support • Four main tiers of support 1. No formal support – legacy applications 2. Support for named instances 3. Support for just .ttf named instances and custom variations 4. Full support .ttf and .otf named instances and custom variations • List of applications: https://v-fonts.com/support • Output formats that lack support need applications to generate full font instances from variations: e.g., PDF
10. Variable fonts in ArcGIS Pro • Variable fonts supported since ArcGIS Pro 2.7 • Full support for .ttf and .otf font formats • Available with font controls on the ribbon, panes, and formatting tags • Variable fonts indicated with a small v on the icon
11. ArcGIS Pro UI example
12. Illustrator UI example
13. Inkscape UI example
14. Future • Expect more applications to support variable fonts over time • Foundries are transitioning to variable fonts • Projects to further improve these fonts are underway • Full Unicode range support • Size minimization • e.g. HarfBuzz boring expansion spec project
15. Thank you Slides available here: https://speakerdeck.com/williamscraigm
16. Explore variable fonts yourself https://v-fonts.com/