mirror of
https://github.com/rsms/inter.git
synced 2024-12-26 09:04:06 +03:00
447 lines
17 KiB
HTML
447 lines
17 KiB
HTML
---
|
||
layout: default
|
||
---
|
||
{%
|
||
|
||
capture url_root
|
||
%}{% if site.safe == false %}/{% else %}/inter/{% endif
|
||
%}{%
|
||
endcapture %}{%
|
||
|
||
for file in site.static_files %}{%
|
||
assign _path = file.path | remove_first: "/inter" %}{%
|
||
if _path == "/index.css" %}{%
|
||
assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
endif %}{%
|
||
endfor
|
||
|
||
%}
|
||
<link rel="stylesheet" href="index.css?v={{ index_css_v }}">
|
||
<input type="text" id="hidden-text-input">
|
||
|
||
<div class="row"><div>
|
||
<h1>The Inter UI font family</h1>
|
||
<p>
|
||
Inter UI 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="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
|
||
commercial and you charge money for your software. Inter UI 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/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 id="dynamic-metrics"><a href="{{url_root}}dynmetrics/">Dynamic Metrics</a></h2>
|
||
<p class="dynmet-calc">
|
||
Size
|
||
<input id="dynmet-font-size" type="number" value="12"
|
||
><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 UI <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.<br>
|
||
<a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics —></a>
|
||
</p>
|
||
|
||
<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>
|
||
<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 <em>-></em> STO</in><to></to><out>SFO -> STO</out></r>
|
||
<r><in>IIA <em>—></em> OGG</in><to></to><out>IIA —> OGG</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>
|
||
<r><in>11:31,711<em> </em></in><to></to><out class="tnum">11:31,711<em> </em></out></r>
|
||
<r><in>00:40.900<em> </em></in><to></to><out class="tnum">00:40.900<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: Alternate digits (<q title='OpenType feature ID'>ss01</q>)</h3>
|
||
<tablex><t>
|
||
<h><in>Disabled</in><to></to><out>Enabled</out></h>
|
||
<r>
|
||
<in><em>1</em>23<em>4</em>5<em>6</em>78<em>9</em>0</in>
|
||
<to></to><out class="ss01">1234567890</out>
|
||
</r>
|
||
<r><in><em>1</em></in><to></to><out class="ss01">1</out></r>
|
||
<r><in><em>4</em></in><to></to><out class="ss01">4</out></r>
|
||
<r><in><em>6</em></in><to></to><out class="ss01">6</out></r>
|
||
<r><in><em>9</em></in><to></to><out class="ss01">9</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 <em>*</em> 1</in><to></to><out class="case">3 + 9 = 12 * 1</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 class="banner"><a href="glyphs/">Browse all glyphs -></a></h2>
|
||
</div></div>
|
||
|
||
<div class="row-divider"></div>
|
||
|
||
<div class="row"><div>
|
||
<h2><a id="story" href="#story">The story behind Inter UI</a></h2>
|
||
<p>
|
||
Inter UI 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 UI, 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 UI was being developed, it was tested on an internal version of
|
||
<a href="https://www.figma.com/">Figma</a>—where the author of Inter UI 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>
|
||
Inter UI 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/inter/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-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">
|
||
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">
|
||
Can I help with improving Inter UI?
|
||
</li>
|
||
<li class="a">
|
||
Yes you can! Inter UI 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.
|
||
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/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>
|
||
|
||
<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">
|
||
Inter UI 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
|
||
<num>2 990 150</num> 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-contact">
|
||
I've made a cool thing that uses Inter UI, 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>
|
||
|
||
</div></div>
|
||
|
||
|
||
<div class="row"><div>
|
||
— <a href="https://twitter.com/rsms" class="plain">@rsms</a>
|
||
</div></div>
|
||
|
||
<script>
|
||
|
||
// FAQ anchors
|
||
(function(){
|
||
|
||
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
|
||
e.innerText = ''
|
||
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)
|
||
}
|
||
|
||
})();
|
||
|
||
|
||
// dynamic metrics calculator
|
||
(function(){
|
||
|
||
var hiddenTextInput = $('#hidden-text-input')
|
||
var fontSizeEl = $('#dynmet-font-size')
|
||
var trackingEl = $('#dynmet-tracking')
|
||
var unitEl = $('#dynmet-unit')
|
||
|
||
var unitFormatters = [
|
||
['em', 'em', function(fontSize, tracking) {
|
||
return tracking.toFixed(3)
|
||
}],
|
||
['px', 'px', function(fontSize, tracking) {
|
||
return (fontSize * tracking).toFixed(3)
|
||
}],
|
||
['%', 'percent', function(fontSize, tracking) {
|
||
return (tracking * 100).toFixed(1)
|
||
}],
|
||
]
|
||
var unitFormatter = unitFormatters[0][2]
|
||
|
||
function updateTracking() {
|
||
var fontSize = parseFloat(fontSizeEl.value)
|
||
if (isNaN(fontSize) || fontSize < 1) {
|
||
fontSizeEl.value = fontSize = 1
|
||
} else if (fontSize > 999) {
|
||
fontSizeEl.value = fontSize = 999
|
||
}
|
||
var tracking = InterUIDynamicTracking(fontSize)
|
||
trackingEl.value = unitFormatter(fontSize, tracking)
|
||
}
|
||
|
||
function toggleUnit() {
|
||
var unit = unitEl.innerText
|
||
var u, x = -1
|
||
for (var i = 0; i < unitFormatters.length; i++) {
|
||
if (x == -1) {
|
||
u = unitFormatters[i]
|
||
if (u[0] == unit) {
|
||
x = i + 1
|
||
if (x == unitFormatters.length) {
|
||
x = 0
|
||
}
|
||
u = unitFormatters[x]
|
||
}
|
||
}
|
||
trackingEl.classList.remove(unitFormatters[i][1]) // class name
|
||
}
|
||
unit = u[0]
|
||
trackingEl.classList.add(u[1])
|
||
unitFormatter = u[2]
|
||
unitEl.innerText = unit
|
||
updateTracking()
|
||
}
|
||
|
||
function onPointerdownUnit(ev) {
|
||
toggleUnit()
|
||
if (ev) {
|
||
ev.preventDefault()
|
||
ev.stopPropagation()
|
||
}
|
||
}
|
||
|
||
function onPointerdownTracking(ev) {
|
||
if (ev) {
|
||
ev.preventDefault()
|
||
ev.stopPropagation()
|
||
}
|
||
hiddenTextInput.value = trackingEl.value + unitEl.innerText
|
||
hiddenTextInput.select()
|
||
document.execCommand("copy")
|
||
trackingEl.select()
|
||
HUDNotification.show('Copied to clipboard')
|
||
}
|
||
|
||
var passiveListener = { passive: true, capture: false }
|
||
var activeListener = { capture: true }
|
||
|
||
fontSizeEl.addEventListener('input', updateTracking, passiveListener)
|
||
fontSizeEl.addEventListener('change', updateTracking, passiveListener)
|
||
|
||
unitEl.addEventListener('pointerdown', onPointerdownUnit, activeListener)
|
||
unitEl.addEventListener('mousedown', onPointerdownUnit, activeListener)
|
||
|
||
trackingEl.addEventListener('pointerdown', onPointerdownTracking, activeListener)
|
||
trackingEl.addEventListener('mousedown', onPointerdownTracking, activeListener)
|
||
|
||
updateTracking()
|
||
|
||
})();</script>
|