<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
        {font-family:"Angsana New";
        panose-1:2 2 6 3 5 4 5 2 3 4;}
@font-face
        {font-family:"Cordia New";
        panose-1:2 11 3 4 2 2 2 2 2 4;}
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0in;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:blue;
        text-decoration:underline;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-family:"Calibri",sans-serif;}
@page WordSection1
        {size:8.5in 11.0in;
        margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal">Great question, Adam<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I think there are alternate possibilities; here are two off the top of my head:<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">a) Based on the current font size, the picker UI highlights (in some way) those instances that match the size with the opsz axis. The user could still choose an instance that contravenes the opsz if they want, but they see which are “recommended”
 (given some assumptions about the eventual display environment).<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">b) There is an auto-opsz option somewhere. If disabled, then something like (a) can be offered as UX. But if enabled, then in the font picker UI the instances are folded so that there are only wght options offered. The subfamily strings
 displayed would either omit the opsz-distinguishing labels (e.g., “Light” but no “Display Light”), or perhaps the strings could show the opsz labels that are encompassed, e.g., “Light (Small/Text/Dislay)”.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I’m sure there are other possibilities.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Btw, one thing to point out: while independent controls for each axis might be workable for variable fonts, it can become really problematic for a family of static-instance fonts. (Back in 2008 or so, I started to design font controls for
 Windows 7 using this approach, but then realized it has bad UX issues.) <o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Suppose within a family there are 3 wght values represented, and 3 opsz values represented: if the family is fully populated with all 9 combinations, then the UI works. But if the matrix of possibilities is sparsely filled, then the UX
 becomes pretty bad: either the choices shown in one control change by the state of the other control, or else each control shows all options but a choice in one control can invisibly change the setting of the other control.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">For that ready, I would strongly caution against a UI design such as what you described in (3) in your message.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Peter<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal"><b>From:</b> mpeg-otspec <mpeg-otspec-bounces@lists.aau.at> <b>
On Behalf Of </b>Adam Twardoch<br>
<b>Sent:</b> Friday, August 21, 2020 7:58 AM<br>
<b>To:</b> MPEG OT Spec list (mpeg-otspec@lists.aau.at) <mpeg-otspec@lists.aau.at>; OpenType Font Variations list OTFontVar <otfontvar@unicode.org><br>
<b>Subject:</b> [MPEG-OTSPEC] STAT instances, fvar instances and auto optical sizing<o:p></o:p></p>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div>
<p class="MsoNormal">1. Let's say a font has the wght axis with the STAT instances "Light", "(Regular)" (elided) and "Bold". It again has the opsz axis with the STAT instances "Small", "(Text)" and "Display".<o:p></o:p></p>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">The fvar instances permute those, so: <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Shall Light<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Light<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- <span style="color:black">Display </span>Light<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Small<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Regular (from elided fallback)<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Display<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Small Bold<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Bold<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">- Display Bold<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><span style="color:black;border:none windowtext 1.0pt;padding:0in">2. Let’s say a desktop app implements behavior like CSS "font-optical-sizing: auto", i.e. the app automatically chooses an "opsz" value based on the font size (let’s disregard
 the question of specific units). </span><o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><span style="color:black;border:none windowtext 1.0pt;padding:0in">3. Let's say the app implements a STAT-based style selection UI, with one drop-down per STAT axis. In this model, it seems that the opsz drop-down, should list Small, Text,
 Display AND should have an extra entry "Auto" which makes it work like "font-optical-sizing: auto". Do you agree? I think that's reasonable enough. Then, if any of the other opsz entries are chosen, opsz would be frozen at the associated STAT value.</span><o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><span style="color:black;border:none windowtext 1.0pt;padding:0in">4. But what should be done in a model that lists fvar instances as styles? Every fvar instance IS tied to some opsz value. So would the recommended UX be that there is some
 kind of "checkbox" somewhere that basically says "Font size chooses optical size" or something, and THEN choosing the "Small" style vs. the "Display" style would have no visual effect? </span><o:p></o:p></p>
</div>
</div>
</div>
<div>
<div>
<div>
<p class="MsoNormal"><br clear="all">
<o:p></o:p></p>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<p class="MsoNormal">-- <o:p></o:p></p>
<div>
<div>
<div>
<p class="MsoNormal">Adam Twardoch<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><a href="https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.twardoch.com%2F&data=02%7C01%7C%7Cd8b0db5c25994d72a1d808d845e2a429%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637336187004385999&sdata=%2FyNtwwi6jcAr3wMnc4fN%2F6xFR9MQwBmYY3R5N2jslcg%3D&reserved=0" target="_blank">http://www.twardoch.com/</a><o:p></o:p></p>
</div>
</div>
</div>
</div>
</div>
<p class="MsoNormal" style="margin-bottom:12.0pt"><o:p> </o:p></p>
</div>
<p class="MsoNormal">-- <o:p></o:p></p>
<div>
<p class="MsoNormal">Adam Twardoch<o:p></o:p></p>
</div>
<p class="MsoNormal"><a href="https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.twardoch.com%2F&data=02%7C01%7C%7Cd8b0db5c25994d72a1d808d845e2a429%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637336187004395983&sdata=MM%2BrO2WPbV4HHi1m6RCtpLadLlQbltXFmYolJLBSBtQ%3D&reserved=0" target="_blank">http://www.twardoch.com/</a><o:p></o:p></p>
</div>
</body>
</html>