mirror of
https://github.com/rsms/inter.git
synced 2024-09-21 07:47:29 +03:00
329 lines
15 KiB
HTML
329 lines
15 KiB
HTML
<!DOCTYPE HTML>
|
||
<html lang="en" prefix="og: http://ogp.me/ns#">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Interface font family</title>
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
||
<meta property="og:title" content="Interface font family">
|
||
<meta property="twitter:title" content="Interface font family">
|
||
<meta property="description" content="Interface is a new typeface optimized for high legibility on computer screens">
|
||
<meta property="og:description" content="Interface is a new typeface optimized for high legibility on computer screens">
|
||
<meta property="twitter:description" content="Interface is a new typeface optimized for high legibility on computer screens">
|
||
<meta property="twitter:card" content="summary">
|
||
<meta property="twitter:site" content="@rsms">
|
||
<meta property="twitter:creator" content="@rsms">
|
||
<meta property="og:image" content="https://rsms.me/interface/res/poster.png">
|
||
<meta property="twitter:image" content="https://rsms.me/interface/res/poster.png">
|
||
|
||
<meta property="fb:app_id" content="38027689216">
|
||
<meta property="og:url" content="https://rsms.me/interface/">
|
||
<meta property="og:site_name" content="rsms.me">
|
||
<meta property="og:type" content="product">
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="format-detection" content="telephone=no">
|
||
|
||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||
|
||
<link href="interface.css?v=2" rel="stylesheet">
|
||
<link href="index.css?v=2" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<script src="index.js"></script>
|
||
|
||
<div class="row"><div>
|
||
<h1>The Interface font family</h1>
|
||
<p>
|
||
Interface is a font for highly legible text on computer screens.<br>
|
||
<a class="fat" href="https://github.com/rsms/interface/releases/latest/">Download the latest release</a>
|
||
or try it out in the <a href="lab/" class="fat">playground</a>
|
||
</p>
|
||
</div></div>
|
||
|
||
<div class="row white" style="padding-bottom:0"><div>
|
||
<h2><a id="sample" href="#sample">Sample</a></h2>
|
||
<p style="margin-bottom:0">
|
||
<a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/Interface-samples" class="plain"><img src="res/sample.png" width="888" style="width:100%;display:block"></a>
|
||
</p>
|
||
</div></div>
|
||
|
||
<div class="row dark"><div>
|
||
<h2><a id="free" href="#free">How much does it cost?</a></h2>
|
||
<p>
|
||
Interface is a <a href="https://github.com/rsms/interface">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/interface/releases/latest/">download & installing</a> locally on your computer.
|
||
</p>
|
||
<p>
|
||
You're free to bundle copies of Interface with your software, even if it's
|
||
commercial and you charge money for your software. Interface can also be used
|
||
on the web by either hosting the font files yourself or by including this CSS:
|
||
</p>
|
||
<code>@import url('https://rsms.me/interface/interface.css');</code>
|
||
<p>Use the following CSS rules to specify the Interface family:</p>
|
||
<code>font-family: Interface, sans-serif;</code>
|
||
</div></div>
|
||
|
||
<div class="row"><div>
|
||
<p>
|
||
There are currently four <a id="weights" href="#weights">weights</a>
|
||
</p>
|
||
<img src="res/weights-and-styles.svg" style="opacity:0.76;width:100%;display:block;margin:2em 0 3em 0">
|
||
<h2><a id="features" href="#features">Features</a></h2>
|
||
<boxes>
|
||
<box>
|
||
<h3>Contextual alternates (<q title='OpenType feature ID'>calt</q>)</h3>
|
||
<tablex><t>
|
||
<h><in>Disabled</in><to></to><out>Enabled</out></h>
|
||
<r><in>12<em>:</em>34, FE<em>—</em>X</in><to></to><out>12:34, FE—X</out></r>
|
||
<r><in>4<em>.</em>2</in><to></to><out>4.2</out></r>
|
||
<r><in>SFO -> STO</in><to></to><out>SFO -> STO</out></r>
|
||
<r><in>M<em>@</em>N m@n</in><to></to><out>M@N m@n</out></r>
|
||
</t></tablex>
|
||
</box>
|
||
|
||
<box>
|
||
<h3>Tabular numbers (<q title='OpenType feature ID'>tnum</q>)</h3>
|
||
<tablex><t>
|
||
<h><in>Disabled</in><to></to><out>Enabled</out></h>
|
||
<r><in><em>1</em>23456<em>7</em>890</in><to></to><out class="tnum">1234567890</out></r>
|
||
<r><in>1131711<em> </em></in><to></to><out class="tnum">1131711<em> </em></out></r>
|
||
<r><in>0040900<em> </em></in><to></to><out class="tnum">0040900<em> </em></out></r>
|
||
</t></tablex>
|
||
</box>
|
||
|
||
<box>
|
||
<h3>Slashed zero (<q title='OpenType feature ID'>zero</q>)</h3>
|
||
<tablex><t>
|
||
<h><in>Disabled</in><to></to><out>Enabled</out></h>
|
||
<r><in><em>0</em>123</in><to></to><out class="zero">0123</out></r>
|
||
</t></tablex>
|
||
</box>
|
||
|
||
<box>
|
||
<h3>Fractions (<q title='OpenType feature ID'>frac</q>)</h3>
|
||
<tablex><t>
|
||
<h><in>Disabled</in><to></to><out>Enabled</out></h>
|
||
<r>
|
||
<in><em>1/3</em> <em>22/9</em> <em>3/4/5</em></in>
|
||
<to></to><out class="frac">1/3 22/9 3/4/5</out>
|
||
</r>
|
||
</t></tablex>
|
||
</box>
|
||
|
||
<box>
|
||
<h3>Stylistic set #1: Open digits (<q title='OpenType feature ID'>ss01</q>)</h3>
|
||
<tablex><t>
|
||
<h><in>Disabled</in><to></to><out>Enabled</out></h>
|
||
<r>
|
||
<in>123<em>4</em>5<em>6</em>78<em>9</em>0</in>
|
||
<to></to><out class="ss01">1234567890</out>
|
||
</r>
|
||
</t></tablex>
|
||
</box>
|
||
|
||
<box>
|
||
<h3>Case alternates (<q title='OpenType feature ID'>case</q>)</h3>
|
||
<tablex><t>
|
||
<h><in>Disabled</in><to></to><out>Enabled</out></h>
|
||
<r>
|
||
<in><em>(</em>Hello<em>)</em> <em>[</em>World<em>]</em> <em>{</em>9000<em>}</em></in>
|
||
<to></to><out class="case">(Hello) [World] {9000}</out>
|
||
</r>
|
||
<r><in>SCHOOL <em>@</em> RUN</in><to></to><out class="case">SCHOOL @ RUN</out></r>
|
||
<r><in>3 <em>+</em> 9 <em>=</em> 12*</in><to></to><out class="case">3 + 9 = 12*</out></r>
|
||
<r><in><em>*</em> <em>+</em> <em>÷</em> <em>±</em> <em>×</em> <em>=</em> <em>≠</em> <em>•</em></in><to></to><out class="case">* + ÷ ± × = ≠ •</out></r>
|
||
<r><in><em>→</em> <em>←</em> <em>⟶</em> <em>⟵</em> <em>−</em> <em>-</em> <em>–</em> <em>—</em> <em>:</em></in><to></to><out class="case">→ ← ⟶ ⟵ − - – — :</out></r>
|
||
</t></tablex>
|
||
</box>
|
||
|
||
</boxes>
|
||
|
||
<p>
|
||
Also includes some
|
||
Localized Forms (<q title='OpenType feature ID'>locl</q>),
|
||
Numerators (<q title='OpenType feature ID'>numr</q>) and
|
||
Denominators (<q title='OpenType feature ID'>dnom</q>).
|
||
</p>
|
||
|
||
<p> </p>
|
||
|
||
<h2><a href="glyphs/">Glyph repertoire</a></h2>
|
||
<p class="glyph-repertoire">
|
||
<span class="fade"></span>
|
||
<a class="plain" href="glyphs/">
|
||
<iframe src="glyphs/?iframe" scrolling="no" frameborder="0"></iframe>
|
||
</a>
|
||
</p>
|
||
<p class="glyph-repertoire-link">
|
||
<a class="plain" href="glyphs/">Explore all glyphs →</a>
|
||
</p>
|
||
</div></div>
|
||
|
||
<div class="row-divider"></div>
|
||
|
||
<div class="row"><div>
|
||
<h2><a id="story" href="#story">The story behind Interface</a></h2>
|
||
<p>
|
||
Interface 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 Interface, 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 Interface was being developed, it was tested on an internal version of
|
||
<a href="https://www.figma.com/">Figma</a>—where the author of Interface works as a designer—and slowly improved upon based on experience and feedback.
|
||
</p>
|
||
|
||
<p> </p>
|
||
|
||
<h2><a id="status" href="#status">Current status & usability</a></h2>
|
||
<p>
|
||
Interface works great for English–language text, and pretty well for other
|
||
Latin and Cyrillic languages. There's still a lot of work to be done, and
|
||
<a href="https://github.com/rsms/interface/blob/master/CONTRIBUTING.md">contributions are warmly welcomed</a>. The playground contains <a href="lab/?sample=Body%20text%201&size=16">a lot of samples</a>, including some common <a href="lab/?sample=Kerning%20body%20multi-lang&size=16">non English–language words in the playground.</a>
|
||
</p>
|
||
|
||
<p>
|
||
Please refer to the <a href="glyphs/">glyph repertoire</a>
|
||
for an overview of currently–available glyphs and their quality.
|
||
</p>
|
||
|
||
<p> </p>
|
||
|
||
<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>
|
||
<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.
|
||
</li>
|
||
|
||
<li class="q" id="faq-naming">
|
||
There's another font family with a similar name (InterFace).
|
||
How do I make sure I'm talking about the right font?
|
||
</li>
|
||
<li class="a">
|
||
The world is a small place and just like all the
|
||
<a href="https://en.wikipedia.org/wiki/Eric_Erickson">Eric Ericksons</a>,
|
||
name alone somtimes does not suffice for unambiguous identity.
|
||
The best way to be clear about what font you are talking about is to
|
||
use the URL of this page (<q>rsms.me/interface</q>) when telling
|
||
people about it.
|
||
<a href="https://figma.com/">Design tools</a> and other software uses
|
||
<a href="https://www.microsoft.com/typography/otspec/name.htm#nameIDs">a set of information embedded into every font</a> for identity, so names are only
|
||
important for humans, not computers, and so you need not to worry about
|
||
"conflicts." At least not with well-behaved software.
|
||
</li>
|
||
|
||
<li class="q" id="faq-contribute">
|
||
Can I help with improving Interface?
|
||
</li>
|
||
<li class="a">
|
||
Yes you can! Interface 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/interface">are freely available</a> to improve upon.
|
||
Font making requires a fair bit of technical work and
|
||
depending on what you'd like to do, some things might be more fun
|
||
depending on your technical skills.
|
||
The <a href="https://github.com/rsms/interface/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>
|
||
|
||
<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">
|
||
Interface 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 2 990 150 line edits made across 247 versions.
|
||
The reason the public github repository does not reflect this is the
|
||
fact that the project was initially only internal at the company where
|
||
the author works and had some sensitive information "checked in",
|
||
like AWS server details and internal author identity in
|
||
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-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 Interface, 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>
|
||
|
||
|
||
</ul>
|
||
|
||
<script>
|
||
var av = document.querySelectorAll('ul.faq > li.q'), a, i, e, id
|
||
for (i = 0; i < av.length; ++i) {
|
||
e = av[i]
|
||
id = e.id
|
||
if (id) {
|
||
a = document.createElement('a')
|
||
a.href = '#' + id
|
||
a.className = 'plain'
|
||
a.innerHTML = e.innerHTML
|
||
e.innerText = ''
|
||
e.appendChild(a)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</div></div>
|
||
|
||
|
||
<div class="row"><div>
|
||
— <a href="https://twitter.com/rsms" class="plain">@rsms</a>
|
||
</div></div>
|
||
</body>
|
||
</html>
|