[OTVar] Variable font support in Microsoft Edge

Rob McKaughan
Rob McKaughan Posts: 39
edited March 2018 in Font Technology
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/
Tagged:

Comments

  • John Hudson
    John Hudson Posts: 3,204
    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
    Rob McKaughan Posts: 39
    edited March 2018
    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. 
  • 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.
  • 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.