web: update dynamic metrics

5 files changed, 64 insertions, 79 deletions

diff --git a/docs/dynmetrics/index.css b/docs/dynmetrics/index.css
index bf21139ce..f4328c6b2 100644
--- a/docs/dynmetrics/index.css
+++ b/docs/dynmetrics/index.css
@@ -119,15 +119,6 @@ formula.code {
   }
 
 
-.font-style-regular       { font-weight:400 !important; font-style:normal !important; }
-.font-style-italic        { font-weight:400 !important; font-style:italic !important; }
-.font-style-medium        { font-weight:500 !important; font-style:normal !important; }
-.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; }
-.font-style-bold          { font-weight:700 !important; font-style:normal !important; }
-.font-style-bold-italic   { font-weight:700 !important; font-style:italic !important; }
-.font-style-black         { font-weight:900 !important; font-style:normal !important; }
-.font-style-black-italic  { font-weight:900 !important; font-style:italic !important; }
-
 .row.with-sidebar {
   padding: 0;
 }
diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html
index 2ffa7c8b5..a5e91569b 100644
--- a/docs/dynmetrics/index.html
+++ b/docs/dynmetrics/index.html
@@ -89,8 +89,12 @@ endfor
         <option value="italic">Italic</option>
         <option value="medium" default>Medium</option>
         <option value="medium-italic">Medium Italic</option>
+        <option value="semi-bold" default>Extra Bold</option>
+        <option value="semi-bold-italic">Extra Bold Italic</option>
         <option value="bold" default>Bold</option>
         <option value="bold-italic">Bold Italic</option>
+        <option value="extra-bold" default>Extra Bold</option>
+        <option value="extra-bold-italic">Extra Bold Italic</option>
         <option value="black" default>Black</option>
         <option value="black-italic">Black Italic</option>
       </select>
@@ -183,62 +187,26 @@ function parseValues(s) {
 }
 
 setIdealValues({
-  // set-2018-02-20
-  6:    0.055,
-  7:    0.044,
-  8:    0.034,
-  9:    0.024,
-  10:   0.018,
-  11:   0.012,
-  12:   0.007,
-  13:   0.003,
-  14:   0.001,
-  15:  -0.002,
-  16:  -0.004,
-  17:  -0.006,
-  18:  -0.008,
-  20:  -0.01,
-  24:  -0.013,
+  // 2018-09-28
+  6:   0.054,
+  7:   0.042,
+  8:   0.033,
+  9:   0.025,
+  10:  0.018,
+  11:  0.012,
+  12:  0.008,
+  13:  0.004,
+  14:  0,
+  15: -0.002,
+  16: -0.005,
+  17: -0.007,
+  18: -0.008,
+  20: -0.011,
+  24: -0.014,
+  30: -0.016,
+  40: -0.017,
 })
 
-// setIdealValues({
-//   // set-2018-02-19
-//   6:    0.059,
-//   7:    0.043,
-//   8:    0.032,
-//   9:    0.022,
-//   10:   0.014,
-//   11:   0.009,
-//   12:   0.004,
-//   13:   0,
-//   14:  -0.003,
-//   15:  -0.005,
-//   16:  -0.0075,
-//   17:  -0.0084,
-//   18:  -0.0095,
-//   20:  -0.012,
-//   24:  -0.014,
-// })
-
-// setIdealValues({
-// // set-2018-02-18
-//   6:   0.06,
-//   7:   0.04,
-//   8:   0.03,
-//   9:   0.02,
-//   10:  0.01,
-//   11:  0.005,
-//   12:  0.002,
-//   13:  0.001,
-//   14:  0,
-//   15: -0.002,
-//   16: -0.005,
-//   17: -0.007,
-//   18: -0.009,
-//   20: -0.011,
-//   24: -0.011,
-// })
-
 
 // Variables for constants involved in Dynamic Metrics
 
@@ -246,7 +214,8 @@ setIdealValues({
 // var a = -0.013, b = 0.251, c = -0.222 // di=0.001742 on set-2018-02-18
 // var a = -0.015, b = 0.283, c = -0.23; // di=0.00221 on set-2018-02-18
 // var a = -0.0149, b = 0.298, c = -0.23; // di=0.000484 on set-2018-02-19
-var a = -0.016, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20
+// var a = -0.018, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20
+var a = -0.017, b = 0.202, c = -0.175; // di=0.000247 on 2018-09-28
 
 var l = 1.4
 
@@ -567,8 +536,12 @@ bindings.configure('style', null, null, function (style) {
   cl.remove('font-style-italic')
   cl.remove('font-style-medium')
   cl.remove('font-style-medium-italic')
+  cl.remove('font-style-semi-bold')
+  cl.remove('font-style-semi-bold-italic')
   cl.remove('font-style-bold')
   cl.remove('font-style-bold-italic')
+  cl.remove('font-style-extra-bold')
+  cl.remove('font-style-extra-bold-italic')
   cl.remove('font-style-black')
   cl.remove('font-style-black-italic')
   cl.add('font-style-' + style)
@@ -590,6 +563,20 @@ $('input[type="range"][data-binding="base-tracking"]').addEventListener(
   function(ev) { bindings.setValue('base-tracking', 0) }
 )
 
+;[
+  ['var-a',a],
+  ['var-b',b],
+  ['var-c',c],
+  ['var-l',l],
+  ['base-tracking', 0]
+].forEach(p => {
+  let bindname = p[0], defval = p[1]
+  $$('input[type="range"][data-binding="'+bindname+'"]').forEach(e => {
+    e.addEventListener('dblclick', ev =>
+      bindings.setValue(bindname, defval))
+  })
+})
+
 // allow editing of ideal values
 idealValuesTextArea.addEventListener('input', function(ev) {
   setIdealValues(parseValues(idealValuesTextArea.value))
diff --git a/docs/res/base.css b/docs/res/base.css
index 555bf4fa6..e4c5ec082 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -107,6 +107,11 @@ num { /* number */
   white-space: pre;
 }
 
+em, i, .italic {
+  font-style: italic;
+  font-variation-settings: 'ital' 100;
+}
+
 small {
   font-size: 11px;
   letter-spacing: 0.013em;
@@ -177,6 +182,20 @@ h1 > a, h2 > a, h3 > a {
   background: none;
 }
 
+/* font style classifiers used by samples and dynmetrics */
+.font-style-regular           { font-variation-settings: "wght" 400, "ital" 0   !important; font-weight:400 !important; font-style:normal !important; }
+.font-style-italic            { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; }
+.font-style-medium            { font-variation-settings: "wght" 500, "ital" 0   !important; font-weight:500 !important; font-style:normal !important; }
+.font-style-medium-italic     { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; }
+.font-style-semi-bold         { font-variation-settings: "wght" 600, "ital" 0   !important; font-weight:800 !important; font-style:normal !important; }
+.font-style-semi-bold-italic  { font-variation-settings: "wght" 600, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; }
+.font-style-bold              { font-variation-settings: "wght" 700, "ital" 0   !important; font-weight:700 !important; font-style:normal !important; }
+.font-style-bold-italic       { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; }
+.font-style-extra-bold        { font-variation-settings: "wght" 800, "ital" 0   !important; font-weight:800 !important; font-style:normal !important; }
+.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; }
+.font-style-black             { font-variation-settings: "wght" 900, "ital" 0   !important; font-weight:900 !important; font-style:normal !important; }
+.font-style-black-italic      { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; }
+
 .row {
   padding: 50px;
   display: flex;
diff --git a/docs/res/base.js b/docs/res/base.js
index 859b8d56f..0d4b12add 100644
--- a/docs/res/base.js
+++ b/docs/res/base.js
@@ -82,7 +82,8 @@ var HUDNotification = {
 //
 function InterUIDynamicTracking(fontSize) {
   // tracking = a + b * e ^ (c * fontSize)
-  return -0.016 + 0.21 * Math.pow(Math.E, -0.18 * fontSize)
+  var a = -0.017, b = 0.202, c = -0.175;
+  return a + b * Math.pow(Math.E, c * fontSize)
 }
 
 
diff --git a/docs/samples/index.css b/docs/samples/index.css
index 53b89b17c..2cd3f6556 100644
--- a/docs/samples/index.css
+++ b/docs/samples/index.css
@@ -31,7 +31,7 @@ livesample.s1 {
   padding-left: 16px;
   letter-spacing: -0.015em;
   font-size: 5em;
-  font-weight: 600;
+  font-weight: 700;
   line-height: 1.1;
   margin-top: 0;
   margin-bottom: 0.3em;
@@ -65,19 +65,6 @@ livesample.col2 {
   column-count: 2;
 }
 
-.font-style-regular           { font-variation-settings: "wght" 400, "ital" 0   !important; font-weight:400 !important; font-style:normal !important; }
-.font-style-italic            { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; }
-.font-style-medium            { font-variation-settings: "wght" 500, "ital" 0   !important; font-weight:500 !important; font-style:normal !important; }
-.font-style-medium-italic     { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; }
-.font-style-semi-bold         { font-variation-settings: "wght" 600, "ital" 0   !important; font-weight:800 !important; font-style:normal !important; }
-.font-style-semi-bold-italic  { font-variation-settings: "wght" 600, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; }
-.font-style-bold              { font-variation-settings: "wght" 700, "ital" 0   !important; font-weight:700 !important; font-style:normal !important; }
-.font-style-bold-italic       { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; }
-.font-style-extra-bold        { font-variation-settings: "wght" 800, "ital" 0   !important; font-weight:800 !important; font-style:normal !important; }
-.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; }
-.font-style-black             { font-variation-settings: "wght" 900, "ital" 0   !important; font-weight:900 !important; font-style:normal !important; }
-.font-style-black-italic      { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; }
-
 div.live {
   margin-top:1em;
   margin-bottom:100px;