website

2024-09-17 13:47:11 +03:00 · 2019-02-06 11:49:18 -08:00 · 2019-02-06 11:49:18 -08:00 · 65ce56b952
commit 65ce56b952
parent 33aca18922
14 changed files with 509 additions and 313 deletions
--- a/docs/_data/feature_samples.yml
+++ b/docs/_data/feature_samples.yml
@ -0,0 +1,126 @@
+- title: Contextual alternates
+  tag:   calt
+  description:
+    This feature is enabled by default and causes certain characters to adjust
+    themselves or be replaced depending on the surrounding context.
+  footer:
+    There are many more contextual alternates.
+  samples:
+    - "12›:‹34, FE›—‹X"
+    - "4›.‹2"
+    - "›(‹SEMI›)‹PERMANENT"
+    - "SFO ›->‹ STO"
+    - "IIA ›—>‹ OGG"
+    - "ARN ›<-->‹ OGG"
+    - "M›@‹N m@n"
+    - "Smile ›:-)‹"
+
+- title: Tabular numbers
+  tag:   tnum
+  description:
+    Fixed-width numbers are useful for tabular data, where comparing
+    columns across rows is desired.
+  samples:
+    - "1234567890"
+    - "1131711›&nbsp;‹"
+    - "0040900›&nbsp;‹"
+    - "11:31,711›&nbsp;‹"
+    - "00:40.900›&nbsp;‹"
+    - "0.45, 0.91, +0.08›&nbsp;‹"
+    - "1.00, 9.44, −0.13›&nbsp;‹"
+    - "0.00, 1.13, ~7.12›&nbsp;‹"
+
+- title: Numerators
+  tag:   numr
+  samples:
+    - "Hello ›0123‹"
+
+- title: Denominators
+  tag:   dnom
+  samples:
+    - "Hello ›0123‹"
+
+- title: Superscript
+  tag:   sups
+  samples:
+    - "X›0123 (+)-[=]‹"
+    - "X›abcdefghijklmnopqrstuvwxyz‹"
+
+- title: Subscript
+  tag:   subs
+  samples:
+    - "H›0123 (+)-[=]‹"
+    - "X›abcdefghijklmnopqrstuvwxyz‹"
+
+- title: Fractions
+  tag:   frac
+  description:
+    This feature is contextually sensitive and will convert "words" of
+    numbers separated by forward slash into proper fractions.
+    This feature is dynamic and allows for any fractions.
+    Note that the digits used for fractions are custom-made for their
+    small size, and are even made separately from the slightly larger
+    Superscript and Subscript numbers.
+  samples:
+    - "›1/3‹&nbsp; ›3/4‹&nbsp; ›1/5‹&nbsp; ›1337/5910‹"
+
+- title: Case alternates
+  tag:   case
+  description:
+    Switches out some glyphs to work better with capital letters and numbers.
+  samples:
+    - "›(‹Hello›)‹ ›[‹World›]‹ ›{‹9000›}‹"
+    - "SCHOOL ›@‹ RUN"
+    - "3 ›+‹ 9 ›=‹ 12 ›*‹ 1"
+    - "›*+÷±×=≠≈•~&lt;&gt;≤≥‹"
+    - "›→‹ ›←‹ ›⟶‹ ›⟵‹ ›−‹ ›-‹ ›–‹ ›—‹ ›:‹"
+
+- title: "Stylistic set 1: Alternate digits"
+  tag:   ss01
+  description:
+    An alternate style of digits.
+    Note that individual digit styles can be cherry-picked using the cvXX
+    features.
+  samples:
+    - "›1‹2›34‹5›6‹78›9‹0"
+    - "›13469‹"
+
+- title: "Stylistic set 2: Disambiguation"
+  tag:   ss02
+  description:
+    Alternate glyph set that increases visual difference between
+    similar-looking characters.
+  samples:
+    - "WP›0‹ACO9XS›I‹1›0‹12O9"
+    - "›Ill‹ega›l‹"
+    - "βeta ›ß‹eta Busine›ß‹"
+
+- title: Discretionary ligatures
+  tag:   dlig
+  description:
+    Alternate glyph set that increases visual difference between
+    similar-looking characters.
+  samples:
+    - "›¡¿‹What›?!‹"
+    - "›¿¡‹What›!?‹"
+
+- title: Slashed zero
+  tag:   zero
+  samples:
+    - "O›0‹123"
+
+- title: Character variants
+  tag: cvXX
+  description: "Allows cherry-picking alternate characters."
+  samples:
+    - {feat: cv01, alt: "Alternate one", sample: "1"}
+    - {feat: cv02, alt: "Open four", sample: "4"}
+    - {feat: cv03, alt: "Open six", sample: "6"}
+    - {feat: cv04, alt: "Open nine", sample: "9"}
+    - {feat: cv05, alt: "Lower case L with tail", sample: "l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ"}
+    - {feat: cv06, alt: "Lower case R with straight tail", sample: "r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ"}
+    - {feat: cv07, alt: "Alternate German double-s", sample: "ß"}
+    - {feat: cv08, alt: "Upper-case i with serif", sample: "I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ"}
+    - {feat: cv09, alt: "Flat top three", sample: "3"}
+    - {feat: cv10, alt: "Capital G with spur", sample: "G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ"}
+
--- a/docs/_includes/ctxedit.html
+++ b/docs/_includes/ctxedit.html
@ -1,9 +1,8 @@
 {%

-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
+if site.safe == false %}{%
+assign url_root = "/" %}{% else %}{%
+assign url_root = "/inter/" %}{% endif %}{%

 for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
--- a/docs/_includes/preload-font-files.html
+++ b/docs/_includes/preload-font-files.html
@ -1,9 +1,8 @@
 {%

-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
+if site.safe == false %}{%
+assign url_root = "/" %}{% else %}{%
+assign url_root = "/inter/" %}{% endif %}{%

 for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -2,14 +2,11 @@
 assign build_version = site.time | date: "%Y%m%d%H%M%S" %}{%
 assign description = "Inter is a typeface optimized for computer-user interfaces" %}{%

-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
+if site.safe == false %}{%
+assign url_root = "/" %}{% else %}{%
+assign url_root = "/inter/" %}{% endif %}{%

-capture release_version
-  %}{{ site.data.fontinfo[0].version }}{%
-endcapture %}{%
+assign release_version = site.data.fontinfo[0].version %}{%

 capture download_url
  %}https://github.com/rsms/inter/releases/download/v{{ release_version }}/Inter-{{ release_version }}.zip{%
--- a/docs/dynmetrics/icons/letter-spacing.svg
+++ b/docs/dynmetrics/icons/letter-spacing.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#000"/></svg>
--- a/docs/dynmetrics/icons/line-height.svg
+++ b/docs/dynmetrics/icons/line-height.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.297 12l.762-2.14h3.32L10.14 12h1.015L8.22 4h-1l-2.94 8h1.016zm1.066-3l1.324-3.734h.063L9.074 9h-2.71z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H1V1h14v1zm0 13H1v-1h14v1z" fill="#000"/></svg>
--- a/docs/dynmetrics/icons/style.svg
+++ b/docs/dynmetrics/icons/style.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3h1v10H0zm3 0V3h2v10H3zm4 0V3h3v10H7zm5 0V3h4v10h-4z" fill="#000"/></svg>
--- a/docs/dynmetrics/index.html
+++ b/docs/dynmetrics/index.html
@ -4,10 +4,9 @@ title: Dynamic Metrics
 ---
 {%

-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
+if site.safe == false %}{%
+assign url_root = "/" %}{% else %}{%
+assign url_root = "/inter/" %}{% endif %}{%

 for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
@ -41,13 +40,13 @@ endfor
      <const>a</const> + <const>b</const> ×
      <const title="Base of natural logarithm; ≈2.718">e</const><sup>(<const>c</const> × <const>z</const>)</sup>
    </formula>
-    <formula>
+    <!--formula>
      line height = <num data-binding="var-l">1.4</num> × <const>z</const>
-    </formula>
+    </formula-->
    <formula title="Values for Inter">
-      <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.02</num></g> &nbsp;&nbsp;
-      <g><const title="Constant b">b</const> = <num data-binding="var-b">0.205</num></g> &nbsp;&nbsp;
-      <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.175</num></g> &nbsp;&nbsp;
+      <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.038</num></g> &nbsp;&nbsp;
+      <g><const title="Constant b">b</const> = <num data-binding="var-b">0.161</num></g> &nbsp;&nbsp;
+      <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.12</num></g> &nbsp;&nbsp;
      <g><const>z</const> = font size</g>
    </formula>
  </p>
@ -76,14 +75,9 @@ endfor
  </div>

  <div class="sidebar controls">
+    
    <div class="control">
-      <label title="Number of ideal matches">ni</label>
-      <input title="Number of ideal matches" type="number" readonly data-binding="ideal-count">
-      <label title="Distance from ideal">di</label>
-      <input title="Distance from ideal" type="number" class="wide" readonly data-binding="ideal-distance">
-    </div>
-    <div class="control">
-      <img title="Style" class="icon" src="../samples/icons/style.svg">
+      <img title="Style" class="icon" src="icons/style.svg">
      <select data-binding="style">
        <option value="thin">Thin (BETA)</option>
        <option value="thin-italic">Thin Italic (BETA)</option>
@ -107,11 +101,18 @@ endfor
      </select>
    </div>
    <div class="control">
-      <img title="Base tracking" class="icon" src="../samples/icons/letter-spacing.svg">
+      <img title="Base tracking" class="icon" src="icons/letter-spacing.svg">
      <input type="range" min="-0.05" max="0.06" step="0.001" data-binding="base-tracking">
      <input type="number" min="-0.15" max="1" step="0.001" data-binding="base-tracking">
    </div>
+    <div class="control">
+      <img title="Line height" class="icon" src="icons/line-height.svg">
+      <input type="range" min="1" max="2" step="0.01" data-binding="var-l">
+      <input type="number" min="1" max="2" step="0.01" data-binding="var-l">
+    </div>
+
    <hr>
+
    <div class="control">
      <label title="Constant a">a</label>
      <input type="range" min="-0.05" max="0" step="0.001" data-binding="var-a">
@ -127,15 +128,20 @@ endfor
      <input type="range" min="-1" max="0" step="0.01" data-binding="var-c">
      <input type="number" min="-1" max="0" step="0.001" data-binding="var-c">
    </div>
-    <hr>
-    <div class="control">
-      <label title="Constant l controls line height">l</label>
-      <input type="range" min="1" max="2" step="0.1" data-binding="var-l">
-      <input type="number" min="1" max="2" step="0.1" data-binding="var-l">
-    </div>
-    <hr class="without-bottom-margin">
-    <canvas class="graphplot">Canvas not Supported</canvas>
    
+    <hr>
+    
+    <div class="control">
+      <label title="Number of ideal matches">ni</label>
+      <input title="Number of ideal matches" type="number" readonly data-binding="ideal-count">
+      <label title="Distance from ideal">di</label>
+      <input title="Distance from ideal" type="number" class="wide" readonly data-binding="ideal-distance">
+    </div>
+
+    <hr class="without-bottom-margin">
+
+    <canvas class="graphplot">Canvas not Supported</canvas>
+
    <hr class="when-selection without-top-margin">
    <h3 class="when-selection">CSS</h3>
    <textarea class="when-selection" readonly id="code-output"></textarea>
@ -194,24 +200,65 @@ function parseValues(s) {
 }

 setIdealValues({
-  6:   0.021,
-  7:   0.017,
-  8:   0.013,
-  9:   0.01,
-  10:  0.007,
-  11:  0.005,
-  12:  0.002,
-  13:  0,
-  14: -0.002,
-  15: -0.004,
-  16: -0.005,
-  17: -0.007,
-  18: -0.008,
-  20: -0.01,
-  24: -0.013,
-  30: -0.016,
-  40: -0.02,
-  80: -0.02,
+  // // 2018
+  // 6:   0.021,
+  // 7:   0.017,
+  // 8:   0.013,
+  // 9:   0.01,
+  // 10:  0.007,
+  // 11:  0.005,
+  // 12:  0.002,
+  // 13:  0,
+  // 14: -0.002,
+  // 15: -0.004,
+  // 16: -0.005,
+  // 17: -0.007,
+  // 18: -0.008,
+  // 20: -0.01,
+  // 24: -0.013,
+  // 30: -0.016,
+  // 40: -0.02,
+  // 80: -0.02,
+
+  // 2019-02-02
+  // 6:    0.066,
+  // 7:    0.05,
+  // 8:    0.036,
+  // 9:    0.025,
+  // 10:   0.015,
+  // 11:   0.007,
+  // 12:   0,
+  // 13:  -0.005,
+  // 14:  -0.01,
+  // 15:  -0.014,
+  // 16:  -0.017,
+  // 17:  -0.02,
+  // 18:  -0.022,
+  // 20:  -0.026,
+  // 24:  -0.03,
+  // 30:  -0.033,
+  // 40:  -0.034,
+  // 80:  -0.034,
+
+  // 2019-02-06
+  6:    0.04,
+  7:    0.032,
+  8:    0.024,
+  9:    0.017,
+  10:   0.01,
+  11:   0.005,
+  12:   0,
+  13:  -0.004,
+  14:  -0.008,
+  15:  -0.011,
+  16:  -0.014,
+  17:  -0.017,
+  18:  -0.019,
+  20:  -0.023,
+  24:  -0.029,
+  30:  -0.034,
+  40:  -0.037,
+  80:  -0.038,
 })


@ -223,7 +270,8 @@ setIdealValues({
 // var a = -0.0149, b = 0.298, c = -0.23; // di=0.000484 on set-2018-02-19
 // 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; // 2018-09-28
-var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02
+// var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02
+var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06


 var l = 1.4
--- a/docs/glyphs/index.html
+++ b/docs/glyphs/index.html
@ -4,10 +4,9 @@ title: Glyphs
 ---
 {%

-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
+if site.safe == false %}{%
+assign url_root = "/" %}{% else %}{%
+assign url_root = "/inter/" %}{% endif %}{%

 for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
--- a/docs/index.css
+++ b/docs/index.css
@ -101,9 +101,7 @@ tablex in, tablex to, tablex out {
  white-space: pre;
  padding-bottom:0.5em;
 }
-/*tablex to {
-  width:0;
-}*/
+
 tablex to::after {
  -moz-font-feature-settings: 'calt' 1, 'case' 1;
  -ms-font-feature-settings: 'calt' 1, 'case' 1;
@ -297,3 +295,14 @@ tablex out.cv10 {
 boxes.features box h3 + p {
  margin-top:0.5em;
 }
+
+boxes.features grid .sample {
+  word-break: break-word;
+  word-wrap: break-word;
+}
+
+boxes.features grid .sample em {
+  font-style: inherit;
+  background: #e4fdef;
+  color: black;
+}
--- a/docs/index.html
+++ b/docs/index.html
@ -3,11 +3,6 @@ layout: default
 ---
 {%

-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
-
 for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
  if _path == "/index.css" %}{%
@ -69,10 +64,10 @@ html { font-family: 'Inter', sans-serif; }

  <p>&nbsp;</p>

-  <h2 id="dynamic-metrics"><a href="{{url_root}}dynmetrics/">Dynamic Metrics</a></h2>
+  <h2 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h2>
  <p class="dynmet-calc">
    Size
-    <input id="dynmet-font-size" type="number" value="12"
+    <input id="dynmet-font-size" type="number" value="16"
    ><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span>
    <span class="arrow">=</span>
    <span title='letter-spacing in CSS; also called "tracking" in some software.'>spacing
@ -83,7 +78,7 @@ html { font-family: 'Inter', sans-serif; }
    There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter <em>Dynamic Metrics</em> provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.
  </p>
  <p>
-    <a href="{{url_root}}dynmetrics/">Learn more…</a>
+    <a href="dynmetrics/">Learn more…</a>
  </p>

  <p>&nbsp;</p>
@ -175,7 +170,7 @@ html { font-family: 'Inter', sans-serif; }



-<div class="row"><div>
+<div class="row features"><div>
  <h2><a id="features" href="#features">Features</a></h2>
  <p>
    Inter comes with many OpenType features that can be used to
@ -184,211 +179,82 @@ html { font-family: 'Inter', sans-serif; }
    alternative variations.
  </p>
  <boxes class="features">
+    {% for f in site.data.feature_samples %}
    <box>
-      <h3>Contextual alternates <q title='OpenType feature ID'>calt</q></h3>
-      <p>
-        This feature is enabled by default and causes certain characters to
-        adjust themselves or be replaced depending on the surrounding context.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>12<em>:</em>34,  FE<em>—</em>X</in><to></to><out>12:34,  FE—X</out></r>
-        <r><in>4<em>.</em>2</in><to></to><out>4.2</out></r>
-        <r><in><em>(</em>SEMI<em>)</em>PERMANENT</in><to></to><out>(SEMI)PERMANENT</out></r>
-        <r><in>SFO <em>-></em> STO</in><to></to><out>SFO -> STO</out></r>
-        <r><in>IIA <em>—></em> OGG</in><to></to><out>IIA —> OGG</out></r>
-        <r><in>ARN <em><--></em> OGG</in><to></to><out>ARN <--> OGG</out></r>
-        <r><in>M<em>@</em>N m@n</in><to></to><out>M@N m@n</out></r>
-        <r><in>Smile <em>:-)</em></in><to></to><out>Smile :-)</out></r>
-      </t></tablex>
-      <p>
-        There are many more contextual alternates.
+      <h3>{{f.title}} <q title='OpenType feature ID'>{{f.tag}}</q></h3>
+      {%
+
+      if f.description %}
+        <p>{{f.description}}</p>
+      {% endif %}{%
+
+      assign feat_tag = f.tag %}{%
+      assign has_feature_col = false %}{%
+      for s in f.samples %}{%
+        if s.feat %}{%
+          assign has_feature_col = true %}{%
+          break %}{%
+        endif %}{%
+      endfor
+
+      %}
+      {% if has_feature_col %}
+      <grid class="c8">
+        <c span="1" class="low-contrast ">Feature</c>
+        <c span="3" class="low-contrast">Disabled</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="3" class="low-contrast">Enabled</c>
+      {% else %}
+      <grid class="c9">
+        <c span="4" class="low-contrast">Disabled</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="4" class="low-contrast">Enabled</c>
+      {% endif %}
+      {% for s in f.samples %}
+        {%
+
+        if has_feature_col %}{%
+          assign sample = s.sample %}{%
+          assign feat_tag = s.feat %}{%
+        else %}{%
+          assign sample = s %}{%
+        endif %}{%
+
+        assign sample_in = sample | replace: "›", "<em>" | replace: "‹", "</em>" %}{%
+        assign sample_out = sample | remove: "›" | remove: "‹"
+
+        %} {% if has_feature_col %}
+        <c span="1" class="">{{feat_tag}}</c>
+        <c span="3" class="sample ff-none">{{sample_in}}</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="3" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
+        {% else %}
+        <c span="4" class="sample ff-none">{{sample_in}}</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="4" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
+        {% endif %}
+      {% endfor %}
+      </grid>
+      <p class="example" title="CSS code">
+        <tt>font-feature-settings: '{{feat_tag}}' 1</tt>
      </p>
+      {% if f.footer %}
+        <p>{{f.footer}}</p>
+      {% endif %}
    </box>
-
-    <box>
-      <h3>Tabular numbers <q title='OpenType feature ID'>tnum</q></h3>
-      <p>
-        Fixed-width numbers are useful for tabular data, where comparing
-        columns across rows is desired.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>1234567890</in><to></to><out class="tnum">1234567890</out></r>
-        <r><in>1131711<em>&nbsp;</em></in><to></to><out class="tnum">1131711<em>&nbsp;</em></out></r>
-        <r><in>0040900<em>&nbsp;</em></in><to></to><out class="tnum">0040900<em>&nbsp;</em></out></r>
-        <r><in>11:31,711<em>&nbsp;</em></in><to></to><out class="tnum">11:31,711<em>&nbsp;</em></out></r>
-        <r><in>00:40.900<em>&nbsp;</em></in><to></to><out class="tnum">00:40.900<em>&nbsp;</em></out></r>
-        <r><in>0.45, 0.91, +0.08<em>&nbsp;</em></in><to></to><out class="tnum">0.45, 0.91, +0.08<em>&nbsp;</em></out></r>
-        <r><in>1.00, 9.44, −0.13<em>&nbsp;</em></in><to></to><out class="tnum">1.00, 9.44, −0.13<em>&nbsp;</em></out></r>
-        <r><in>0.00, 1.13, ~7.12<em>&nbsp;</em></in><to></to><out class="tnum">0.00, 1.13, ~7.12<em>&nbsp;</em></out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Numerators <q title='OpenType feature ID'>numr</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>Hello <em>0123</em></in><to></to><out class="numr">Hello 0123</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Denominators <q title='OpenType feature ID'>dnom</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>Hello <em>0123</em></in><to></to><out class="dnom">Hello 0123</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Superscript <q title='OpenType feature ID'>sups</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>H<em>ello 0123</em></in><to></to><out class="sups">Hello 0123</out></r>
-        <r><in><em>abcdefghijklm</em></in><to></to><out class="sups">abcdefghijklm</out></r>
-        <r><in><em>nopqrstuvwxyz</em></in><to></to><out class="sups">nopqrstuvwxyz</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Subscript <q title='OpenType feature ID'>subs</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>H<em>ello 0123</em></in><to></to><out class="subs">Hello 0123</out></r>
-        <r><in><em>abcdefghijklm</em></in><to></to><out class="subs">abcdefghijklm</out></r>
-        <r><in><em>nopqrstuvwxyz</em></in><to></to><out class="subs">nopqrstuvwxyz</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Fractions <q title='OpenType feature ID'>frac</q></h3>
-      <p>
-        This feature is contextually sensitive and will convert "words" of
-        numbers separated by forward slash into proper fractions.
-        This feature is dynamic and allows for any fractions.
-        Note that the digits used for fractions are custom-made for their
-        small size, and are even made separately from the slightly larger
-        Superscript and Subscript numbers.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r>
-          <in><em>1/3</em>  <em>3/4</em>  <em>1/5</em>  <em>1337/5910</em></in>
-          <to></to><out class="frac">1/3  3/4  1/5  1337/5910</out>
-        </r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Case alternates <q title='OpenType feature ID'>case</q></h3>
-      <p>
-        Switches out some glyphs to work better with capital letters and numbers.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r>
-          <in><em>(</em>Hello<em>)</em> <em>[</em>World<em>]</em> <em>{</em>9000<em>}</em></in>
-          <to></to><out class="case">(Hello) [World] {9000}</out>
-        </r>
-        <r><in>SCHOOL <em>@</em> RUN</in><to></to><out class="case">SCHOOL @ RUN</out></r>
-        <r><in>3 <em>+</em> 9 <em>=</em> 12 <em>*</em> 1</in><to></to><out class="case">3 + 9 = 12 * 1</out></r>
-        <r><in><em>*+÷±×=≠≈•~&lt;&gt;≤≥</em></in><to></to><out class="case">*+÷±×=≠≈•~&lt;&gt;≤≥</out></r>
-        <r><in><em>→</em> <em>←</em> <em>⟶</em> <em>⟵</em> <em>−</em> <em>-</em> <em>–</em> <em>—</em> <em>:</em></in><to></to><out class="case">→ ← ⟶ ⟵ − - – — :</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Stylistic set 1: Alternate digits <q title='OpenType feature ID'>ss01</q></h3>
-      <p>
-        An alternate style of digits.
-        Note that individual digit styles can be cherry-picked using the cvXX
-        features.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r>
-          <in><em>1</em>2<em>34</em>5<em>6</em>78<em>9</em>0</in>
-          <to></to><out class="ss01">1234567890</out>
-        </r>
-        <r><in><em>13469</em></in><to></to><out class="ss01">13469</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Stylistic set 2: Disambiguation <q title='OpenType feature ID'>ss02</q></h3>
-      <p>
-        Alternate glyph set that increases visual difference between similar-looking characters.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>WP<em>0</em>AC2A9XS<em>I</em>1<em>0</em>12O9</in><to></to><out class="ss02">WP0AC2A9XSI1012O9</out></r>
-        <r><in><em>Ill</em>ega<em>l</em></in><to></to><out class="ss02">Illegal</out></r>
-        <r><in>βeta <em>ß</em>eta Busine<em>ß</em></in><to></to><out class="ss02">βeta ßeta Busineß</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Discretionary ligatures <q title='OpenType feature ID'>dlig</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in><em>¡¿</em>What<em>?!</em></in><to></to><out class="dlig">¡¿What?!</out></r>
-        <r><in><em>¿¡</em>What<em>!?</em></in><to></to><out class="dlig">¿¡What!?</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Slashed zero <q title='OpenType feature ID'>zero</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in><em>0</em>123</in><to></to><out class="zero">0123</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Character variants <q title='OpenType feature ID'>cvXX</q></h3>
-      <p>
-        Allows cherry-picking alternate characters.
-      </p>
-      <tablex><t>
-        <h><name>Feature&nbsp;&nbsp;</name><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r title="Alternate one"><name>cv01</name><in>1</in><to></to><out class="cv01">1</out></r>
-        <r title="Open four"><name>cv02</name><in>4</in><to></to><out class="cv02">4</out></r>
-        <r title="Open six"><name>cv03</name><in>6</in><to></to><out class="cv03">6</out></r>
-        <r title="Open nine"><name>cv04</name><in>9</in><to></to><out class="cv04">9</out></r>
-        <r title="Lower case L with tail"><name>cv05</name><in>l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ</in><to></to><out class="cv05">l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ</out></r>
-        <r title="Lower case R with straight tail"><name>cv06</name><in>r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ</in><to></to><out class="cv06">r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ</out></r>
-        <r title="Alternate German double-s"><name>cv07</name><in>ß</in><to></to><out class="cv07">ß</out></r>
-        <r title="Upper-case i with serif"><name>cv08</name><in>I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ<br>Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ<br>Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І Ї</in><to></to><out class="cv08">I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ<br>Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ<br>Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І Ї</out></r>
-        <r title="Flat top three"><name>cv09</name><in>3</in><to></to><out class="cv09">3</out></r>
-        <r title="Capital G with spur"><name>cv10</name><in>G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ</in><to></to><out class="cv09">G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Capital Spacing <q title='OpenType feature ID'>cpsp</q></h3>
-      <p>
-        Slightly increases letter spacing for increased legibility of
-        capital letters. Note: It's usually better to set letter-spacing
-        (aka tracking) manually instead of using this feature. It's here
-        mainly for completeness.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>FOREVER IMMATERIAL</in><to></to><out class="cpsp">FOREVER IMMATERIAL</out></r>
-        <r><in>TORSCHLUẞPANIK</in><to></to><out class="cpsp">TORSCHLUẞPANIK</out></r>
-      </t></tablex>
-    </box>
-
+    {% endfor %}
  </boxes>

  <p>
    Additional features, not highlighted above:
    <q title='OpenType feature ID'>locl</q>,
+    <q title='OpenType feature ID'>salt</q>,
    <q title='OpenType feature ID'>aalt</q>,
    <q title='OpenType feature ID'>ccmp</q>,
-    <q title='OpenType feature ID'>ordn</q> and
-    <q title='OpenType feature ID'>salt</q>,
+    <q title='OpenType feature ID'>cpsp</q> and
+    <q title='OpenType feature ID'>ordn</q>.
+    <br>
+    You can explore features in the <a href="lab/">interactive lab</a>.
  </p>

  <p>&nbsp;</p>
--- a/docs/res/base.css
+++ b/docs/res/base.css
@ -7,7 +7,7 @@ body {

  font-size: 15px;
  line-height: 1.5;
-  letter-spacing: -0.002em;
+  letter-spacing: -0.004em;

  font-weight: 400;
  padding-bottom: 30px;
@ -24,11 +24,11 @@ body {
    -moz-font-kerning: normal;
    -o-font-kerning: normal;

-  font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-    -webkit-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-    -ms-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-    -moz-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-    -o-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
+  font-variant-ligatures: contextual common-ligatures;
+    -webkit-font-variant-ligatures: contextual common-ligatures;
+    -ms-font-variant-ligatures: contextual common-ligatures;
+    -moz-font-variant-ligatures: contextual common-ligatures;
+    -o-font-variant-ligatures: contextual common-ligatures;
 }

 /* Font style classifiers used by samples and dynmetrics */
@ -157,7 +157,7 @@ h1, h2, h3 {
 h1 {
  color: #222;
  font-size: 55px;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.038em;
  line-height: 1.1em;
  text-indent: -2px;
  margin-bottom: 30px;
@ -167,11 +167,15 @@ h1 {
 h2 {
  font-size: 30px;
  font-weight: 600;
-  letter-spacing: -0.015em;
+  letter-spacing: -0.025em;
  line-height: 30px;
  margin-bottom: 25px;
  margin-top: 10px;
 }
+.row.dark h2,
+.row.black h2 {
+  letter-spacing: -0.014em;
+}
 h2.back {
  color:rgba(0,0,0,0.2);
  font-size: inherit;
@ -207,6 +211,11 @@ h2.banner {
 h3 {
  font-size: 20px;
  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+.row.dark h3,
+.row.black h3 {
+  letter-spacing: -0.012em;
 }
 h3 q {
  font-weight: 400;
@ -333,13 +342,18 @@ h1 > a, h2 > a, h3 > a {
  color: #3B414A;
 }

-ul {
-  margin-left:1.1em;
-}
+/* --------------------------------------------------------------------- */

-a > img {
-  display: block;
-}
+ul { margin-left:1.1em; }
+a > img { display: block; }
+
+/* --------------------------------------------------------------------- */
+/* generic helpers */
+
+.low-contrast { opacity: 0.4; }
+.center-text { text-align: center; }
+
+/* --------------------------------------------------------------------- */

 #repertoire-image {
  display:block;
@ -358,6 +372,7 @@ a > img {
    width: 100%;
  }

+/* --------------------------------------------------------------------- */

 tablex {
  display: flex;
@ -380,6 +395,131 @@ tablex {
    display: table-row;
  }

+/* --------------------------------------------------------------------- */
+/*
+grid with 4 major columns subdivided twice
+
+|                   |                   |                   |                   |
+|         1         |         2         |         3         |         4         |
+|                   |                   |                   |                   |
+|                   |                   |                   |                   |
+|    1    |    2    |    3    |    4    |    5    |    6    |    7    |    8    |
+|         |         |         |         |         |         |         |         |
+|         |         |         |         |         |         |         |         |
+| 1  | 2  | 3  | 4  | 5  | 6  | 7  | 8  | 9  | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
+|    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |
+|    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |
+
+
+*/
+
+.row.features { display:none; }
+@supports (display: grid) {
+  .row.features { display:flex; }
+}
+.row.features p.example { margin-top:2rem; opacity:0.4; }
+
+grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column-gap: 1rem;
+  grid-row-gap: 1rem;
+}
+grid.c4 { grid-template-columns: repeat(4, 1fr); }
+grid.c8 { grid-template-columns: repeat(8, 1fr); }
+grid.c9 { grid-template-columns: repeat(9, 1fr); }
+grid.c16 { grid-template-columns: repeat(16, 1fr); }
+/*grid, grid4 {
+  grid-template-columns: repeat(4, 1fr);
+}*/
+c {
+  display: block;
+  grid-column-end: span 1;
+}
+c[start="1"] { grid-column-start: 1; }
+c[start="2"] { grid-column-start: 2; }
+c[start="3"] { grid-column-start: 3; }
+c[start="4"] { grid-column-start: 4; }
+c[start="5"] { grid-column-start: 5; }
+c[start="6"] { grid-column-start: 6; }
+c[start="7"] { grid-column-start: 7; }
+c[start="8"] { grid-column-start: 8; }
+c[start="9"] { grid-column-start: 9; }
+
+c[span="1"] { grid-column-end: span 1; }
+c[span="2"] { grid-column-end: span 2; }
+c[span="3"] { grid-column-end: span 3; }
+c[span="4"] { grid-column-end: span 4; }
+c[span="5"] { grid-column-end: span 5; }
+c[span="6"] { grid-column-end: span 6; }
+c[span="7"] { grid-column-end: span 7; }
+c[span="8"] { grid-column-end: span 8; }
+c[span="9"] { grid-column-end: span 9; }
+
+c[span="1-1"] { grid-column: 1 / 1; }
+c[span="2-5"] { grid-column: 2 / 5; }
+c[span="2-4"] { grid-column: 2 / 4; }
+
+grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; }
+grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; }
+
+/* .debug can be added to a grid to visualize its effective cells.
+   .debug-color applies alternating colors. */
+grid.debug > *, grid.debug-color > * {
+  --color: rgba(250, 230, 0, 0.2);
+  background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
+}
+grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); }
+grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); }
+grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); }
+
+.col-all { grid-column: 1 / span 16; }
+
+.col-1   { grid-column: 1 / span 2; }
+.col-1-2 { grid-column: 1 / span 4; }
+.col-1-3 { grid-column: 1 / span 6; }
+.col-1-4 { grid-column: 1 / span 8; }
+.col-1-5 { grid-column: 1 / span 10; }
+.col-1-6 { grid-column: 1 / span 12; }
+.col-1-7 { grid-column: 1 / span 14; }
+.col-1-8 { grid-column: 1 / span 16; }
+
+.col-2   { grid-column: 2 / span 2; }
+.col-2-2 { grid-column: 2 / span 4; }
+.col-2-3 { grid-column: 2 / span 6; }
+.col-2-4 { grid-column: 2 / span 8; }
+.col-2-5 { grid-column: 2 / span 10; }
+.col-2-6 { grid-column: 2 / span 12; }
+.col-2-7 { grid-column: 2 / span 14; }
+
+.col-3   { grid-column: 3 / span 2; }
+.col-3-2 { grid-column: 3 / span 4; }
+.col-3-3 { grid-column: 3 / span 6; }
+.col-3-4 { grid-column: 3 / span 8; }
+.col-3-5 { grid-column: 3 / span 10; }
+.col-3-6 { grid-column: 3 / span 12; }
+
+.col-4   { grid-column: 4 / span 2; }
+.col-4-2 { grid-column: 4 / span 4; }
+.col-4-3 { grid-column: 4 / span 6; }
+.col-4-4 { grid-column: 4 / span 8; }
+.col-4-5 { grid-column: 4 / span 10; }
+
+.col-5   { grid-column: 5 / span 2; }
+.col-5-2 { grid-column: 5 / span 4; }
+.col-5-3 { grid-column: 5 / span 6; }
+.col-5-4 { grid-column: 5 / span 8; }
+
+.col-6   { grid-column: 6 / span 2; }
+.col-6-2 { grid-column: 6 / span 4; }
+.col-6-3 { grid-column: 6 / span 6; }
+
+.col-7   { grid-column: 7 / span 2; }
+.col-7-2 { grid-column: 7 / span 4; }
+
+.col-8   { grid-column: 8 / span 2; }
+
+/* --------------------------------------------------------------------- */

 boxes {
  display: flex;
@ -411,6 +551,16 @@ box h3 {
  margin-bottom:0.8em;
 }

+box.large tablex r {
+  line-height: 1.5;
+}
+box.large tablex r in,
+box.large tablex r to,
+box.large tablex r out {
+  font-size: 2rem;
+  padding-bottom: 0;
+}
+
 #hud-notification {
  position: fixed;
  bottom: 20px;
@ -536,30 +686,31 @@ instead.

 */

-.ff-dlig { font-feature-settings: 'dlig' 1; }
-.ff-numr { font-feature-settings: 'numr' 1; }
-.ff-dnom { font-feature-settings: 'dnom' 1; }
-.ff-tnum { font-feature-settings: 'tnum' 1; }
-.ff-case { font-feature-settings: 'case' 1; }
-.ff-zero { font-feature-settings: 'zero' 1; }
-.ff-frac { font-feature-settings: 'frac' 1; }
-.ff-sups { font-feature-settings: 'sups' 1; }
-.ff-subs { font-feature-settings: 'subs' 1; }
-.ff-cpsp { font-feature-settings: 'cpsp' 1; }
-.ff-salt { font-feature-settings: 'salt' 1; }
+.ff-none { font-feature-settings: 'calt' 0, 'liga' 0; -webkit-font-feature-settings: 'calt' 0, 'liga' 0; -ms-font-feature-settings: 'calt' 0, 'liga' 0; -moz-font-feature-settings: 'calt' 0, 'liga' 0; }
+
+.ff-dlig { font-feature-settings: 'dlig' 1; -webkit-font-feature-settings: 'dlig' 1; -ms-font-feature-settings: 'dlig' 1; -moz-font-feature-settings: 'dlig' 1; }
+.ff-numr { font-feature-settings: 'numr' 1; -webkit-font-feature-settings: 'numr' 1; -ms-font-feature-settings: 'numr' 1; -moz-font-feature-settings: 'numr' 1; }
+.ff-dnom { font-feature-settings: 'dnom' 1; -webkit-font-feature-settings: 'dnom' 1; -ms-font-feature-settings: 'dnom' 1; -moz-font-feature-settings: 'dnom' 1; }
+.ff-tnum { font-feature-settings: 'tnum' 1; -webkit-font-feature-settings: 'tnum' 1; -ms-font-feature-settings: 'tnum' 1; -moz-font-feature-settings: 'tnum' 1; }
+.ff-case { font-feature-settings: 'case' 1; -webkit-font-feature-settings: 'case' 1; -ms-font-feature-settings: 'case' 1; -moz-font-feature-settings: 'case' 1; }
+.ff-zero { font-feature-settings: 'zero' 1; -webkit-font-feature-settings: 'zero' 1; -ms-font-feature-settings: 'zero' 1; -moz-font-feature-settings: 'zero' 1; }
+.ff-frac { font-feature-settings: 'frac' 1; -webkit-font-feature-settings: 'frac' 1; -ms-font-feature-settings: 'frac' 1; -moz-font-feature-settings: 'frac' 1; }
+.ff-sups { font-feature-settings: 'sups' 1; -webkit-font-feature-settings: 'sups' 1; -ms-font-feature-settings: 'sups' 1; -moz-font-feature-settings: 'sups' 1; }
+.ff-subs { font-feature-settings: 'subs' 1; -webkit-font-feature-settings: 'subs' 1; -ms-font-feature-settings: 'subs' 1; -moz-font-feature-settings: 'subs' 1; }
+.ff-cpsp { font-feature-settings: 'cpsp' 1; -webkit-font-feature-settings: 'cpsp' 1; -ms-font-feature-settings: 'cpsp' 1; -moz-font-feature-settings: 'cpsp' 1; }
+.ff-salt { font-feature-settings: 'salt' 1; -webkit-font-feature-settings: 'salt' 1; -ms-font-feature-settings: 'salt' 1; -moz-font-feature-settings: 'salt' 1; }
 .ff-salt-zero { font-feature-settings: 'salt' 1, 'zero' 1; }
 .ff-cv07-salt-zero { font-feature-settings: 'cv07' 1, 'salt' 1, 'zero' 1; }

-.ff-ss01 { font-feature-settings: 'ss01' 1; }
-.ff-ss02 { font-feature-settings: 'ss02' 1; }
-
-.ff-cv01 { font-feature-settings: 'cv01' 1; }
-.ff-cv02 { font-feature-settings: 'cv02' 1; }
-.ff-cv03 { font-feature-settings: 'cv03' 1; }
-.ff-cv04 { font-feature-settings: 'cv04' 1; }
-.ff-cv05 { font-feature-settings: 'cv05' 1; }
-.ff-cv06 { font-feature-settings: 'cv06' 1; }
-.ff-cv07 { font-feature-settings: 'cv07' 1; }
-.ff-cv08 { font-feature-settings: 'cv08' 1; }
-.ff-cv09 { font-feature-settings: 'cv09' 1; }
-.ff-cv10 { font-feature-settings: 'cv10' 1; }
+.ff-ss01 { font-feature-settings: 'ss01' 1; -webkit-font-feature-settings: 'ss01' 1; -ms-font-feature-settings: 'ss01' 1; -moz-font-feature-settings: 'ss01' 1; }
+.ff-ss02 { font-feature-settings: 'ss02' 1; -webkit-font-feature-settings: 'ss02' 1; -ms-font-feature-settings: 'ss02' 1; -moz-font-feature-settings: 'ss02' 1; }
+.ff-cv01 { font-feature-settings: 'cv01' 1; -webkit-font-feature-settings: 'cv01' 1; -ms-font-feature-settings: 'cv01' 1; -moz-font-feature-settings: 'cv01' 1; }
+.ff-cv02 { font-feature-settings: 'cv02' 1; -webkit-font-feature-settings: 'cv02' 1; -ms-font-feature-settings: 'cv02' 1; -moz-font-feature-settings: 'cv02' 1; }
+.ff-cv03 { font-feature-settings: 'cv03' 1; -webkit-font-feature-settings: 'cv03' 1; -ms-font-feature-settings: 'cv03' 1; -moz-font-feature-settings: 'cv03' 1; }
+.ff-cv04 { font-feature-settings: 'cv04' 1; -webkit-font-feature-settings: 'cv04' 1; -ms-font-feature-settings: 'cv04' 1; -moz-font-feature-settings: 'cv04' 1; }
+.ff-cv05 { font-feature-settings: 'cv05' 1; -webkit-font-feature-settings: 'cv05' 1; -ms-font-feature-settings: 'cv05' 1; -moz-font-feature-settings: 'cv05' 1; }
+.ff-cv06 { font-feature-settings: 'cv06' 1; -webkit-font-feature-settings: 'cv06' 1; -ms-font-feature-settings: 'cv06' 1; -moz-font-feature-settings: 'cv06' 1; }
+.ff-cv07 { font-feature-settings: 'cv07' 1; -webkit-font-feature-settings: 'cv07' 1; -ms-font-feature-settings: 'cv07' 1; -moz-font-feature-settings: 'cv07' 1; }
+.ff-cv08 { font-feature-settings: 'cv08' 1; -webkit-font-feature-settings: 'cv08' 1; -ms-font-feature-settings: 'cv08' 1; -moz-font-feature-settings: 'cv08' 1; }
+.ff-cv09 { font-feature-settings: 'cv09' 1; -webkit-font-feature-settings: 'cv09' 1; -ms-font-feature-settings: 'cv09' 1; -moz-font-feature-settings: 'cv09' 1; }
+.ff-cv10 { font-feature-settings: 'cv10' 1; -webkit-font-feature-settings: 'cv10' 1; -ms-font-feature-settings: 'cv10' 1; -moz-font-feature-settings: 'cv10' 1; }
--- a/docs/res/base.js
+++ b/docs/res/base.js
@ -81,7 +81,7 @@ var HUDNotification = {
 // the compensating tracking in EM.
 //
 function InterDynamicTracking(fontSize) {
-  var a = -0.02, b = 0.0755, c = -0.102;
+  var a = -0.038, b = 0.161, c = -0.12;
  // tracking = a + b * e ^ (c * fontSize)
  return a + b * Math.pow(Math.E, c * fontSize)
 }
--- a/docs/samples/index.html
+++ b/docs/samples/index.html
@ -4,10 +4,9 @@ title: Samples
 ---
 {%

-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
+if site.safe == false %}{%
+assign url_root = "/" %}{% else %}{%
+assign url_root = "/inter/" %}{% endif %}{%

 for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
				`@ -0,0 +1 @@`
				`<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#000"/></svg>`