[OTVar] Variable font support in Microsoft Edge

Rob McKaughan

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/

Dave Crossland

https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/ is fantastic! Congratulations

John Hudson

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.

Rob McKaughan

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. 

Rob McKaughan

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.

Rob McKaughan

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.