mirror of
https://github.com/rsms/inter.git
synced 2024-11-29 06:22:48 +03:00
532 lines
18 KiB
HTML
532 lines
18 KiB
HTML
---
|
||
layout: default
|
||
---
|
||
{%
|
||
|
||
assign release_version = site.data.fontinfo[0].version %}{%
|
||
|
||
capture download_url
|
||
%}https://github.com/rsms/inter/releases/download/v{{ release_version }}/Inter-{{ release_version }}.zip{%
|
||
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" %}{%
|
||
elsif _path == "/index-var.css" %}{%
|
||
assign index_var_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
elsif _path == "/index-var.js" %}{%
|
||
assign index_var_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
endif %}{%
|
||
endfor
|
||
|
||
%}
|
||
<link rel="stylesheet" href="index.css?v={{ index_css_v }}">
|
||
<link rel="stylesheet" href="index-var.css?v={{ index_var_css_v }}">
|
||
<input type="text" id="hidden-text-input">
|
||
|
||
<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>
|
||
|
||
</grid>
|
||
</div></div>
|
||
|
||
|
||
<div class="row"><div>
|
||
<h2><a id="weights" href="#weights">Weights & Styles</a></h2>
|
||
<p>
|
||
There are nine weights, each with italic counterparts,
|
||
making a total of 18 styles.
|
||
</p>
|
||
<img src="res/weights-and-styles.svg" style="opacity:0.88;width:100%;display:block;margin:3em 0 3em 0">
|
||
</div></div>
|
||
|
||
|
||
|
||
<div class="row white variable"><div>
|
||
<h2><a id="variable" href="#variable">Variable</a></h2>
|
||
|
||
<p>
|
||
Inter is offered as both traditional constant font files
|
||
(one per style, e.g. Bold Italic, Medium, etc.) as well as a
|
||
<a href="https://en.wikipedia.org/wiki/Variable_fonts">Variable Font</a>
|
||
file which contains all styles in a much smaller file size.
|
||
Additionally, a variable font is ...variable! You can mix and match weight
|
||
and italic angle as you please, forming theoretically infinite variations.
|
||
</p>
|
||
|
||
<div class="unsupported-message">
|
||
<p>Variable Fonts not supported by this web browser</p>
|
||
</div>
|
||
|
||
<div class="ctrl">
|
||
<div class="ctrlrow">
|
||
<label title="Weight in the range of 100 to 900">
|
||
<span class="label var">Weight:</span>
|
||
<input type="range" value="400" min="100" max="900" name="weight">
|
||
</label>
|
||
<label title="Slant angle in the range of 0° to 10°">
|
||
<span class="label var">Slant:</span>
|
||
<input type="range" value="0" min="0" max="10" step="0.01" name="slant">
|
||
</label>
|
||
<label class="tight">
|
||
<input type="checkbox" name="animate"> Animate weight & slant
|
||
</label>
|
||
<label class="tight">
|
||
<input type="checkbox" name="invert"> Negative
|
||
</label>
|
||
</div>
|
||
<div class="ctrlrow">
|
||
<label title="Font size">
|
||
<span class="label">Size:</span>
|
||
<input type="range" value="96" min="11" max="400" name="size">
|
||
</label>
|
||
<label title="Space between letters">
|
||
<span class="label">Tracking:</span>
|
||
<input type="range" value="0" min="-0.1" max="0.1" step="0.001" name="letterSpacing">
|
||
</label>
|
||
<label>
|
||
<span class="label">Line height:</span>
|
||
<input type="range" value="1.2" min="0.7" max="2" step="0.01" name="lineHeight">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
<div class="row white variable-sample-row">
|
||
<div class="variable-sample" contenteditable spellcheck="false">
|
||
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
|
||
?!()[]{}&*^%$#@~
|
||
</div>
|
||
</div>
|
||
<script src="index-var.js?v={{ index_var_js_v }}"></script>
|
||
<div class="row white"><div>
|
||
<p>
|
||
Variable fonts is a new technology and support is somewhat in flux at
|
||
the time of writing this (fall 2018.)
|
||
<a href="var-test.html">This test</a> can be used to discover
|
||
what a web browser is capable of.
|
||
</p>
|
||
</div></div>
|
||
|
||
|
||
|
||
<div class="row features"><div>
|
||
<h2><a id="features" href="#features">Features</a></h2>
|
||
<p>
|
||
Inter comes with many OpenType features that can be used to
|
||
tailor functionality and aesthetics to your specific needs.
|
||
Some of these features can be combined to form a great number of
|
||
alternative variations.
|
||
</p>
|
||
<boxes class="features">
|
||
{% for f in site.data.feature_samples %}
|
||
<box>
|
||
<h3>{{f.title}} <q title='OpenType feature ID'>{{f.tag}}</q></h3>
|
||
{%
|
||
|
||
if f.description %}
|
||
<p>{{f.description}}</p>
|
||
{% endif %}{%
|
||
|
||
assign feat_tag = f.tag %}{%
|
||
assign has_feature_col = false %}{%
|
||
for s in f.samples %}{%
|
||
if s.feat %}{%
|
||
assign has_feature_col = true %}{%
|
||
break %}{%
|
||
endif %}{%
|
||
endfor
|
||
|
||
%}
|
||
{% if has_feature_col %}
|
||
<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 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 %}
|
||
{%
|
||
|
||
if has_feature_col %}{%
|
||
assign sample = s.sample %}{%
|
||
assign feat_tag = s.feat %}{%
|
||
else %}{%
|
||
assign sample = s %}{%
|
||
endif %}{%
|
||
|
||
assign sample_in = sample | replace: "›", "<em>" | replace: "‹", "</em>" %}{%
|
||
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>
|
||
{% 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>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</grid>
|
||
<p class="example" title="CSS code">
|
||
{% if feat_tag == "calt" %}
|
||
<tt>/* calt is enabled by default */</tt>
|
||
{% else %}
|
||
<tt>font-feature-settings: '{{feat_tag}}' 1</tt>
|
||
{% endif %}
|
||
</p>
|
||
{% if f.footer %}
|
||
<p>{{f.footer}}</p>
|
||
{% endif %}
|
||
</box>
|
||
{% endfor %}
|
||
</boxes>
|
||
|
||
<p>
|
||
Additional features, not highlighted above:
|
||
<q title='OpenType feature ID'>locl</q>,
|
||
<q title='OpenType feature ID'>salt</q>,
|
||
<q title='OpenType feature ID'>aalt</q>,
|
||
<q title='OpenType feature ID'>ccmp</q>,
|
||
<q title='OpenType feature ID'>cpsp</q> and
|
||
<q title='OpenType feature ID'>ordn</q>.
|
||
<br>
|
||
You can explore features in the <a href="lab/">interactive lab</a>.
|
||
</p>
|
||
</div></div>
|
||
|
||
<div class="row white"><div>
|
||
<h2><a id="story" href="#story">The story behind Inter</a></h2>
|
||
<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>
|
||
<grid columns=2 columns-s=1 class="faq">
|
||
|
||
<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/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>
|
||
</c>
|
||
|
||
<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>,
|
||
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 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>
|
||
</c>
|
||
|
||
<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.
|
||
</c>
|
||
|
||
<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.
|
||
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.
|
||
</c>
|
||
|
||
<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
|
||
<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? :—)
|
||
</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>
|
||
|
||
</grid>
|
||
|
||
</div></div>
|
||
|
||
|
||
<div class="row white"><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).replace(/(?:\.000|0+)$/, '')
|
||
}],
|
||
['px', 'px', function(fontSize, tracking) {
|
||
return (fontSize * tracking).toFixed(2).replace(/(?:\.00|0+)$/, '')
|
||
}],
|
||
['%', '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 = InterDynamicTracking(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>
|