website: v4.0

docs/Makefile

@@ -19,10 +19,10 @@ build-tmp: .ruby-bundle
 	bundle exec jekyll build --disable-disk-cache -b /tmp/inter-v4-website -d _site-tmp
 
 serve: .ruby-bundle
-	$(Q)if [ ! -s lab/fonts ]; then \
-		[ ! -s lab/fonts/fonts ] || rm lab/fonts/fonts; \
-		rm -f lab/fonts && ln -fs ../../build/fonts lab/fonts; \
-	fi
+	$(Q)( sleep 3 && \
+		rm -f _site/lab/fonts && \
+		ln -s ../../../build/fonts _site/lab/fonts ) &
+	@#
 	@# need to delete generated content so that jekyll, being a little dumb,
 	@# can manage to copy the font files into there again.
 	@# Why not a symlink you ask? Jekyll traverses it and copies the content.
@@ -97,9 +97,9 @@ FONTS_SRC := \
 	$(FONTDIR)/static/InterDisplay-SemiBoldItalic.woff2 \
 	$(FONTDIR)/static/InterDisplay-Thin.woff2 \
 	$(FONTDIR)/static/InterDisplay-ThinItalic.woff2 \
-  $(FONTDIR)/var/Inter-Variable.woff2 \
-  $(FONTDIR)/var/Inter-Variable-Italic.woff2 \
-  $(FONTDIR)/var/Inter-Variable.ttf
+  $(FONTDIR)/var/InterVariable.woff2 \
+  $(FONTDIR)/var/InterVariable-Italic.woff2 \
+  $(FONTDIR)/var/InterVariable.ttf
 
 font-files/Inter-Regular.woff2: $(FONTS_SRC)
 	rm -rf font-files/Inter*

docs/_data/faq.yml

@@ -80,12 +80,12 @@
   q: "What are the technical details of Inter?"
   a: |
     UPM: 2048<br>
-    Variable axis <q>opsz</q> [14–28]<br>
+    Variable axis <q>opsz</q> [14–32]<br>
     Variable axis <q>wght</q> [100–900]<br>
     Constant axis <q>ital</q> [0, 9.4°]<br>
     Style classification: Sans-serif, Grotesk<br>
     x-height, opsz=14: 1118 UPM<br>
-    x-height, opsz=28: 1056 UPM<br>
+    x-height, opsz=32: 1056 UPM<br>
     Cap height: 1490 UPM<br>
     Ascender: 1984 UPM<br>
     Descender: -494 UPM<br>

docs/_data/fontinfo.json

@@ -55,7 +55,7 @@
       "usWinAscent": 1984,
       "usWinDescent": 494,
       "version": 4,
-      "xAvgCharWidth": 1314,
+      "xAvgCharWidth": 1313,
       "yStrikeoutPosition": 671,
       "yStrikeoutSize": 140,
       "ySubscriptXOffset": 0,
@@ -70,8 +70,8 @@
     "cmap": "[present but not decoded]",
     "glyf": "[present but not decoded]",
     "head": {
-      "checkSumAdjustment": 402214426,
-      "created": 3783201336,
+      "checkSumAdjustment": 1565796926,
+      "created": 3783283210,
       "flags": [
         "0: Baseline at y=0",
         "1: Left sidebearing point at x=0",
@@ -86,7 +86,7 @@
       "macStyle": [],
       "macStyle_raw": 0,
       "magicNumber": 1594834165,
-      "modified": 3783203555,
+      "modified": 3783283222,
       "tableVersion": 1.0,
       "unitsPerEm": 2048,
       "xMax": 5290,
@@ -105,7 +105,7 @@
       "metricDataFormat": 0,
       "minLeftSideBearing": -1513,
       "minRightSideBearing": -2200,
-      "numberOfHMetrics": 2935,
+      "numberOfHMetrics": 2926,
       "tableVersion": 65536,
       "xMaxExtent": 5290
     },
@@ -143,9 +143,9 @@
       "#274": "Single-story a",
       "#275": "Compact f",
       "#276": "Compact t",
-      "#3 fontId": "4.000;git-59063ec87;RSMS;Inter-Regular",
+      "#3 fontId": "4.000;git-401515a34;RSMS;Inter-Regular",
       "#4 fullName": "Inter Regular",
-      "#5 version": "Version 4.000;git-59063ec87",
+      "#5 version": "Version 4.000;git-401515a34",
       "#6 postscriptName": "Inter-Regular",
       "#7 trademark": "Inter UI and Inter is a trademark of rsms.",
       "#8 manufacturerName": "rsms",

docs/_layouts/default.html

@@ -10,8 +10,8 @@
     <link rel="stylesheet" href="{{url_root}}inter.css?v={{ release_version }}">
     <link rel="stylesheet" href="{{url_root}}res/base.css?v={{ base_css_v }}">
     <link rel="icon" type="image/png" href="{{url_root}}res/favicon.png?v={{ favicon_v }}">
-    <link rel="preload" href="{{url_root}}font-files/Inter-Variable.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
-    <link rel="preload" href="{{url_root}}font-files/Inter-Variable-Italic.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="{{url_root}}font-files/InterVariable.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="{{url_root}}font-files/InterVariable-Italic.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
     <meta name="format-detection" content="telephone=no">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@rsms">

docs/_scripts/build-fontkit.js.sh

@@ -8,9 +8,9 @@
 # Use the result like this:
 #   <script type="module">
 #   import fontkit from "./fontkit-2.0.2.js"
-#   let data = await fetch("Inter-Variable.ttf").then(r => r.arrayBuffer())
+#   let data = await fetch("InterVariable.ttf").then(r => r.arrayBuffer())
 #   let font = fontkit.create(new Uint8Array(data))
-#   let instance = font.getVariation({wght: 600, opsz: 28})
+#   let instance = font.getVariation({wght: 600, opsz: 32})
 #   console.log({font, instance})
 #   </script>
 #

docs/download/index.html

@@ -3,7 +3,6 @@
 title: Download Inter
 ---
 {% include defs.html -%}
-{% assign download_url = "https://github.com/rsms/inter/releases/download/v4.0-beta9h/Inter-4.0-beta9h.zip" %}
 
 <div class="row"><div><r-grid columns=8>
 
@@ -61,7 +60,7 @@ <h2>Installation instructions</h2>
     <ol>
       <li>Open the "Font Book" application.</li>
       <li>In the main menu, select "File" → "Add Fonts..."</li>
-      <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
+      <li>Select "Inter.ttc", "InterVariable.ttf" and "InterVariable-Italic.ttf"</li>
       <li>Press the "Open" button</li>
     </ol>
     <p>
@@ -73,7 +72,7 @@ <h2>Installation instructions</h2>
   <div id="install-windows" class="install-instructions">
     <ol>
       <li>Open the zip file you downloaded</li>
-      <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
+      <li>Select "Inter.ttc", "InterVariable.ttf" and "InterVariable-Italic.ttf"</li>
       <li>Right-click the selected files, choose "Install for all users"</li>
     </ol>
     <p>
@@ -87,8 +86,8 @@ <h2>Installation instructions</h2>
   <div id="install-ubuntu" class="install-instructions">
     <ol>
       <li>Create a ".fonts" directory in your home. (<code>mkdir -p ~/.fonts</code>)</li>
-      <li>Copy "Inter.ttc", "Inter-Variable.ttf" and
-        "Inter-Variable-Italic.ttf" into your .fonts directory
+      <li>Copy "Inter.ttc", "InterVariable.ttf" and
+        "InterVariable-Italic.ttf" into your .fonts directory
         (<code>cp Inter.ttc *.ttf ~/.fonts/</code>)
       </li>
     </ol>
@@ -119,7 +118,7 @@ <h4>Variable &amp; Static font files</h4>
 
   <p>
     Inter fonts comes in two flavors: Variable and Static
-    (<code>Inter-Variable*.ttf</code> and <code>Inter.ttc</code>, respectively.)
+    (<code>InterVariable*.ttf</code> and <code>Inter.ttc</code>, respectively.)
   </p><p>
     Variable fonts is a new format which allows you to choose any
     weight and optical size. Variable fonts is a relatively new

docs/index.html

@@ -571,6 +571,7 @@
     font-size: 2em;
     position:absolute;
     top:-4rem; left: 1rem;
+    color: var(--foreground-color-bright);
   }
   .row.glyphs > :first-child { display: none }
   /*.row.glyphs h2 { font-size: 2rem; margin-bottom: 1rem }*/
@@ -635,9 +636,15 @@
   }
 }
 
+#faq {
+  margin-top: 2em;
+}
 #faq .columns > p {
   margin-bottom: 2em;
 }
+#faq h2 {
+  margin: 0 0 1.5em 0;
+}
 #faq h4:target {
   background: var(--active-bgcolor);
   outline: 8px solid var(--active-bgcolor);
@@ -677,7 +684,7 @@ <h1 class=title>The Inter typeface family</h1>
       <p>
         The smaller "text" optical-size designs features a tall x-height to aid in legibility of lower-case text, with several contrast-enhancing details like ink traps and bridges. The larger "display" optical-size designs offers clean lines, smooth curves and delicate details for excellent rythm of large text.
       </p><p>
-        <a href="#features">38&nbsp;OpenType features</a> are provided as well,
+        Many <a href="#features">OpenType features</a> are provided as well,
         including contextual alternates which adjusts punctuation depending on the
         shape of surrounding glyphs, slashed zero for when you need to
         disambiguate "0" from "o", tabular numbers, and much more.
@@ -944,15 +951,15 @@ <h3><a id="free" href="#free">Free &amp; open source</a></h3>
   <p class=label>Example text, Regular</p>
   <div class="columns size1">
   <p>
-One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; and other authorities even attribute it to Alexander the Great.
+One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; <em>and other authorities even attribute it to Alexander the Great.</em>
 </p><p>
 All that can with certainty be affirmed is, that the architect was named Sostrates. Montfaucon, in his great work, endeavours to explain how it is that while we are thus informed as to the architect, we are so doubtful as to the founder, whom, for his part, he believes to have been Ptolemæus. Our ignorance, he says, is owing to the knavery of Sostrates. He wished to immortalize his name; a blameless wish, if at the same time he had not sought to suppress that of the founder, whose glory it was to have suggested the erection. For this purpose Sostrates devised a stratagem which proved successful; deep in the wall of the tower he cut the following inscription: “Sostrates of Cnidos, son of Dexiphanes, to the gods who Protect those who are upon the Sea.” But, mistrustful that King Ptolemæus would scarcely be satisfied with an inscription in which he was wholly ignored, he covered it with a light coat of cement, which he knew would not long endure the action of the atmosphere, and carved thereon the name of Ptolemæus. After a few years the cement and the name of the king disappeared, and revealed the inscription which gave all the glory to Sostrates.
 </p><p>
 Montfaucon, with genial credulity, adopts this anecdote as authentic, and adds: Pliny pretends that Ptolemæus, out of the modesty and greatness of his soul, desired the architect’s name to be engraved upon the tower, and no reference to himself to be made. But this statement is very dubious; it would have passed as incredible in those times, and even to-day would be regarded as an ill-understood act of magnanimity. We have never heard of any prince prohibiting the perpetuation of his name upon magnificent works designed for the public utility, or being content that the architect should usurp the entire honour.
 </p><p>
 To solve the difficulty, Champollion represents the pharos as constructed by Ptolemæus Soter. But, as Edrisi solemnly remarks, “God alone knows what is the truth.”
 </p><p>
-Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language. From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light.
+Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: <em>That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language.</em> From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light.
 </p><p>
 The most reasonable conjecture seems to be that the word is a Hellenic form of Phrah, the Egyptian name of the sun, to whom the Alexandrian lighthouse would naturally be compared by wondering spectators, or dedicated by a devout prince.
 </p><p>
@@ -1183,7 +1190,6 @@ <h2>&nbsp;</h2>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dlig">dlig</a> Discretionary Ligatures<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dnom">dnom</a> Denominators<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_fj#tag-frac">frac</a> Fractions<br>
-        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-liga">liga</a> Standard Ligatures<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-locl">locl</a> Localized Forms<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-numr">numr</a> Numerators<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-ordn">ordn</a> Ordinals<br>
@@ -1192,9 +1198,9 @@ <h2>&nbsp;</h2>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-sinf">sinf</a> Scientific Inferiors<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-smcp">smcp</a> Small Capitals (limited)<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss01</a> Open digits<br>
-        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss02</a> Disambiguation (with zero<)<br>
+        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss02</a> Disambiguation (with zero)<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss03</a> Round quotes &amp; commas<br>
-        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss04</a> Disambiguation (no zero<)<br>
+        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss04</a> Disambiguation (no zero)<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss05</a> Circled characters<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss06</a> Squared characters<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss07</a> Square punctuation<br>
@@ -1247,8 +1253,8 @@ <h2><a href="#glyphs">Glyphs</a></h2>
             <input type="checkbox" name="opsz" checked>
             Small optical size
           </label> -->
-          <div class="slider opsz-slider" title='opsz from 14 "text" to 28 "display"'>
-            <input type="range" name="opsz" value=28 min=14 max=28 step=0.1>
+          <div class="slider opsz-slider" title='opsz from 14 "text" to 32 "display"'>
+            <input type="range" name="opsz" value=32 min=14 max=32 step=0.1>
             Optical size
           </div>
           <label class="switch-button opsz-switch">

docs/inter-display.css

@@ -12,16 +12,16 @@ layout: none
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2');
-  font-variation-settings: "opsz" 28;
+  src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2');
+  font-variation-settings: "opsz" 32;
 }
 @font-face {
   font-family: 'InterDisplay var';
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2');
-  font-variation-settings: "opsz" 28;
+  src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2');
+  font-variation-settings: "opsz" 32;
 }
 
 

docs/inter.css

@@ -20,18 +20,18 @@ Usage example:
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2');
+  src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2');
 }
 @font-face {
   font-family: InterVariable;
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2');
+  src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2');
 }
 /* legacy name "Inter var" (Oct 2023) */
-@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2'); }
-@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2'); }
+@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2'); }
+@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2'); }
 /* static fonts */
 @font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; 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"); }