diff options
author | Rasmus Andersson <rasmus@figma.com> | 2019-02-19 18:23:24 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@figma.com> | 2019-02-19 18:23:32 +0300 |
commit | 38a830d0a968c1c24a29cfc9ff4f1bf38b3705c6 (patch) | |
tree | 9c67243b0263fea7e05d4199e2a40f38522488a5 /docs/index.html | |
parent | 1208ea93e0dfbda79abc97eb2efa102fee1b809b (diff) | |
download | inter-38a830d0a968c1c24a29cfc9ff4f1bf38b3705c6.tar.xz |
website update
Diffstat (limited to 'docs/index.html')
-rw-r--r-- | docs/index.html | 314 |
1 files changed, 161 insertions, 153 deletions
diff --git a/docs/index.html b/docs/index.html index c5dc67aee..02172cc3c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,79 +25,96 @@ endfor <link rel="stylesheet" href="index-var.css?v={{ index_var_css_v }}"> <input type="text" id="hidden-text-input"> -<div class="row"><div> - <h1>The Inter font family</h1> - <p> - Inter is a typeface specially designed for user interfaces - with focus on high legibility of small-to-medium sized text on computer screens. - </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 - surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", - tabular numbers, etc. - </p> -</div></div> - -<div class="row white" style="padding-bottom:0"><div> - <p id="samples" class="samples items sample-images"> - <a href="samples/" class="plain"><img src="samples/img/01.png" srcset="samples/img/01@2x.png 2x" width="888"></a> - </p> - <p style="text-align:center"> - <a href="samples/" class="plain">More samples -></a> - <br><br> - </p> -</div></div> - -<div class="row dark"><div> - - <h2><a id="usage" href="#usage">How do I use it?</a></h2> - <p> - Using the font is as easy as - <a class="download-link" href="{{download_url}}">downloading & installing</a> on your computer. - </p> - <p> - You're free to bundle copies of Inter with your software, even if it's - commercial and you charge money for your software. Inter can also be used - on the web by either hosting the font files yourself or by including this CSS: - </p> - <pre>@import url('https://rsms.me/inter/inter.css'); +<div class="row white"><div> + <h1>The Inter<br>typeface family</h1> + <grid columns=8> + <c span=2 span-s=row> + Inter is a typeface specially designed for computer screens. + </c> + <c span=3.. span-s=row> + 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 + surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", + tabular numbers, etc. + </c> + + <c class="spacer"></c> + + <c span=2 span-s=row> + <h3><span class="only-large-screen">Inter Bold<br></span>Sample</h3> + </c> + <c span=3.. span-s=row> + <a href="samples/" class="plain"><img src="samples/img/lineup-bold-red.svg" width="100%"></a> + </c> + + <c class="spacer"></c> + + <c span=2 span-s=row> + <h3><span class="only-large-screen">Inter Regular<br></span>Sample</h3> + </c> + <c span=3.. span-s=row> + <a href="samples/" class="plain"><img src="samples/img/sample-regular-text.svg" width="100%"></a> + </c> + + <c class="spacer"></c> + + <c span=2 span-s=row> + <h3><a id="usage" href="#usage">Using</a></h3> + </c> + <c span=3.. span-s=row> + <p> + Using Inter is as easy as + <a class="download-link" href="{{download_url}}">downloading & installing</a> + the font files. If you're making a web thing, you can simply use this CSS: + </p> + <pre>@import url('https://rsms.me/inter/inter.css'); html { font-family: 'Inter', sans-serif; } @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } }</pre> + </c> + + <c class="spacer"></c> + + <c span=2 span-s=row> + <h3 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h3> + </c> + <c span=3.. span-s=row> + <p class="dynmet-calc"> + Size + <input id="dynmet-font-size" type="number" value="16" min="4" max="99" autocomplete="off" spellcheck="false" + ><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 + <input id="dynmet-tracking" type="number" value="0.008" autocomplete="off" spellcheck="false"> + <span id="dynmet-unit">em</span> + </p> + <p> + 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="dynmetrics/" class="plain">Explore dynamic metrics →</a> + </p> + </c> + + <c class="spacer"></c> + + <c span=2 span-s=row> + <h3><a id="free" href="#free">Free & <br class="only-large-screen">Open source</a></h3> + </c> + <c span=3.. span-s=row> + <p> + Inter is a <a href="https://github.com/rsms/inter">free and open source</a> font family.<br> + You are free to use this font in almost any way imaginable.<br> + 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> + </c> - <p> </p> - - <h2 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h2> - <p class="dynmet-calc"> - Size - <input id="dynmet-font-size" type="number" value="16" min="4" max="99" - ><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 - <input id="dynmet-tracking" type="number" value="0.008"> - <span id="dynmet-unit">em</span> - </p> - <p> - 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="dynmetrics/">Learn more…</a> - </p> - - <p> </p> - - <h2><a id="free" href="#free">How much does it cost?</a></h2> - <p> - Inter is a <a href="https://github.com/rsms/inter">free and open source</a> font family.<br> - You are free to use this font in almost any way imaginable.<br> - 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> - + </grid> </div></div> + <div class="row"><div> <h2><a id="weights" href="#weights">Weights & Styles</a></h2> <p> @@ -205,16 +222,16 @@ html { font-family: 'Inter', sans-serif; } %} {% 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> + <grid columns=8> + <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> + <grid columns=9> + <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 %} {% @@ -230,14 +247,14 @@ html { font-family: 'Inter', sans-serif; } 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> + <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> + <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> @@ -266,63 +283,59 @@ html { font-family: 'Inter', sans-serif; } <br> You can explore features in the <a href="lab/">interactive lab</a>. </p> - - <p> </p> - - <h2 class="banner"><a href="glyphs/">Browse all glyphs -></a></h2> </div></div> -<div class="row-divider"></div> - -<div class="row"><div> +<div class="row white"><div> <h2><a id="story" href="#story">The story behind Inter</a></h2> - <p> - Inter started out in late 2016 as an experiment to build a perfectly - pixel-fitting font at a specific small size (11px.) The idea was that - by crafting a font in a particular way, with a particular coordinate system - (Units Per EM), and for a particular target rasterization size (11), it would - be possible to get the best of both sharpness and readability. - </p> - <p> - However after a few months of using an early version of Inter, it dawned - on everyone exposed to the test that this approach had some serious real-world - problems. Most notably that it was really hard to read longer text. Because of - the pixel-aligning nature of that approach, the font took an almost - <a href="https://www.figma.com/file/HPqDViSCB8fAWuxaV2ousFMv">mono-spaced appearance</a>, - making it really easy to read numbers, punctuation and very short - words, but eye-straining to read anything longer. - </p> - <p> - The project was rebooted with a different approach, sticking with the - specific UPM, but crafting glyphs and kerning in a way that made for - more variation in the rhythm and smoother vertical and horizontal stems. - As Inter was being developed, it was tested on an internal version of - <a href="https://www.figma.com/">Figma</a>—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback. - </p> + <flow columns=2 columns-s=1> + <p> + Inter started out in late 2016 as an experiment to build a perfectly + pixel-fitting font at a specific small size (11px.) The idea was that + by crafting a font in a particular way, with a particular coordinate system + (Units Per EM), and for a particular target rasterization size (11), it would + be possible to get the best of both sharpness and readability. + </p> + <p> + However after a few months of using an early version of Inter, it dawned + on everyone exposed to the test that this approach had some serious real-world + problems. Most notably that it was really hard to read longer text. Because of + the pixel-aligning nature of that approach, the font took an almost + <a href="https://www.figma.com/file/HPqDViSCB8fAWuxaV2ousFMv">mono-spaced appearance</a>, + making it really easy to read numbers, punctuation and very short + words, but eye-straining to read anything longer. + </p> + <p> + The project was rebooted with a different approach, sticking with the + specific UPM, but crafting glyphs and kerning in a way that made for + more variation in the rhythm and smoother vertical and horizontal stems. + As Inter was being developed, it was tested on an internal version of + <a href="https://www.figma.com/">Figma</a>—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback. + </p> + </flow> <p> </p> <h2><a id="faq" href="#faq">FAQ</a></h2> - <ul class="faq"> + <grid columns=2 columns-s=1 class="faq"> - <li class="q" id="faq-using-features"> - How do I enable and disable font features? - </li> - <li class="a"> + <c> + <h4 id="faq-using-features"> + How do I enable and disable font features? + </h4> 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> + <a href="https://help.figma.com/article/250-working-with-fonts#opentype">Advanced Type 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> + </c> - <li class="q" id="faq-unhinted-vs-hinted"> - What is the difference between "unhinted" and "hinted" font files? - </li> - <li class="a"> + <c> + <h4 id="faq-unhinted-vs-hinted"> + What is the difference between "unhinted" and "hinted" font files? + </h4> The font files in the "hinted" folders have additional data in them for assisting <a href="https://en.wikipedia.org/wiki/ClearType">ClearType</a>, @@ -334,23 +347,22 @@ html { font-family: 'Inter', sans-serif; } consideration to make. <a href="https://www.typotheque.com/articles/hinting"> This article explains hinting at a greater length.</a> - </li> - + </c> - <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"> + <c> + <h4 id="faq-cdn"> + How reliable are the fonts served from rsms.me/inter? Is it on a CDN? + </h4> 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.css</q> and associated font files very reliable and fast throughout the world. - </li> + </c> - <li class="q" id="faq-contribute"> - Can I help with improving Inter? - </li> - <li class="a"> + <c> + <h4 id="faq-contribute"> + Can I help with improving Inter? + </h4> Yes you can! Inter is an open-source project, meaning the source code—or "source design" if you will—that is used to build the font files <a href="https://github.com/rsms/inter">are freely available</a> to improve upon. @@ -360,12 +372,12 @@ html { font-family: 'Inter', sans-serif; } The <a href="https://github.com/rsms/inter/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where you can have the biggest impact, how things are setup and how to get started. - </li> + </c> - <li class="q" id="faq-start-date"> - This website claims work started in 2016, but the git repository's log says it started later? - </li> - <li class="a"> + <c> + <h4 id="faq-start-date"> + This website claims work started in 2016, but the git repository's log says it started later? + </h4> Inter was developed in an a private, internal git repository starting in November 2016, prior to being published on August 22, 2017. Between November 2016 and August 2017, there were @@ -377,26 +389,22 @@ html { font-family: 'Inter', sans-serif; } all commit messages. Maybe one day we can write an elaborate git filter-branch program and convert the filter the old repository to make it public, but what would be the point of that? :—) - </li> - - <li class="q" id="faq-contact"> - I've made a cool thing that uses Inter, can I share it with you? - <dem>or</dem> - </li> - <li class="q"> - I have a different question - </li> - <li class="a"> - Reach out on <a href="https://twitter.com/rsms">Twitter (@rsms)</a> or over <a href="mailto:rasmus@notion.se">email</a> - </li> + </c> + <c> + <h4 id="faq-contact"> + I've made a cool thing that uses Inter, can I share it with you?<br> + or, I have a different question. + </h4> + Reach out on <a href="https://twitter.com/rsms">Twitter (@rsms)</a> or over <a href="mailto:rasmus@notion.se">email</a> + </c> - </ul> + </grid> </div></div> -<div class="row"><div> +<div class="row white"><div> — <a href="https://twitter.com/rsms" class="plain">@rsms</a> </div></div> |