Rename family from "Interface" to "Inter UI"

This commit is contained in:
Rasmus Andersson 2017-09-18 15:58:34 -07:00
parent a213c92c25
commit 4fdb4c927e
4471 changed files with 231 additions and 250 deletions

View file

@ -1,6 +1,6 @@
# Contributing to the Interface font project
# Contributing to the Inter UI font project
First off, thank you for considering contributing to Interface.
First off, thank you for considering contributing to Inter UI.
It's people like you that make the Internet such a great place.
Following these guidelines helps to communicate that you respect the time of
@ -8,17 +8,17 @@ the people managing and developing this open source project.
In return, they should reciprocate that respect in addressing your issue or
suggestion.
By contributing work to the Interface font project you agree to have all work
contributed becoming the intellectual property of the Interface font project as
By contributing work to the Inter UI font project you agree to have all work
contributed becoming the intellectual property of the Inter UI font project as
described by [SIL Open Font License, Version 1.1](http://scripts.sil.org/OFL)
## Types of contributions this project is looking for
Interface is still an early product and so there is a lot of fun things to do.
Inter UI is still an early product and so there is a lot of fun things to do.
- More glyphs! There are many placeholder glyphs that need to be replaced with
ones designed in the style of Interface.
ones designed in the style of Inter UI.
- Non-English glyphs are especially needed
- Improvements and corrections to existing glyphs
@ -154,15 +154,15 @@ Or just specific styles and formats:
$ make Regular BoldItalic_ttf
```
You can also specify specific style + file format to `make` through `build/Interface-STYLE.FORMAT`.
You can also specify specific style + file format to `make` through `build/InterUI-STYLE.FORMAT`.
E.g.
- `make build/Interface-MediumItalic.eot`
- `make build/Interface-Bold.woff2`
- `make build/Interface-Regular.ttf`
- `make build/dist-unhinted/InterUI-MediumItalic.otf`
- `make build/dist/InterUI-Bold.woff2`
- `make build/dist/InterUI-Regular.ttf`
- `...`
All resulting font files are written to the `build` directory with `Interface-` as the filename prefix.
All resulting font files are written to the `build` directory with `InterUI-` as the filename prefix.
Note: Making all files takes a considerable amount of time.
It's a CPU and I/O intensive task to compile the fonts and so the build system has been setup to
@ -214,7 +214,7 @@ previewing the font. It's a very useful tool to have when working on the font.
alternate numerics, etc.
- Controls for web-browser text features like `capitalize`, `uppercase`,
`lowercase`, etc.
- Ability to compare Interface side-by-side with other fonts.
- Ability to compare Inter UI side-by-side with other fonts.
![Preview app screenshot](docs/res/preview-app.png)
@ -259,4 +259,4 @@ Run `./init.sh` to update the generated makefile.
Use the fontinfo.py tool which outputs JSON describing all properties of
one or more font files.
See `misc/fontinfo.py -h` for details.
Example use: `misc/fontinfo.py build/dist/Interface-BoldItalic.ttf`
Example use: `misc/fontinfo.py build/dist/InterUI-BoldItalic.ttf`

View file

@ -1,4 +1,4 @@
Copyright (c) 2017 The Interface Project Authors (me@rsms.me)
Copyright (c) 2017 The Inter UI Project Authors (me@rsms.me)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:

View file

@ -17,19 +17,19 @@ res_files := src/fontbuild.cfg src/diacritics.txt src/glyphlist.txt \
src/features.fea src/glyphorder.txt
# UFO -> TTF & OTF (note that UFO deps are defined by generated.make)
build/tmp/InterfaceTTF/Interface-%.ttf: $(res_files)
build/tmp/InterUITTF/InterUI-%.ttf: $(res_files)
misc/ufocompile --otf $*
build/tmp/InterfaceOTF/Interface-%.otf: build/tmp/InterfaceTTF/Interface-%.ttf $(res_files)
build/tmp/InterUIOTF/InterUI-%.otf: build/tmp/InterUITTF/InterUI-%.ttf $(res_files)
@true
# build/tmp/ttf -> build (generated.make handles build/tmp/InterfaceTTF/Interface-%.ttf)
build/dist-unhinted/Interface-%.ttf: build/tmp/InterfaceTTF/Interface-%.ttf
# build/tmp/ttf -> build (generated.make handles build/tmp/InterUITTF/InterUI-%.ttf)
build/dist-unhinted/Inter-UI-%.ttf: build/tmp/InterUITTF/InterUI-%.ttf
@mkdir -p build/dist-unhinted
cp -a "$<" "$@"
# OTF
build/dist-unhinted/Interface-%.otf: build/tmp/InterfaceOTF/Interface-%.otf
build/dist-unhinted/Inter-UI-%.otf: build/tmp/InterUIOTF/InterUI-%.otf
@mkdir -p build/dist-unhinted
cp -a "$<" "$@"
@ -37,7 +37,7 @@ build/dist:
@mkdir -p build/dist
# autohint
build/dist/Interface-%.ttf: build/dist-unhinted/Interface-%.ttf build/dist
build/dist/Inter-UI-%.ttf: build/dist-unhinted/Inter-UI-%.ttf build/dist
ttfautohint \
--hinting-limit=256 \
--hinting-range-min=8 \
@ -60,29 +60,29 @@ build/%.woff: build/%.ttf
# build/%.eot: build/%.ttf
# ttf2eot "$<" > "$@"
ZIP_FILE_DIST := build/release/Interface-${VERSION}.zip
ZIP_FILE_DEV := build/release/Interface-${VERSION}-$(shell git rev-parse --short=10 HEAD).zip
ZIP_FILE_DIST := build/release/Inter-UI-${VERSION}.zip
ZIP_FILE_DEV := build/release/Inter-UI-${VERSION}-$(shell git rev-parse --short=10 HEAD).zip
# zip intermediate
build/.zip.zip: all
@rm -rf build/.zip
@rm -f build/.zip.zip
@mkdir -p \
"build/.zip/Interface (web)" \
"build/.zip/Interface (hinted TTF)" \
"build/.zip/Interface (TTF)" \
"build/.zip/Interface (OTF)"
@cp -a build/dist/*.woff build/dist/*.woff2 "build/.zip/Interface (web)/"
@cp -a build/dist/*.ttf "build/.zip/Interface (hinted TTF)/"
@cp -a build/dist-unhinted/*.ttf "build/.zip/Interface (TTF)/"
@cp -a build/dist-unhinted/*.otf "build/.zip/Interface (OTF)/"
"build/.zip/Inter UI (web)" \
"build/.zip/Inter UI (hinted TTF)" \
"build/.zip/Inter UI (TTF)" \
"build/.zip/Inter UI (OTF)"
@cp -a build/dist/*.woff build/dist/*.woff2 "build/.zip/Inter UI (web)/"
@cp -a build/dist/*.ttf "build/.zip/Inter UI (hinted TTF)/"
@cp -a build/dist-unhinted/*.ttf "build/.zip/Inter UI (TTF)/"
@cp -a build/dist-unhinted/*.otf "build/.zip/Inter UI (OTF)/"
@cp -a misc/doc/install-*.txt "build/.zip/"
@cp -a LICENSE.txt "build/.zip/"
cd build/.zip && zip -v -X -r "../../build/.zip.zip" * >/dev/null && cd ../..
@rm -rf build/.zip
# zip
build/release/Interface-%.zip: build/.zip.zip
build/release/Inter-UI-%.zip: build/.zip.zip
@mkdir -p "$(shell dirname "$@")"
@mv -f "$<" "$@"
@echo write "$@"
@ -105,7 +105,7 @@ dist: pre_dist zip_dist glyphinfo copy_docs_fonts
@echo "1) Commit & push changes"
@echo ""
@echo "2) Create new release with ${ZIP_FILE_DIST} at"
@echo " https://github.com/rsms/interface/releases/new?tag=v${VERSION}"
@echo " https://github.com/rsms/inter/releases/new?tag=v${VERSION}"
@echo ""
@echo "3) Bump version in src/fontbuild.cfg and commit"
@echo ""
@ -117,31 +117,31 @@ copy_docs_fonts:
cp -a build/dist/*.woff build/dist/*.woff2 build/dist-unhinted/*.otf docs/font-files/
install_ttf: all_ttf
@echo "Installing TTF files locally at ~/Library/Fonts/Interface"
rm -rf ~/Library/Fonts/Interface
mkdir -p ~/Library/Fonts/Interface
cp -va build/dist/*.ttf ~/Library/Fonts/Interface
@echo "Installing TTF files locally at ~/Library/Fonts/Inter UI"
rm -rf ~/'Library/Fonts/Inter UI'
mkdir -p ~/'Library/Fonts/Inter UI'
cp -va build/dist/*.ttf ~/'Library/Fonts/Inter UI'
install_otf: all_otf
@echo "Installing OTF files locally at ~/Library/Fonts/Interface"
rm -rf ~/Library/Fonts/Interface
mkdir -p ~/Library/Fonts/Interface
cp -va build/dist-unhinted/*.otf ~/Library/Fonts/Interface
@echo "Installing OTF files locally at ~/Library/Fonts/Inter UI"
rm -rf ~/'Library/Fonts/Inter UI'
mkdir -p ~/'Library/Fonts/Inter UI'
cp -va build/dist-unhinted/*.otf ~/'Library/Fonts/Inter UI'
install: all install_otf
glyphinfo: docs/lab/glyphinfo.json docs/glyphs/metrics.json
src/glyphorder.txt: src/Interface-Regular.ufo/lib.plist src/Interface-Black.ufo/lib.plist src/diacritics.txt misc/gen-glyphorder.py
misc/gen-glyphorder.py src/Interface-*.ufo > src/glyphorder.txt
src/glyphorder.txt: src/Inter-UI-Regular.ufo/lib.plist src/Inter-UI-Black.ufo/lib.plist src/diacritics.txt misc/gen-glyphorder.py
misc/gen-glyphorder.py src/Inter-UI-*.ufo > src/glyphorder.txt
docs/lab/glyphinfo.json: _local/UnicodeData.txt src/glyphorder.txt misc/gen-glyphinfo.py
misc/gen-glyphinfo.py -ucd _local/UnicodeData.txt \
src/Interface-*.ufo > docs/lab/glyphinfo.json
src/Inter-UI-*.ufo > docs/lab/glyphinfo.json
docs/glyphs/metrics.json: src/glyphorder.txt misc/gen-metrics-and-svgs.py $(Regular_ufo_d)
misc/gen-metrics-and-svgs.py -f src/Interface-Regular.ufo
misc/gen-metrics-and-svgs.py -f src/Inter-UI-Regular.ufo
# Download latest Unicode data
@ -151,6 +151,6 @@ _local/UnicodeData.txt:
http://www.unicode.org/Public/UCD/latest/ucd/UnicodeData.txt
clean:
rm -vrf build/tmp/* build/dist/Interface-*.*
rm -vrf build/tmp/* build/dist/Inter-UI-*.*
.PHONY: all web clean install install_otf install_ttf deploy zip zip_dist pre_dist dist glyphinfo copy_docs_fonts

View file

@ -1,10 +1,10 @@
# Interface
# Inter UI
Interface is a typeface specially designed for user interfaces, with excellent legibility at small sizes.
Inter UI is a typeface specially designed for user interfaces.
![Sample](docs/res/sample.png)
### [⬇︎ Download the latest release](https://github.com/rsms/interface/releases)
### [⬇︎ Download the latest release](https://github.com/rsms/inter/releases)
After downloading the zip from above:
@ -15,7 +15,7 @@ After downloading the zip from above:
## Design
Interface is similar to Roboto, San Francisco, Akkurat, Asap, Lucida Grande and other "UI" typefaces. Some trade-offs were made in order to make this typeface work really well at small sizes:
Inter UI is similar to Roboto, San Francisco, Akkurat, Asap, Lucida Grande and other "UI" typefaces. Some trade-offs were made in order to make this typeface work really well at small sizes:
- Currently not suitable for very large sizes because of some small-scale glyph optimizations (like "pits" and "traps") that help rasterization at small sizes but stand out and interfere at large sizes.
- Rasterized at sizes below 12px, some stems—like the horizontal center of "E", "F", or vertical center of "m"—are drawn with two semi-opaque pixels instead of one solid. This is because we "prioritize" (optimize for) higher-density rasterizations. If we move these stems to an off-center position—so that they can be drawn sharply at e.g. 11px—text will be less legible at higher resolutions.
@ -42,7 +42,7 @@ However, as the project progressed and the typeface was put into use, it quickly
became clear that for anything longer than a short word, it was actually hard to
read the almost monotonically-spaced letters.
A second major revision was create where the previously-strict rule of geometry being even multiples of 256 was relaxed and now the rule is "try to stick with 128x, if you can't, stick with 64x and if you can't do that either, never go below 16x." This means that Interface is now much more variable in pace than it used to be, making it work better at higher resolutions and work much better in longer text, but losing some contrast and sharpness at small sizes.
A second major revision was create where the previously-strict rule of geometry being even multiples of 256 was relaxed and now the rule is "try to stick with 128x, if you can't, stick with 64x and if you can't do that either, never go below 16x." This means that Inter UI is now much more variable in pace than it used to be, making it work better at higher resolutions and work much better in longer text, but losing some contrast and sharpness at small sizes.
![Metrics](docs/res/metrics.png)
@ -62,7 +62,7 @@ Translating between EM units and pixels:
- Rasterized at 22px: 1px = 128 units
- Rasterized at 44px: 1px = 64 units
There's a Figma workspace for glyphs, with configured metrics: ["Interface glyphs"](https://www.figma.com/file/RtScFU5NETY3j9E0yOmnW4gv/Interface-glyphs)
There's a Figma workspace for glyphs, with configured metrics: ["Inter UI glyphs"](https://www.figma.com/file/RtScFU5NETY3j9E0yOmnW4gv/)
## See also

View file

@ -1 +1 @@
This directory is published as a website by Github at [https://rsms.me/interface](https://rsms.me/interface/)
This directory is published as a website by Github at [https://rsms.me/inter](https://rsms.me/inter/)

View file

@ -2,32 +2,32 @@
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>Repertoire Interface font family</title>
<title>Repertoire Inter UI 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="Repertoire of the Interface font family">
<meta property="twitter:title" content="Repertoire of the 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="og:title" content="Inter UI font family">
<meta property="twitter:title" content="Inter UI font family">
<meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<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="og:image" content="https://rsms.me/inter/res/poster.png">
<meta property="twitter:image" content="https://rsms.me/inter/res/poster.png">
<meta property="fb:app_id" content="38027689216">
<meta property="fb:admins" content="728642302">
<meta property="og:url" content="https://rsms.me/interface/">
<meta property="og:url" content="https://rsms.me/inter/">
<meta property="og:site_name" content="rsms.me">
<meta property="og:type" content="product">
<meta property="og:locale" content="en_US" />
<link rel="icon" type="image/png" href="../favicon.ico" />
<link href="../interface.css" rel="stylesheet">
<link href="../inter-ui.css" rel="stylesheet">
<link href="../index.css" rel="stylesheet">
<link href="glyphs.css" rel="stylesheet">
</head>
@ -3168,10 +3168,10 @@
</div><!--END-SVGS don't remove this comment-->
<div class="row intro"><div>
<h2 class="back"><a href="../">The Interface font family</a></h2>
<h1><a href="./">Interface glyphs</a></h1>
<h2 class="back"><a href="../">The Inter UI font family</a></h2>
<h1><a href="./">Inter UI glyphs</a></h1>
<p>
This shows the complete set of glyphs in Interface Regular.
This shows the complete set of glyphs in Inter UI Regular.
You can zoom in and out by pressing
<kbd></kbd><kbd>+</kbd> and
<kbd></kbd><kbd></kbd> on your keyboard.

View file

@ -3,7 +3,7 @@ html { }
body {
background-color: #f4f4f4;
color: #414141;
font: 16px/22px Interface, sans-serif;
font: 16px/22px 'Inter UI', sans-serif;
letter-spacing: -0.1px;
font-weight: 400;
padding-bottom: 30px;

View file

@ -2,24 +2,22 @@
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>Interface font family</title>
<title>Inter UI 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="og:title" content="Inter UI font family">
<meta property="twitter:title" content="Inter UI font family">
<meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<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="og:image" content="https://rsms.me/intra/res/poster.png">
<meta property="twitter:image" content="https://rsms.me/intra/res/poster.png">
<meta property="fb:app_id" content="38027689216">
<meta property="og:url" content="https://rsms.me/interface/">
<meta property="og:url" content="https://rsms.me/intra/">
<meta property="og:site_name" content="rsms.me">
<meta property="og:type" content="product">
<meta property="og:locale" content="en_US" />
@ -27,17 +25,17 @@
<link rel="icon" type="image/png" href="favicon.ico" />
<link href="interface.css?v=2" rel="stylesheet">
<link href="inter-ui.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>
<h1>The Inter UI 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>
Inter UI is a font for highly legible text on computer screens.<br>
<a class="fat" href="https://github.com/rsms/inter/releases/latest/">Download the latest release</a>
or try it out in the <a href="lab/" class="fat">playground</a>
</p>
</div></div>
@ -45,14 +43,14 @@
<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>
<a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" 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.
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>
@ -61,16 +59,16 @@
<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 &amp; installing</a> locally on your computer.
<a href="https://github.com/rsms/inter/releases/latest/">download &amp; 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
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/interface/interface.css');</code>
<p>Use the following CSS rules to specify the Interface family:</p>
<code>font-family: Interface, sans-serif;</code>
<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>
</div></div>
<div class="row"><div>
@ -172,16 +170,16 @@
<div class="row-divider"></div>
<div class="row"><div>
<h2><a id="story" href="#story">The story behind Interface</a></h2>
<h2><a id="story" href="#story">The story behind Inter UI</a></h2>
<p>
Interface started out in late 2016 as an experiment to build a perfectly
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 Interface, it dawned
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
@ -193,17 +191,17 @@
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.
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>&nbsp;</p>
<h2><a id="status" href="#status">Current status &amp; usability</a></h2>
<p>
Interface works great for English-language text, and pretty well for other
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/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>
<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>
@ -226,34 +224,17 @@
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 sometimes 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?
Can I help with improving Inter UI?
</li>
<li class="a">
Yes you can! Interface is an open-source project, meaning the source
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/interface">are freely available</a> to improve upon.
<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/interface/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where
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>
@ -262,7 +243,7 @@
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
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&#x2006;990&#x2006;150</num> line edits made across 247 versions.
@ -290,7 +271,7 @@
</li>
<li class="q" id="faq-contact">
I've made a cool thing that uses Interface, can I share it with you?
I've made a cool thing that uses Inter UI, can I share it with you?
&nbsp;<dem>or</dem>
</li>
<li class="q">

59
docs/inter-ui.css Normal file
View file

@ -0,0 +1,59 @@
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 400;
src: url("font-files/Inter-UI-Regular.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-Regular.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 400;
src: url("font-files/Inter-UI-RegularItalic.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-RegularItalic.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 500;
src: url("font-files/Inter-UI-Medium.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-Medium.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 500;
src: url("font-files/Inter-UI-MediumItalic.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-MediumItalic.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 700;
src: url("font-files/Inter-UI-Bold.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-Bold.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 700;
src: url("font-files/Inter-UI-BoldItalic.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-BoldItalic.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 900;
src: url("font-files/Inter-UI-Black.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-Black.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 900;
src: url("font-files/Inter-UI-BlackItalic.woff2?v=1.8") format("woff2"),
url("font-files/Inter-UI-BlackItalic.woff?v=1.8") format("woff");
}

View file

@ -1,59 +0,0 @@
@font-face {
font-family: 'Interface';
font-style: normal;
font-weight: 400;
src: url("font-files/Interface-Regular.woff2?v=1.8") format("woff2"),
url("font-files/Interface-Regular.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Interface';
font-style: italic;
font-weight: 400;
src: url("font-files/Interface-RegularItalic.woff2?v=1.8") format("woff2"),
url("font-files/Interface-RegularItalic.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Interface';
font-style: normal;
font-weight: 500;
src: url("font-files/Interface-Medium.woff2?v=1.8") format("woff2"),
url("font-files/Interface-Medium.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Interface';
font-style: italic;
font-weight: 500;
src: url("font-files/Interface-MediumItalic.woff2?v=1.8") format("woff2"),
url("font-files/Interface-MediumItalic.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Interface';
font-style: normal;
font-weight: 700;
src: url("font-files/Interface-Bold.woff2?v=1.8") format("woff2"),
url("font-files/Interface-Bold.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Interface';
font-style: italic;
font-weight: 700;
src: url("font-files/Interface-BoldItalic.woff2?v=1.8") format("woff2"),
url("font-files/Interface-BoldItalic.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Interface';
font-style: normal;
font-weight: 900;
src: url("font-files/Interface-Black.woff2?v=1.8") format("woff2"),
url("font-files/Interface-Black.woff?v=1.8") format("woff");
}
@font-face {
font-family: 'Interface';
font-style: italic;
font-weight: 900;
src: url("font-files/Interface-BlackItalic.woff2?v=1.8") format("woff2"),
url("font-files/Interface-BlackItalic.woff?v=1.8") format("woff");
}

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="../favicon.ico" />
<link href="../interface.css" rel="stylesheet">
<link href="../inter-ui.css" rel="stylesheet">
<script type="text/javascript">
const samples = new Map()
@ -700,67 +700,67 @@ for (const ch of uniqueChars) {
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 400;
src: url("fonts/Interface-Regular.woff2") format("woff2"),
url("fonts/Interface-Regular.woff") format("woff");
src: url("fonts/Inter-UI-Regular.woff2") format("woff2"),
url("fonts/Inter-UI-Regular.woff") format("woff");
}
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 400;
src: url("fonts/Interface-RegularItalic.woff2") format("woff2"),
url("fonts/Interface-RegularItalic.woff") format("woff");
src: url("fonts/Inter-UI-RegularItalic.woff2") format("woff2"),
url("fonts/Inter-UI-RegularItalic.woff") format("woff");
}
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 500;
src: url("fonts/Interface-Medium.woff2") format("woff2"),
url("fonts/Interface-Medium.woff") format("woff");
src: url("fonts/Inter-UI-Medium.woff2") format("woff2"),
url("fonts/Inter-UI-Medium.woff") format("woff");
}
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 500;
src: url("fonts/Interface-MediumItalic.woff2") format("woff2"),
url("fonts/Interface-MediumItalic.woff") format("woff");
src: url("fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
url("fonts/Inter-UI-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 700;
src: url("fonts/Interface-Bold.woff2") format("woff2"),
url("fonts/Interface-Bold.woff") format("woff");
src: url("fonts/Inter-UI-Bold.woff2") format("woff2"),
url("fonts/Inter-UI-Bold.woff") format("woff");
}
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 700;
src: url("fonts/Interface-BoldItalic.woff2") format("woff2"),
url("fonts/Interface-BoldItalic.woff") format("woff");
src: url("fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
url("fonts/Inter-UI-BoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 900;
src: url("fonts/Interface-Black.woff2") format("woff2"),
url("fonts/Interface-Black.woff") format("woff");
src: url("fonts/Inter-UI-Black.woff2") format("woff2"),
url("fonts/Inter-UI-Black.woff") format("woff");
}
@font-face {
font-family: 'Interface-VERSION';
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 900;
src: url("fonts/Interface-BlackItalic.woff2") format("woff2"),
url("fonts/Interface-BlackItalic.woff") format("woff");
src: url("fonts/Inter-UI-BlackItalic.woff2") format("woff2"),
url("fonts/Inter-UI-BlackItalic.woff") format("woff");
}
.interface, .interface input, .interface select {
font-family: 'Interface-VERSION', 'Interface', serif !important;
.inter-ui, .inter-ui input, .inter-ui select {
font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important;
}
</style>
@ -1046,11 +1046,11 @@ canvas {
<script type="text/javascript">
const fontVersion = Math.round(Date.now()).toString(36)
let fontFamilyName = 'Interface-v' + fontVersion
let fontFamilyName = 'Inter-UI-v' + fontVersion
const fontCSSTemplate = document.querySelector('#font-css')
const fontCSS = fontCSSTemplate.cloneNode(true)
fontCSS.innerHTML = fontCSS.innerHTML.replace(/Interface-VERSION/g, fontFamilyName)
fontFamilyName += ', Interface'
fontCSS.innerHTML = fontCSS.innerHTML.replace(/Inter-UI-VERSION/g, fontFamilyName)
fontFamilyName += ", 'Inter UI'"
fontCSS.setAttribute('id', '')
fontCSS.setAttribute('type', 'text/css')
document.head.appendChild(fontCSS)
@ -1058,7 +1058,7 @@ document.head.appendChild(fontCSS)
</script>
</head>
<body>
<div class="options interface">
<div class="options inter-ui">
<select name="sample"></select>
<label>
@ -1219,7 +1219,7 @@ document.head.appendChild(fontCSS)
<div class="preview">
<samples>
<sample contenteditable class="primary interface"></sample>
<sample contenteditable class="primary inter-ui"></sample>
<sample contenteditable class="secondary"></sample>
</samples>
@ -1227,7 +1227,7 @@ document.head.appendChild(fontCSS)
<canvas id="renderCanvas" width="120" height="50"></canvas>
</div>
<div id="measure" class="interface">Åj</div>
<div id="measure" class="inter-ui">Åj</div>
<script type="text/javascript">
@ -1422,9 +1422,9 @@ class Vars {
function main() {
const vars = new Vars(document.location.search)
let interfaceSample = document.querySelector('sample.interface');
let interUISample = document.querySelector('sample.inter-ui');
let secondarySample = document.querySelector('sample.secondary');
secondarySample.innerText = interfaceSample.innerText;
secondarySample.innerText = interUISample.innerText;
const renderCanvas = document.querySelector('#renderCanvas')
const displayCanvas = document.querySelector('#displayCanvas')
@ -1465,12 +1465,12 @@ function main() {
if (typeof sampleText == 'object' && sampleText.toHTML) {
const html = sampleText.toHTML()
interfaceSample.innerHTML = html
interUISample.innerHTML = html
secondarySample.innerHTML = html
} else {
sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '')
if (sampleText) {
interfaceSample.innerText = sampleText
interUISample.innerText = sampleText
secondarySample.innerText = sampleText
}
}
@ -1499,7 +1499,7 @@ function main() {
window.addEventListener('load', measure)
const cssAffectedElements = [
interfaceSample,
interUISample,
secondarySample,
measureDiv
].concat(secondaryFontElements).concat(primaryFontElements)

22
init.sh
View file

@ -209,7 +209,7 @@ else
if $NEED_GENERATE; then
break
fi
if has_newer "src/Interface-${style}.ufo" "$GEN_MAKE_FILE"; then
if has_newer "src/Inter-UI-${style}.ufo" "$GEN_MAKE_FILE"; then
NEED_GENERATE=true
fi
done
@ -224,9 +224,9 @@ else
for style in "${master_styles[@]}"; do
all_styles+=( $style )
echo "${style}_ufo_d := " \
"\$(wildcard src/Interface-${style}.ufo/* src/Interface-${style}.ufo/*/*)" >> "$GEN_MAKE_FILE"
echo "$BUILD_TMP_DIR/InterfaceTTF/Interface-${style}.ttf: \$(${style}_ufo_d)" >> "$GEN_MAKE_FILE"
echo "$BUILD_TMP_DIR/InterfaceOTF/Interface-${style}.otf: \$(${style}_ufo_d)" >> "$GEN_MAKE_FILE"
"\$(wildcard src/Inter-UI-${style}.ufo/* src/Inter-UI-${style}.ufo/*/*)" >> "$GEN_MAKE_FILE"
echo "$BUILD_TMP_DIR/InterUITTF/InterUI-${style}.ttf: \$(${style}_ufo_d)" >> "$GEN_MAKE_FILE"
echo "$BUILD_TMP_DIR/InterUIOTF/InterUI-${style}.otf: \$(${style}_ufo_d)" >> "$GEN_MAKE_FILE"
done
echo -n "all_ufo:" >> "$GEN_MAKE_FILE"
@ -240,13 +240,13 @@ else
dependent_styles=$(echo "${e#*:}" | xargs)
all_styles+=( $style )
echo -n "$BUILD_TMP_DIR/InterfaceTTF/Interface-${style}.ttf:" >> "$GEN_MAKE_FILE"
echo -n "$BUILD_TMP_DIR/InterUITTF/InterUI-${style}.ttf:" >> "$GEN_MAKE_FILE"
for depstyle in $dependent_styles; do
echo -n " \$(${depstyle}_ufo_d)" >> "$GEN_MAKE_FILE"
done
echo "" >> "$GEN_MAKE_FILE"
echo -n "$BUILD_TMP_DIR/InterfaceOTF/Interface-${style}.otf:" >> "$GEN_MAKE_FILE"
echo -n "$BUILD_TMP_DIR/InterUIOTF/InterUI-${style}.otf:" >> "$GEN_MAKE_FILE"
for depstyle in $dependent_styles; do
echo -n " \$(${depstyle}_ufo_d)" >> "$GEN_MAKE_FILE"
done
@ -255,19 +255,19 @@ else
# STYLE and STYLE_ttf targets
for style in "${all_styles[@]}"; do
echo "${style}_ttf: $DIST_DIR/Interface-${style}.ttf" >> "$GEN_MAKE_FILE"
echo "${style}_otf: $DIST_DIR-unhinted/Interface-${style}.otf" >> "$GEN_MAKE_FILE"
echo "${style}_ttf_unhinted: $DIST_DIR-unhinted/Interface-${style}.ttf" >> "$GEN_MAKE_FILE"
echo "${style}_ttf: $DIST_DIR/Inter-UI-${style}.ttf" >> "$GEN_MAKE_FILE"
echo "${style}_otf: $DIST_DIR-unhinted/Inter-UI-${style}.otf" >> "$GEN_MAKE_FILE"
echo "${style}_ttf_unhinted: $DIST_DIR-unhinted/Inter-UI-${style}.ttf" >> "$GEN_MAKE_FILE"
echo -n "${style}: ${style}_otf" >> "$GEN_MAKE_FILE"
for format in "${web_formats[@]}"; do
echo -n " $DIST_DIR/Interface-${style}.${format}" >> "$GEN_MAKE_FILE"
echo -n " $DIST_DIR/Inter-UI-${style}.${format}" >> "$GEN_MAKE_FILE"
done
echo "" >> "$GEN_MAKE_FILE"
echo -n "${style}_unhinted: ${style}_otf" >> "$GEN_MAKE_FILE"
for format in "${web_formats[@]}"; do
echo -n " $DIST_DIR-unhinted/Interface-${style}.${format}" >> "$GEN_MAKE_FILE"
echo -n " $DIST_DIR-unhinted/Inter-UI-${style}.${format}" >> "$GEN_MAKE_FILE"
done
echo "" >> "$GEN_MAKE_FILE"
done

View file

@ -1,7 +1,7 @@
Installing on macOS:
1. Open the "Interface (OTF)" folder
1. Open the "Inter UI (OTF)" folder
2. Select all font files
3. Right-click (or ctrl-click) the selected files
and choose "Open with..." → "Font Book"
@ -13,12 +13,12 @@ cancel the installation and instead try the instructions below:
Installing on macOS, manually:
1. Copy the "Interface (OTF)" folder
1. Copy the "Inter UI (OTF)" folder
2. Press cmd-shift-G in Finder
3. Enter "~/Library/Fonts" into the dialog that shows up and press RETURN.
4. Paste the "Interface (OTF)" folder.
4. Paste the "Inter UI (OTF)" folder.
If you have a previous installation of Interface, you should make sure to
If you have a previous installation of Inter UI, you should make sure to
remove those fonts files before installing new ones.
See https://github.com/rsms/interface for more information
See https://github.com/rsms/inter for more information

View file

@ -1,7 +1,7 @@
Installing on Windows 10:
1. Open the "Interface (hinted TTF)" folder
1. Open the "Inter UI (hinted TTF)" folder
2. Select all font files
3. Right-click the selected files and choose "Install"
@ -9,11 +9,11 @@ Installing on Windows 10:
Installing on Windows 10, manually:
1. Double-click the downloaded zip file
2. Copy the "Interface (hinted TTF)" folder
2. Copy the "Inter UI (hinted TTF)" folder
3. Press Win-Q on your keyboard, then type "fonts" and hit ENTER
4. Paste the "Interface (hinted TTF)" folder.
4. Paste the "Inter UI (hinted TTF)" folder.
If you have a previous installation of Interface, you should make sure
If you have a previous installation of Inter UI, you should make sure
to remove those fonts files before installing new ones.
See https://github.com/rsms/interface for more information
See https://github.com/rsms/inter for more information

View file

@ -314,7 +314,7 @@ def main():
# FeaParser(featuresFilename + '2', allNames).parse()
# font = TTFont('build/dist-unhinted/Interface-Regular.otf')
# font = TTFont('build/dist-unhinted/Inter-UI-Regular.otf')
# FeaBuilder(font, featuresFilename + '2').build()

View file

@ -24,7 +24,7 @@ from fontTools import ttLib
from robofab.objects.objectsRF import OpenFont
srcFontPaths = ['src/Interface-Regular.ufo', 'src/Interface-Bold.ufo']
srcFontPaths = ['src/Inter-UI-Regular.ufo', 'src/Inter-UI-Bold.ufo']
def getTTGlyphList(font): # -> { 'Omega': [2126, ...], ... }

View file

@ -13,7 +13,7 @@ from fontbuild.mix import Master
from fontbuild.mix import Mix
FAMILYNAME = "Interface"
FAMILYNAME = "Inter UI"
BASEDIR = os.path.abspath(os.path.join(os.path.dirname(__file__), os.pardir))
def extractSpecializedGlyphs(masterFont):
@ -90,7 +90,7 @@ def main():
buildTag = readVersionControlTag(BASEDIR)
# Since we reference a shared feature file, copy it to build dir so includes works
ufoTmpDir = os.path.join(args.out, 'InterfaceUFO')
ufoTmpDir = os.path.join(args.out, 'InterUIUFO')
try:
os.makedirs(ufoTmpDir)
except:
@ -101,7 +101,7 @@ def main():
# Load masters
print('loading master: Regular')
rg = Master("%s/src/Interface-Regular.ufo" % BASEDIR)
rg = Master("%s/src/Inter-UI-Regular.ufo" % BASEDIR)
bl = None
if ALL \
@ -109,7 +109,7 @@ def main():
or 'bold' in styles or 'bolditalic' in styles \
or 'medium' in styles or 'mediumitalic' in styles:
print('loading master: Black')
bl = Master("%s/src/Interface-Black.ufo" % BASEDIR)
bl = Master("%s/src/Inter-UI-Black.ufo" % BASEDIR)
glyphSpecializations = extractSpecializedGlyphs(rg)

View file

@ -1,7 +1,7 @@
#!/usr/bin/env python
# encoding: utf8
#
# Updates the "?v=x" in docs/interface.css
# Updates the "?v=x" in docs/inter-ui.css
#
from __future__ import print_function
import os, sys, re
@ -18,7 +18,7 @@ def main():
regex = re.compile(r'(url\("[^"]+?v=)([^"]+)("\))')
cssFileName = os.path.join(rootDir, 'docs', 'interface.css')
cssFileName = os.path.join(rootDir, 'docs', 'inter-ui.css')
s = ''
with open(cssFileName, 'r') as f:

View file

@ -7,12 +7,12 @@
<key>capHeight</key>
<integer>2048</integer>
<key>copyright</key>
<string>Original glyphs: Copyright (c) 2017 The Interface Project Authors.
<string>Original glyphs: Copyright (c) 2017 The Inter UI Project Authors.
Glyphs from Roboto: Copyright 2011 Google Inc. All Rights Reserved.</string>
<key>descender</key>
<integer>-640</integer>
<key>familyName</key>
<string>Interface</string>
<string>Inter UI</string>
<key>italicAngle</key>
<integer>0</integer>
<key>openTypeHeadCreated</key>

Some files were not shown because too many files have changed in this diff Show more