UPM 2048 and opsz axis (#462)

- UPM is adjusted to 2048
- Additional opsz VF axis (multi master) added which will eventually replace the separate Display family
- New tooling that uses fontmake instead of Inter's own fontbuild toolchain. (The old toolchain is still supported, i.e. `make -f Makefile_v1.make ...`)

13 files changed, 276 insertions, 143 deletions

diff --git a/docs/Gemfile b/docs/Gemfile
new file mode 100644
index 000000000..0e6f09ed8
--- /dev/null
+++ b/docs/Gemfile
@@ -0,0 +1,35 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 4.2.2"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", "~> 1.2"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+
+gem "webrick", "~> 1.7"
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
new file mode 100644
index 000000000..39b1511ca
--- /dev/null
+++ b/docs/Gemfile.lock
@@ -0,0 +1,83 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.8.0)
+    i18n (1.10.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.2)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-feed (0.16.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (2.2.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.7)
+    rb-fsevent (0.11.1)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.28.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.8.0)
+    webrick (1.7.0)
+
+PLATFORMS
+  arm64-darwin-21
+
+DEPENDENCIES
+  http_parser.rb (~> 0.6.0)
+  jekyll (~> 4.2.2)
+  jekyll-feed (~> 0.12)
+  minima (~> 2.5)
+  tzinfo (~> 1.2)
+  tzinfo-data
+  wdm (~> 0.1.1)
+  webrick (~> 1.7)
+
+BUNDLED WITH
+   2.3.14
diff --git a/docs/Makefile b/docs/Makefile
new file mode 100644
index 000000000..e332f0006
--- /dev/null
+++ b/docs/Makefile
@@ -0,0 +1,51 @@
+SRCDIR  := $(abspath $(lastword $(MAKEFILE_LIST))/../..)
+BIN     := $(SRCDIR)/build/venv/bin
+FONTDIR := ../build/fonts
+export PATH := $(BIN):$(PATH)
+
+default:
+	@echo "Please specify a target: build, serve or dist" >&2
+
+build:
+	rm -rf _site
+	bundle exec jekyll build
+
+serve:
+	./_scripts/serve.sh
+
+# -----------------------------------------------------------------------
+
+dist: fonts info
+	$(BIN)/python3 ../misc/tools/patch-version.py lab/index.html
+
+info: _data/fontinfo.json \
+      lab/glyphinfo.json \
+      glyphs/metrics.json
+
+fonts:
+	rm -rf font-files/Inter-* font-files/Inter.var*
+	mkdir -p font-files
+	cp -a $(FONTDIR)/static/Inter-*.woff2 \
+	      $(FONTDIR)/static/Inter-*.otf \
+	      $(FONTDIR)/var/Inter.var.* \
+	      $(FONTDIR)/var/Inter-roman.var.* \
+	      $(FONTDIR)/var/Inter-italic.var.* \
+	      font-files/
+
+_data/fontinfo.json: ../misc/tools/fontinfo.py font-files/Inter-Regular.otf
+	$(BIN)/python3 ../misc/tools/fontinfo.py -pretty $< > _data/fontinfo.json
+
+lab/glyphinfo.json: ../misc/tools/gen-glyphinfo.py \
+                    ../build/ufo/Inter-Regular.ufo \
+                    ../misc/UnicodeData.txt
+	$(BIN)/python3 ../misc/tools/gen-glyphinfo.py \
+		-ucd ../misc/UnicodeData.txt ../build/ufo/Inter-Regular.ufo > $@
+
+glyphs/metrics.json: ../misc/tools/gen-metrics-and-svgs.py \
+                     ../build/ufo/Inter-Regular.ufo
+	$(BIN)/python3 ../misc/tools/gen-metrics-and-svgs.py ../build/ufo/Inter-Regular.ufo
+	@# Note: this also patches glyphs/index.html
+
+font-files/Inter-Regular.otf: fonts
+
+.PHONY: default build serve dist info fonts
diff --git a/docs/README.md b/docs/README.md
index 193ed97ee..b00d1ab6d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1 +1,2 @@
-This directory is published as a website by Github at [https://rsms.me/inter](https://rsms.me/inter/)
+This directory is published as a website by Github at
+[https://rsms.me/inter](https://rsms.me/inter/)
diff --git a/docs/_config.yml b/docs/_config.yml
index b66780472..b235ec988 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -10,3 +10,6 @@ kramdown:
   hard_wrap: false
 exclude:
   - README.md
+  - Makefile
+  - Gemfile
+  - Gemfile.lock
diff --git a/docs/_includes/Inter-static.css b/docs/_includes/Inter-static.css
index f16ba4d87..89fd4f595 100644
--- a/docs/_includes/Inter-static.css
+++ b/docs/_includes/Inter-static.css
@@ -3,16 +3,14 @@
   font-style:  normal;
   font-weight: 100;
   font-display: swap;
-  src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 100;
   font-display: swap;
-  src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -20,16 +18,14 @@
   font-style:  normal;
   font-weight: 200;
   font-display: swap;
-  src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 200;
   font-display: swap;
-  src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -37,16 +33,14 @@
   font-style:  normal;
   font-weight: 300;
   font-display: swap;
-  src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 300;
   font-display: swap;
-  src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -54,16 +48,14 @@
   font-style:  normal;
   font-weight: 400;
   font-display: swap;
-  src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 400;
   font-display: swap;
-  src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -71,16 +63,14 @@
   font-style:  normal;
   font-weight: 500;
   font-display: swap;
-  src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 500;
   font-display: swap;
-  src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -88,16 +78,14 @@
   font-style:  normal;
   font-weight: 600;
   font-display: swap;
-  src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 600;
   font-display: swap;
-  src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -105,16 +93,14 @@
   font-style:  normal;
   font-weight: 700;
   font-display: swap;
-  src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 700;
   font-display: swap;
-  src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -122,16 +108,14 @@
   font-style:  normal;
   font-weight: 800;
   font-display: swap;
-  src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 800;
   font-display: swap;
-  src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -139,14 +123,12 @@
   font-style:  normal;
   font-weight: 900;
   font-display: swap;
-  src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 900;
   font-display: swap;
-  src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2");
 }
diff --git a/docs/_includes/InterDisplay-static.css b/docs/_includes/InterDisplay-static.css
index c62a45465..369557f3d 100644
--- a/docs/_includes/InterDisplay-static.css
+++ b/docs/_includes/InterDisplay-static.css
@@ -3,16 +3,14 @@
   font-style:  normal;
   font-weight: 100;
   font-display: swap;
-  src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Thin.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 100;
   font-display: swap;
-  src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ThinItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -20,16 +18,14 @@
   font-style:  normal;
   font-weight: 200;
   font-display: swap;
-  src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraLight.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 200;
   font-display: swap;
-  src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraLightItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -37,16 +33,14 @@
   font-style:  normal;
   font-weight: 300;
   font-display: swap;
-  src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Light.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 300;
   font-display: swap;
-  src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-LightItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -54,16 +48,14 @@
   font-style:  normal;
   font-weight: 400;
   font-display: swap;
-  src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Regular.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 400;
   font-display: swap;
-  src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Italic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -71,16 +63,14 @@
   font-style:  normal;
   font-weight: 500;
   font-display: swap;
-  src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Medium.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 500;
   font-display: swap;
-  src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-MediumItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -88,16 +78,14 @@
   font-style:  normal;
   font-weight: 600;
   font-display: swap;
-  src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-SemiBold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 600;
   font-display: swap;
-  src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-SemiBoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -105,16 +93,14 @@
   font-style:  normal;
   font-weight: 700;
   font-display: swap;
-  src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Bold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 700;
   font-display: swap;
-  src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-BoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -122,16 +108,14 @@
   font-style:  normal;
   font-weight: 800;
   font-display: swap;
-  src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraBold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 800;
   font-display: swap;
-  src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
@@ -139,14 +123,12 @@
   font-style:  normal;
   font-weight: 900;
   font-display: swap;
-  src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Black.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'InterDisplay';
   font-style:  italic;
   font-weight: 900;
   font-display: swap;
-  src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-BlackItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2");
 }
diff --git a/docs/_scripts/serve.sh b/docs/_scripts/serve.sh
index aee2fa5c4..817254b21 100755
--- a/docs/_scripts/serve.sh
+++ b/docs/_scripts/serve.sh
@@ -2,11 +2,13 @@
 set -e
 cd "$(dirname "$0")/.."
 
-if [ "$1" == "-h" ]; then
+if [ "$1" = "-h" ]; then
   echo "usage: $0 [<bindaddr>]" >&2
   exit 1
 fi
 
+BINDADDR=${1:-127.0.0.1}
+
 if [ ! -s lab/fonts ]; then
   rm -f lab/fonts
   ln -fs ../../build/fonts lab/fonts
@@ -20,14 +22,7 @@ fi
 # For live testing with fonts, you'll instead want to use docs/lab/serve.py
 rm -rf _site
 
-BINDADDR=127.0.0.1
-if [ "$1" != "" ]; then
-  BINDADDR=$1
-fi
-
-# --incremental
-
-jekyll serve \
+bundle exec jekyll serve \
   --watch \
   --host "$BINDADDR" \
   --port 3002 \
diff --git a/docs/inter-ui.css b/docs/inter-ui.css
index 9aac5f998..4aca7ee2e 100644
--- a/docs/inter-ui.css
+++ b/docs/inter-ui.css
@@ -15,135 +15,117 @@ Please use "inter.css" instead for new applications.
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 100;
-  src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 100;
-  src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 200;
-  src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 200;
-  src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 300;
-  src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 300;
-  src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 400;
-  src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 400;
-  src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 500;
-  src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 500;
-  src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 600;
-  src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 600;
-  src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 700;
-  src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 700;
-  src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 800;
-  src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 800;
-  src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 900;
-  src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 900;
-  src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
+  src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2");
 }
 
 /* --------------------------------------------------------------------------
diff --git a/docs/inter.css b/docs/inter.css
index b812483c6..04d9f436b 100644
--- a/docs/inter.css
+++ b/docs/inter.css
@@ -7,7 +7,7 @@ Font families defined by this CSS:
 
 - "Inter"                  static "traditional" fonts for older web browsers
 - "Inter var"              single-axis variable fonts for all modern browsers
-- "Inter var experimental" multi-axis variable fonts for modern web browsers
+- "Inter var experimental" multi-axis variable fonts for some modern web browsers
 
 Use like this in your CSS:
 
@@ -21,11 +21,6 @@ Use like this in your CSS:
 
 /* ----------------------- variable ----------------------- */
 
-{%- comment -%}
-{% include Inter-italic.var.css %}
-{% include Inter-roman.var.css %}
-{%- endcomment %}
-
 @font-face {
   font-family: 'Inter var';
   font-style: normal;
diff --git a/docs/lab/font-files.js b/docs/lab/font-files.js
index 61d444421..012a67bed 100644
--- a/docs/lab/font-files.js
+++ b/docs/lab/font-files.js
@@ -68,10 +68,10 @@ var fontFamilyName,
   }
 
   let families = [
-    ["Inter",        "const",        fontFamilyName],
-    ["Inter",        "const-hinted", fontFamilyNameHinted],
-    ["InterDisplay", "const",        fontFamilyNameDisplay],
-    ["InterDisplay", "const-hinted", fontFamilyNameDisplayHinted],
+    ["Inter",        "static",        fontFamilyName],
+    ["Inter",        "static-hinted", fontFamilyNameHinted],
+    ["InterDisplay", "static",        fontFamilyNameDisplay],
+    ["InterDisplay", "static-hinted", fontFamilyNameDisplayHinted],
   ]
 
   for (let [family, filepath, cssname] of families) {
diff --git a/docs/lab/index.html b/docs/lab/index.html
index 534d2b29e..855c63c7a 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -37,7 +37,7 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
     <div class="options">
 
       <div class="flex-x">
-        <label title="Use variable font instead of constant font files">
+        <label title="Use variable font instead of static font files">
           <span>VF</span>
           <input type="checkbox" name="varfont">
         </label>
@@ -64,18 +64,24 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
 
       <!-- Variable font controls (hidden when not using variable fonts) -->
       <label class="label-and-value varfontControl">
-        <span>Weight:</span>
+        <span title="Weight">wght:</span>
         <input type="range" value="400" step="1" min="100" max="900" name="varWeight">
         <input type="number" value="400" step="1" min="100" max="900" name="varWeightNum">
       </label>
 
       <label class="label-and-value varfontControl">
-        <span>Slant:</span>
+        <span title="Slant">slnt:</span>
         <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant">
         <input type="number" value="0" step="0.01" min="0" max="10" name="varSlantNum">
       </label>
 
-      <label class="label-and-value constfontControl">
+      <label class="label-and-value varfontControl">
+        <span title="Optical size">opsz:</span>
+        <input type="range" value="0" step="0.01" min="16" max="72" name="varOpsz">
+        <input type="number" value="0" step="0.01" min="16" max="72" name="varOpszNum">
+      </label>
+
+      <label class="label-and-value staticfontControl">
         <span>Weight:</span>
         <select name="weight" style="max-width:100px">
           <option value="100">Thin (100)</option>
@@ -828,9 +834,10 @@ function main() {
 
   let usingVarFont = false
   let usingFontFamily = "text"
-  var varWeightRange, varSlantRange
+  var varWeightRange, varSlantRange, varOpszRange
   var varWeightSettingValueImpl = false
   var varSlantSettingValueImpl = false
+  var varOpszSettingValueImpl = false
 
   function getFontFamily(overrideFamily) {
     return (
@@ -866,6 +873,7 @@ function main() {
   let varState = {
     weight: 400, // 400..900
     slant: 0,    // 0..-10
+    opsz: 16,    // 16..72
   }
 
   function updateVarFont() {
@@ -880,7 +888,7 @@ function main() {
       varSlantSettingValueImpl = false
       setCSSProp(
         "font-variation-settings",
-        `"wght" ${varState.weight}, "slnt" ${-varState.slant}`
+        `"wght" ${varState.weight}, "slnt" ${-varState.slant}, "opsz" ${varState.opsz}`
       )
     } else {
       setCSSProp("font-variation-settings", null)
@@ -892,7 +900,7 @@ function main() {
     document.body.classList.toggle('varfont', on)
     if (on) {
       if (!isInitial) {
-        // copy value of const weight to var weight
+        // copy value of static weight to var weight
         let w = parseInt(varWeight.getValue())
         if (!isNaN(w) && varWeightRange && !varWeightSettingValueImpl) {
           varWeightRange.setValue(w)
@@ -904,7 +912,7 @@ function main() {
       // )
     } else {
       if (!isInitial && varWeightRange) {
-        // copy value of var weight to const weight
+        // copy value of var weight to static weight
         let w = varWeightRange.getValue()
         if (!isNaN(w)) {
           vars.setValue("weight", Math.round(w / 100) * 100)
@@ -920,15 +928,18 @@ function main() {
   })
 
   let varWeightNum = vars.bind('varWeightNum', (e, v) => {
-    if (varWeightRange && !varWeightSettingValueImpl) {
+    if (varWeightRange && !varWeightSettingValueImpl)
       varWeightRange.setValue(v)
-    }
   })
 
   let varSlantNum = vars.bind('varSlantNum', (e, v) => {
-    if (varSlantRange && !varSlantSettingValueImpl) {
+    if (varSlantRange && !varSlantSettingValueImpl)
       varSlantRange.setValue(v)
-    }
+  })
+
+  let varOpszNum = vars.bind('varOpszNum', (e, v) => {
+    if (varOpszRange && !varOpszSettingValueImpl)
+      varOpszRange.setValue(v)
   })
 
   varWeightRange = vars.bind('varWeight', (e, v) => {
@@ -961,6 +972,19 @@ function main() {
     return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
   })
 
+  varOpszRange = vars.bind('varOpsz', (e, v) => {
+    varState.opsz = v
+    varOpszSettingValueImpl = true
+    varOpszNum.setValue(v)
+    varOpszSettingValueImpl = false
+    updateVarFont()
+  }, (e, prevValue, ev) => {
+    if (prevValue === undefined) {
+      return 0
+    }
+    return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
+  })
+
 
   // compare
   let secondarySampleClassNameAddition = null
diff --git a/docs/lab/lab.css b/docs/lab/lab.css
index 2c22a0346..833fe83d1 100644
--- a/docs/lab/lab.css
+++ b/docs/lab/lab.css
@@ -543,12 +543,12 @@ body.sidebar-minimized .options {
     user-select: none; -moz-user-select: none; -webkit-user-select:none;
   }
   .options .varfontControl,
-  .options .constfontControl {
+  .options .staticfontControl {
     transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
     transition-property: opacity, height, margin;
   }
   .options .varfontControl,
-  body.varfont .options .constfontControl {
+  body.varfont .options .staticfontControl {
     pointer-events:none;
     overflow: hidden;
     opacity:0;
@@ -562,7 +562,7 @@ body.sidebar-minimized .options {
     height: var(--fieldHeight);
     margin-bottom: var(--rowBottomMargin);
   }
-  /*body.varfont .options .constfontControl {
+  /*body.varfont .options .staticfontControl {
     display: none;
   }*/
   .options .varfontControl .label-and-value {