From 38a830d0a968c1c24a29cfc9ff4f1bf38b3705c6 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Tue, 19 Feb 2019 07:23:24 -0800 Subject: website update --- docs/index.html | 314 +++++++++++++++++++++++++++++--------------------------- 1 file changed, 161 insertions(+), 153 deletions(-) (limited to 'docs/index.html') 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 -
-

The Inter font family

-

- Inter is a typeface specially designed for user interfaces - with focus on high legibility of small-to-medium sized text on computer screens. -

-

- 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. -

-
- -
-

- -

-

- More samples -> -

-

-
- -
- -

How do I use it?

-

- Using the font is as easy as - downloading & installing on your computer. -

-

- 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: -

-
@import url('https://rsms.me/inter/inter.css');
+
+

The Inter
typeface family

+ + + Inter is a typeface specially designed for computer screens. + + + 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. + + + + + +

Inter Bold
Sample

+
+ + + + + + + +

Inter Regular
Sample

+
+ + + + + + + +

Using

+
+ +

+ Using Inter is as easy as + downloading & installing + the font files. If you're making a web thing, you can simply use this CSS: +

+
@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; }
 }
+
+ + + + +

Dynamic Metrics

+
+ +

+ Size + dp + = + spacing + + em +

+

+ There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter Dynamic Metrics 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. +

+

+ Explore dynamic metrics → +

+
+ + + + +

Free &
Open source

+
+ +

+ Inter is a free and open source font family.
+ You are free to use this font in almost any way imaginable.
+ Refer to the SIL Open Font License 1.1 for exact details on what the conditions and restrictions are. +

+
-

 

- -

Dynamic Metrics

-

- Size - dp - = - spacing - - em -

-

- There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter Dynamic Metrics 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. -

-

- Learn more… -

- -

 

- -

How much does it cost?

-

- Inter is a free and open source font family.
- You are free to use this font in almost any way imaginable.
- Refer to the SIL Open Font License 1.1 for exact details on what the conditions and restrictions are. -

- +
+

Weights & Styles

@@ -205,16 +222,16 @@ html { font-family: 'Inter', sans-serif; } %} {% if has_feature_col %} - - Feature - Disabled - - Enabled + + Feature + Disabled + + Enabled {% else %} - - Disabled - - Enabled + + Disabled + + Enabled {% 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 %} - {{feat_tag}} - {{sample_in}} - - {{sample_out}} + {{feat_tag}} + {{sample_in}} + + {{sample_out}} {% else %} - {{sample_in}} - - {{sample_out}} + {{sample_in}} + + {{sample_out}} {% endif %} {% endfor %} @@ -266,63 +283,59 @@ html { font-family: 'Inter', sans-serif; }
You can explore features in the interactive lab.

- -

 

- -
-
- -
+

The story behind Inter

-

- 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. -

-

- 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 - mono-spaced appearance, - making it really easy to read numbers, punctuation and very short - words, but eye-straining to read anything longer. -

-

- 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 - Figma—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback. -

+ +

+ 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. +

+

+ 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 + mono-spaced appearance, + making it really easy to read numbers, punctuation and very short + words, but eye-straining to read anything longer. +

+

+ 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 + Figma—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback. +

+

 

FAQ

-
    + -
  • - How do I enable and disable font features? -
  • -
  • + +

    + How do I enable and disable font features? +

    In web browsers you'll want to use font-feature-settings. In Figma you can access features via the - Advanced Typography panel. + Advanced Type panel. In Illustrator, Photoshop and friends, you can access features via the Characters and OpenType panels. Sketch doesn't provide a UI for configuring font features, but there's a workaround using macOS's native font UI. -
  • + -
  • - What is the difference between "unhinted" and "hinted" font files? -
  • -
  • + +

    + What is the difference between "unhinted" and "hinted" font files? +

    The font files in the "hinted" folders have additional data in them for assisting ClearType, @@ -334,23 +347,22 @@ html { font-family: 'Inter', sans-serif; } consideration to make. This article explains hinting at a greater length. -
  • - + -
  • - How reliable are the fonts served from rsms.me/inter? Is it on a CDN? -
  • -
  • + +

    + How reliable are the fonts served from rsms.me/inter? Is it on a CDN? +

    rsms.me/inter is backed by GitHub's server network and distributed globally on the CloudFlare CDN, making usage of https://rsms.me/inter/inter.css and associated font files very reliable and fast throughout the world. -
  • + -
  • - Can I help with improving Inter? -
  • -
  • + +

    + Can I help with improving Inter? +

    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 are freely available to improve upon. @@ -360,12 +372,12 @@ html { font-family: 'Inter', sans-serif; } The "Contributing" document 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. -
  • + -
  • - This website claims work started in 2016, but the git repository's log says it started later? -
  • -
  • + +

    + This website claims work started in 2016, but the git repository's log says it started later? +

    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?  :—) -
  • - -
  • - I've made a cool thing that uses Inter, can I share it with you? -  or -
  • -
  • - I have a different question -
  • -
  • - Reach out on Twitter (@rsms) or over email -
  • + + +

    + I've made a cool thing that uses Inter, can I share it with you?
    + or, I have a different question. +

    + Reach out on Twitter (@rsms) or over email +
    -
+
-
+
@rsms
-- cgit v1.2.3