Release v2.5v2.5

author: Rasmus Andersson <rasmus@notion.se> 2018-02-18 11:28:23 +0300
committer: Rasmus Andersson <rasmus@notion.se> 2018-02-18 11:28:23 +0300
commit: 360916d1ec97df6a92b0a41f6a12f42a15fe0cab (patch)
tree: 9c864c3ee44a6c5c083c34d8c2ce21716c1579b4 /docs/index.html
parent: c551b9f66a6467e1a7104ae0aa7d99203bf331a3 (diff)
download: inter-360916d1ec97df6a92b0a41f6a12f42a15fe0cab.tar.xz
1 files changed, 111 insertions, 36 deletions
diff --git a/docs/index.html b/docs/index.html
index 34496f1b7..bc75f2602 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,10 +22,22 @@
     <meta property="og:locale" content="en_US" />
     <meta name="format-detection" content="telephone=no">
     <link rel="icon" type="image/png" href="favicon.png" />
-    <link href="inter-ui.css?v=2.4" rel="stylesheet">
-    <link href="index.css?v=3" rel="stylesheet">
+    <link href="inter-ui.css?v=2.5" rel="stylesheet">
+    <link href="index.css?v=4" rel="stylesheet">
   </head>
   <body>
+
+    <div class="row menu">
+      <ul class="menu">
+        <li><a class="download-link"
+          href="https://github.com/rsms/inter/releases/latest/"
+        >Download</a></li>
+        <li><a href="lab/">Playground</a></li>
+        <li><a href="https://github.com/rsms/inter/">Source</a></li>
+        <li><a href="https://github.com/rsms/inter/releases/">Changelog</a></li>
+      </ul>
+    </div>
+
     <div class="row"><div>
       <h1>The Inter UI font family</h1>
       <p>
@@ -33,11 +45,6 @@
       with focus on high legibility of small-to-medium sized text on computer screens.
       </p>
       <p>
-      <a class="fat" href="https://github.com/rsms/inter/releases/latest/"
-      >Download the latest release</a>
-      or try it out in the <a href="lab/" class="fat">playground</a>
-      </p>
-      <p>
       The family features a tall x-height to aid in readability of mixed-case and
       lower-case text. Several OpenType features are provided as well,
       like contextual alternates that adjusts punctuation depending on the shape of
@@ -67,6 +74,7 @@
           <img src="res/sample/12.png" srcset="res/sample/12@2x.png 2x" width="888">
           <img src="res/sample/13.png" srcset="res/sample/13@2x.png 2x" width="888">
           <img src="res/sample/14.png" srcset="res/sample/14@2x.png 2x" width="888">
+          <img src="res/sample/15.png" srcset="res/sample/15@2x.png 2x" width="888">
         </p>
         <p style="text-align:center">
           <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain">Open these samples in Figma</a>
@@ -76,18 +84,11 @@
     </div>
 
     <div class="row dark"><div>
-      <h2><a id="free" href="#free">How much does it cost?</a></h2>
-      <p>
-        Inter UI is a <a href="https://github.com/rsms/inter">free and open source</a> font family. You are free to use this font in almost any way imaginable.
-        Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.
-      </p>
-
-      <p>&nbsp;</p>
 
       <h2><a id="usage" href="#usage">How do I use it?</a></h2>
       <p>
         Using the font is as easy as
-        <a href="https://github.com/rsms/inter/releases/latest/">download &amp; installing</a> locally on your computer.
+        <a class="download-link" href="https://github.com/rsms/inter/releases/latest/">download &amp; installing</a> locally on your computer.
       </p>
       <p>
         You're free to bundle copies of Inter UI with your software, even if it's
@@ -97,6 +98,15 @@
       <code>@import url('https://rsms.me/inter/inter-ui.css');</code>
       <p>Use the following CSS rules to specify the Inter UI family:</p>
       <code>font-family: 'Inter UI', sans-serif;</code>
+
+      <p>&nbsp;</p>
+
+      <h2><a id="free" href="#free">How much does it cost?</a></h2>
+      <p>
+        Inter UI is a <a href="https://github.com/rsms/inter">free and open source</a> font family. You are free to use this font in almost any way imaginable.
+        Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.
+      </p>
+
     </div></div>
 
     <div class="row"><div>
@@ -242,14 +252,46 @@
       <h2><a id="faq" href="#faq">FAQ</a></h2>
       <ul class="faq">
 
-        <li class="q" id="faq-roboto-similar">
-          Some glyphs looks just like Roboto, is this typeface based on Roboto?
+        <li class="q" id="faq-using-features">
+          How do I enable and disable font features?
+        </li>
+        <li class="a">
+          In web browsers you'll want to use
+          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings"><q>font-feature-settings</q></a>.
+          In Figma you can access features via the
+          <a href="https://help.figma.com/text/opentype-features">Advanced Typography panel.</a>
+          In Illustrator, Photoshop and friends, you can access features via the
+          <a href="https://helpx.adobe.com/illustrator/using/special-characters.html#opentype_panel_overview">Characters and OpenType panels.</a>
+          Sketch doesn't provide a UI for configuring font features, but there's
+          <a href="https://sketchtalk.io/discussion/comment/1478/#Comment_1478">a workaround using macOS's native font UI.</a>
+        </li>
+
+        <li class="q" id="faq-unhinted-vs-hinted">
+          What is the difference between "unhinted" and "hinted" font files?
         </li>
         <li class="a">
-          Since this font is very <em>similar to Roboto</em>, glyph
-          outlines from Roboto are indeed being used, mainly as "placeholders"
-          while the glyph set is expanded. The Roboto license can be found in the
-          source directory.
+          The font files in the "hinted" folders have additional data in them
+          for assisting
+          <a href="https://en.wikipedia.org/wiki/ClearType">ClearType</a>,
+          the text rasterizer used by Microsoft Windows (and some Linux distributions.)
+          You want to use the "hinted" fonts only if you are targeting Windows users
+          <em>and</em> prefer the different look of these "hinted" fonts.
+          Additionally, hinting data makes the font files larger, so if you are
+          using Inter UI on websites, the extra size of these files is another
+          consideration to make.
+          <a href="https://www.typotheque.com/articles/hinting">
+          This article explains hinting at a greater length.</a>
+        </li>
+
+
+        <li class="q" id="faq-cdn">
+          How reliable are the fonts served from rsms.me/inter? Is it on a CDN?
+        </li>
+        <li class="a">
+          rsms.me/inter is backed by GitHub's server network and distributed
+          globally on the CloudFlare CDN, making usage of
+          <q>https://rsms.me/inter/inter-ui.css</q> and associated font
+          files very reliable and fast throughout the world. 
         </li>
 
         <li class="q" id="faq-contribute">
@@ -284,20 +326,6 @@
           it public, but what would be the point of that?&nbsp; :—)
         </li>
 
-        <li class="q" id="faq-using-features">
-          How do I enable and disable <a href="#features">font features</a>?
-        </li>
-        <li class="a">
-          In web browsers you'll want to use
-          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings"><q>font-feature-settings</q></a>.
-          In Figma you can access features via the
-          <a href="https://help.figma.com/text/opentype-features">Advanced Typography panel.</a>
-          In Illustrator, Photoshop and friends, you can access features via the
-          <a href="https://helpx.adobe.com/illustrator/using/special-characters.html#opentype_panel_overview">Characters and OpenType panels.</a>
-          Sketch doesn't provide a UI for configuring font features, but there's
-          <a href="https://sketchtalk.io/discussion/comment/1478/#Comment_1478">a workaround using macOS's native font UI.</a>
-        </li>
-
         <li class="q" id="faq-contact">
           I've made a cool thing that uses Inter UI, can I share it with you?
           &nbsp;<dem>or</dem>
@@ -321,12 +349,51 @@
 
     <script src="index.js"></script>
     <script>
-      var av = document.querySelectorAll('ul.faq > li.q'), a, i, e, id
+      (function(){
+
+      // download-link
+      fetchjson('info.json', function(err, data) {
+        if (err) { throw err }
+        var ids = Object.keys(data)
+        var regularId = ids[0]
+        ids.forEach(function(id){
+          if (id.indexOf('Inter UI Regular:') == 0) {
+            regularId = id
+          }
+        })
+        if (ids.length == 0) {
+          console.error('failed to find Inter UI Regular in info.json', data)
+          return
+        }
+        var regular = data[regularId]
+        // console.log('info.json:', regular)
+        if (regular.names && regular.names.version) {
+          var v = regular.names.version
+          var p = v.indexOf(';')
+          if (p != -1) {
+            v = v.substr(0, p)
+          }
+          var directDownloadURL =
+            'https://github.com/rsms/inter/releases/download/v' + v +
+            '/Inter-UI-' + v + '.zip'
+          var av = document.querySelectorAll('a.download-link'), i, e
+          for (i = 0; i < av.length; ++i) {
+            e = av[i]
+            e.href = directDownloadURL
+          }
+        }
+      })
+
+      // FAQ anchors
+      var av = document.querySelectorAll('ul.faq > li.q'), a, i, e, id, tn
       for (i = 0; i < av.length; ++i) {
         e = av[i]
+        tn = document.createTextNode('Q  ')
+        e.insertBefore(tn, e.firstChild)
         id = e.id
         if (id) {
           a = document.createElement('a')
+          // a.id = id
           a.href = '#' + id
           a.className = 'plain'
           a.innerHTML = e.innerHTML
@@ -334,6 +401,14 @@
           e.appendChild(a)
         }
       }
+      av = document.querySelectorAll('ul.faq > li.a')
+      for (i = 0; i < av.length; ++i) {
+        e = av[i]
+        tn = document.createTextNode('A  ')
+        e.insertBefore(tn, e.firstChild)
+      }
+
+    })();
     </script>
   </body>
 </html>
author	Rasmus Andersson <rasmus@notion.se>	2018-02-18 11:28:23 +0300
committer	Rasmus Andersson <rasmus@notion.se>	2018-02-18 11:28:23 +0300
commit	360916d1ec97df6a92b0a41f6a12f42a15fe0cab (patch)
tree	9c864c3ee44a6c5c083c34d8c2ce21716c1579b4 /docs/index.html
parent	c551b9f66a6467e1a7104ae0aa7d99203bf331a3 (diff)
download	inter-360916d1ec97df6a92b0a41f6a12f42a15fe0cab.tar.xz