diff options
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 |
Release v2.5v2.5
Diffstat (limited to 'docs/index.html')
-rw-r--r-- | docs/index.html | 147 |
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> </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 & installing</a> locally on your computer. + <a class="download-link" href="https://github.com/rsms/inter/releases/latest/">download & 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> </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? :—) </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? <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> |