[OTVar] Variable font support in Microsoft Edge
Rob McKaughan
Posts: 39
As of the latest Windows Insider builds, Microsoft Edge now has full support for variable fonts!
Specifically, it supports both the font-variation-settings and font-optical-sizing properties. The font-size, font-weight, and font-stretch properties are wired up to the appropriate variable axes too, reducing the CSS you have to update to switch to a variable font. (Side note: automatic optical size switching and the font-optical-sizing property also works with static font families that have opsz entries in the STAT table, as Sitka does).
Announcement: https://blogs.windows.com/msedgedev/2018/03/13/bringing-expressive-performant-typography-to-microsoft-edge-with-variable-fonts
Demo and details: https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
Specifically, it supports both the font-variation-settings and font-optical-sizing properties. The font-size, font-weight, and font-stretch properties are wired up to the appropriate variable axes too, reducing the CSS you have to update to switch to a variable font. (Side note: automatic optical size switching and the font-optical-sizing property also works with static font families that have opsz entries in the STAT table, as Sitka does).
Announcement: https://blogs.windows.com/msedgedev/2018/03/13/bringing-expressive-performant-typography-to-microsoft-edge-with-variable-fonts
Demo and details: https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
Tagged:
3
Comments
-
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/ is fantastic! Congratulations0
-
Rob,(Side note: automatic optical size switching and the font-optical-sizing property also works with static font families that have opsz entries in the STAT table, as Sitka does).
It would be great to have a short tutorial document explaining how to do this.0 -
It's very straightforward: Each static weight of Sitka has a STAT table that describes the ital axis (whether or not it is italic), wght axis (what usWeight Class it is), and the opsz range it supports, using a type2 record which supports min / max.
Here's the STAT table for Sitka Heading Italic:<STAT>
<Version value="0x00010001"/><DesignAxisRecordSize value="8"/><!-- DesignAxisCount=3 --><DesignAxisRecord><Axis index="0"><AxisTag value="ital"/><AxisNameID value="257"/><AxisOrdering value="2"/></Axis><Axis index="1"><AxisTag value="opsz"/><AxisNameID value="258"/><AxisOrdering value="0"/></Axis><Axis index="2"><AxisTag value="wght"/><AxisNameID value="256"/><AxisOrdering value="1"/></Axis></DesignAxisRecord><!-- AxisValueCount=3 --><AxisValueArray><AxisValue index="0" Format="1"><AxisIndex value="0"/><Flags value="0"/><ValueNameID value="260"/> <!-- Italic --><Value value="1.0"/></AxisValue><AxisValue index="1" Format="2"><AxisIndex value="1"/><Flags value="0"/><ValueNameID value="261"/> <!-- Heading --><NominalValue value="20.0"/><RangeMinValue value="18.5"/><RangeMaxValue value="23.5"/></AxisValue><AxisValue index="2" Format="1"><AxisIndex value="2"/><Flags value="2"/><ValueNameID value="259"/> <!-- Regular --><Value value="400.0"/></AxisValue></AxisValueArray><ElidedFallbackNameID value="2"/> <!-- Italic --></STAT>The RangeMin/MaxValues were identical to what we put in the OS/2 v5 table (I don't think anything uses the OS/2 table values). The NominalValue I chose somewhere in the middle of the range.2 -
Hmm... For some reason, all that XML is not getting formatted right in the message view, though it's right in the editor preview... Sorry about that.0
-
And, I should point out that being a static font, it has exactly one AxisValue record for each Axis. A variable font would have several per axis.1
Categories
- All Categories
- 43 Introductions
- 3.7K Typeface Design
- 801 Font Technology
- 1K Technique and Theory
- 618 Type Business
- 444 Type Design Critiques
- 542 Type Design Software
- 30 Punchcutting
- 136 Lettering and Calligraphy
- 83 Technique and Theory
- 53 Lettering Critiques
- 483 Typography
- 301 History of Typography
- 114 Education
- 68 Resources
- 498 Announcements
- 79 Events
- 105 Job Postings
- 148 Type Releases
- 165 Miscellaneous News
- 269 About TypeDrawers
- 53 TypeDrawers Announcements
- 116 Suggestions and Bug Reports