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. 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 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 In return, they should reciprocate that respect in addressing your issue or
suggestion. suggestion.
By contributing work to the Interface font project you agree to have all work By contributing work to the Inter UI font project you agree to have all work
contributed becoming the intellectual property of the Interface font project as 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) described by [SIL Open Font License, Version 1.1](http://scripts.sil.org/OFL)
## Types of contributions this project is looking for ## 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 - 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 - Non-English glyphs are especially needed
- Improvements and corrections to existing glyphs - Improvements and corrections to existing glyphs
@ -154,15 +154,15 @@ Or just specific styles and formats:
$ make Regular BoldItalic_ttf $ 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. E.g.
- `make build/Interface-MediumItalic.eot` - `make build/dist-unhinted/InterUI-MediumItalic.otf`
- `make build/Interface-Bold.woff2` - `make build/dist/InterUI-Bold.woff2`
- `make build/Interface-Regular.ttf` - `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. 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 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. alternate numerics, etc.
- Controls for web-browser text features like `capitalize`, `uppercase`, - Controls for web-browser text features like `capitalize`, `uppercase`,
`lowercase`, etc. `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) ![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 Use the fontinfo.py tool which outputs JSON describing all properties of
one or more font files. one or more font files.
See `misc/fontinfo.py -h` for details. 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 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: 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 src/features.fea src/glyphorder.txt
# UFO -> TTF & OTF (note that UFO deps are defined by generated.make) # 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 $* 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 @true
# build/tmp/ttf -> build (generated.make handles build/tmp/InterfaceTTF/Interface-%.ttf) # build/tmp/ttf -> build (generated.make handles build/tmp/InterUITTF/InterUI-%.ttf)
build/dist-unhinted/Interface-%.ttf: build/tmp/InterfaceTTF/Interface-%.ttf build/dist-unhinted/Inter-UI-%.ttf: build/tmp/InterUITTF/InterUI-%.ttf
@mkdir -p build/dist-unhinted @mkdir -p build/dist-unhinted
cp -a "$<" "$@" cp -a "$<" "$@"
# OTF # 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 @mkdir -p build/dist-unhinted
cp -a "$<" "$@" cp -a "$<" "$@"
@ -37,7 +37,7 @@ build/dist:
@mkdir -p build/dist @mkdir -p build/dist
# autohint # 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 \ ttfautohint \
--hinting-limit=256 \ --hinting-limit=256 \
--hinting-range-min=8 \ --hinting-range-min=8 \
@ -60,29 +60,29 @@ build/%.woff: build/%.ttf
# build/%.eot: build/%.ttf # build/%.eot: build/%.ttf
# ttf2eot "$<" > "$@" # ttf2eot "$<" > "$@"
ZIP_FILE_DIST := build/release/Interface-${VERSION}.zip ZIP_FILE_DIST := build/release/Inter-UI-${VERSION}.zip
ZIP_FILE_DEV := build/release/Interface-${VERSION}-$(shell git rev-parse --short=10 HEAD).zip ZIP_FILE_DEV := build/release/Inter-UI-${VERSION}-$(shell git rev-parse --short=10 HEAD).zip
# zip intermediate # zip intermediate
build/.zip.zip: all build/.zip.zip: all
@rm -rf build/.zip @rm -rf build/.zip
@rm -f build/.zip.zip @rm -f build/.zip.zip
@mkdir -p \ @mkdir -p \
"build/.zip/Interface (web)" \ "build/.zip/Inter UI (web)" \
"build/.zip/Interface (hinted TTF)" \ "build/.zip/Inter UI (hinted TTF)" \
"build/.zip/Interface (TTF)" \ "build/.zip/Inter UI (TTF)" \
"build/.zip/Interface (OTF)" "build/.zip/Inter UI (OTF)"
@cp -a build/dist/*.woff build/dist/*.woff2 "build/.zip/Interface (web)/" @cp -a build/dist/*.woff build/dist/*.woff2 "build/.zip/Inter UI (web)/"
@cp -a build/dist/*.ttf "build/.zip/Interface (hinted TTF)/" @cp -a build/dist/*.ttf "build/.zip/Inter UI (hinted TTF)/"
@cp -a build/dist-unhinted/*.ttf "build/.zip/Interface (TTF)/" @cp -a build/dist-unhinted/*.ttf "build/.zip/Inter UI (TTF)/"
@cp -a build/dist-unhinted/*.otf "build/.zip/Interface (OTF)/" @cp -a build/dist-unhinted/*.otf "build/.zip/Inter UI (OTF)/"
@cp -a misc/doc/install-*.txt "build/.zip/" @cp -a misc/doc/install-*.txt "build/.zip/"
@cp -a LICENSE.txt "build/.zip/" @cp -a LICENSE.txt "build/.zip/"
cd build/.zip && zip -v -X -r "../../build/.zip.zip" * >/dev/null && cd ../.. cd build/.zip && zip -v -X -r "../../build/.zip.zip" * >/dev/null && cd ../..
@rm -rf build/.zip @rm -rf build/.zip
# zip # zip
build/release/Interface-%.zip: build/.zip.zip build/release/Inter-UI-%.zip: build/.zip.zip
@mkdir -p "$(shell dirname "$@")" @mkdir -p "$(shell dirname "$@")"
@mv -f "$<" "$@" @mv -f "$<" "$@"
@echo write "$@" @echo write "$@"
@ -105,7 +105,7 @@ dist: pre_dist zip_dist glyphinfo copy_docs_fonts
@echo "1) Commit & push changes" @echo "1) Commit & push changes"
@echo "" @echo ""
@echo "2) Create new release with ${ZIP_FILE_DIST} at" @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 ""
@echo "3) Bump version in src/fontbuild.cfg and commit" @echo "3) Bump version in src/fontbuild.cfg and commit"
@echo "" @echo ""
@ -117,31 +117,31 @@ copy_docs_fonts:
cp -a build/dist/*.woff build/dist/*.woff2 build/dist-unhinted/*.otf docs/font-files/ cp -a build/dist/*.woff build/dist/*.woff2 build/dist-unhinted/*.otf docs/font-files/
install_ttf: all_ttf install_ttf: all_ttf
@echo "Installing TTF files locally at ~/Library/Fonts/Interface" @echo "Installing TTF files locally at ~/Library/Fonts/Inter UI"
rm -rf ~/Library/Fonts/Interface rm -rf ~/'Library/Fonts/Inter UI'
mkdir -p ~/Library/Fonts/Interface mkdir -p ~/'Library/Fonts/Inter UI'
cp -va build/dist/*.ttf ~/Library/Fonts/Interface cp -va build/dist/*.ttf ~/'Library/Fonts/Inter UI'
install_otf: all_otf install_otf: all_otf
@echo "Installing OTF files locally at ~/Library/Fonts/Interface" @echo "Installing OTF files locally at ~/Library/Fonts/Inter UI"
rm -rf ~/Library/Fonts/Interface rm -rf ~/'Library/Fonts/Inter UI'
mkdir -p ~/Library/Fonts/Interface mkdir -p ~/'Library/Fonts/Inter UI'
cp -va build/dist-unhinted/*.otf ~/Library/Fonts/Interface cp -va build/dist-unhinted/*.otf ~/'Library/Fonts/Inter UI'
install: all install_otf install: all install_otf
glyphinfo: docs/lab/glyphinfo.json docs/glyphs/metrics.json 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 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/Interface-*.ufo > src/glyphorder.txt 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 docs/lab/glyphinfo.json: _local/UnicodeData.txt src/glyphorder.txt misc/gen-glyphinfo.py
misc/gen-glyphinfo.py -ucd _local/UnicodeData.txt \ 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) 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 # Download latest Unicode data
@ -151,6 +151,6 @@ _local/UnicodeData.txt:
http://www.unicode.org/Public/UCD/latest/ucd/UnicodeData.txt http://www.unicode.org/Public/UCD/latest/ucd/UnicodeData.txt
clean: 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 .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) ![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: After downloading the zip from above:
@ -15,7 +15,7 @@ After downloading the zip from above:
## Design ## 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. - 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. - 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 became clear that for anything longer than a short word, it was actually hard to
read the almost monotonically-spaced letters. 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) ![Metrics](docs/res/metrics.png)
@ -62,7 +62,7 @@ Translating between EM units and pixels:
- Rasterized at 22px: 1px = 128 units - Rasterized at 22px: 1px = 128 units
- Rasterized at 44px: 1px = 64 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 ## 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#"> <html lang="en" prefix="og: http://ogp.me/ns#">
<head> <head>
<meta charset="utf-8"> <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 name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:title" content="Repertoire of the Interface font family"> <meta property="og:title" content="Inter UI font family">
<meta property="twitter:title" content="Repertoire of the Interface font family"> <meta property="twitter:title" content="Inter UI font family">
<meta property="description" content="Interface is a new typeface optimized for high legibility on computer screens"> <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="og:description" content="Interface is a new typeface optimized for high legibility on computer screens"> <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="twitter:description" content="Interface is a new typeface optimized for high legibility on computer screens"> <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:card" content="summary">
<meta property="twitter:site" content="@rsms"> <meta property="twitter:site" content="@rsms">
<meta property="twitter:creator" content="@rsms"> <meta property="twitter:creator" content="@rsms">
<meta property="og: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/interface/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:app_id" content="38027689216">
<meta property="fb:admins" content="728642302"> <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:site_name" content="rsms.me">
<meta property="og:type" content="product"> <meta property="og:type" content="product">
<meta property="og:locale" content="en_US" /> <meta property="og:locale" content="en_US" />
<link rel="icon" type="image/png" href="../favicon.ico" /> <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="../index.css" rel="stylesheet">
<link href="glyphs.css" rel="stylesheet"> <link href="glyphs.css" rel="stylesheet">
</head> </head>
@ -3168,10 +3168,10 @@
</div><!--END-SVGS don't remove this comment--> </div><!--END-SVGS don't remove this comment-->
<div class="row intro"><div> <div class="row intro"><div>
<h2 class="back"><a href="../">The Interface font family</a></h2> <h2 class="back"><a href="../">The Inter UI font family</a></h2>
<h1><a href="./">Interface glyphs</a></h1> <h1><a href="./">Inter UI glyphs</a></h1>
<p> <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 You can zoom in and out by pressing
<kbd></kbd><kbd>+</kbd> and <kbd></kbd><kbd>+</kbd> and
<kbd></kbd><kbd></kbd> on your keyboard. <kbd></kbd><kbd></kbd> on your keyboard.

View file

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

View file

@ -2,24 +2,22 @@
<html lang="en" prefix="og: http://ogp.me/ns#"> <html lang="en" prefix="og: http://ogp.me/ns#">
<head> <head>
<meta charset="utf-8"> <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 name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:title" content="Inter UI font family">
<meta property="og:title" content="Interface font family"> <meta property="twitter:title" content="Inter UI font family">
<meta property="twitter:title" content="Interface font family"> <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="description" content="Interface is a new typeface optimized for high legibility on computer screens"> <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="og:description" content="Interface is a new typeface optimized for high legibility on computer screens"> <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<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:card" content="summary">
<meta property="twitter:site" content="@rsms"> <meta property="twitter:site" content="@rsms">
<meta property="twitter:creator" content="@rsms"> <meta property="twitter:creator" content="@rsms">
<meta property="og: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/interface/res/poster.png"> <meta property="twitter:image" content="https://rsms.me/intra/res/poster.png">
<meta property="fb:app_id" content="38027689216"> <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:site_name" content="rsms.me">
<meta property="og:type" content="product"> <meta property="og:type" content="product">
<meta property="og:locale" content="en_US" /> <meta property="og:locale" content="en_US" />
@ -27,17 +25,17 @@
<link rel="icon" type="image/png" href="favicon.ico" /> <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"> <link href="index.css?v=2" rel="stylesheet">
</head> </head>
<body> <body>
<script src="index.js"></script> <script src="index.js"></script>
<div class="row"><div> <div class="row"><div>
<h1>The Interface font family</h1> <h1>The Inter UI font family</h1>
<p> <p>
Interface is a font for highly legible text on computer screens.<br> Inter UI 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> <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> or try it out in the <a href="lab/" class="fat">playground</a>
</p> </p>
</div></div> </div></div>
@ -45,14 +43,14 @@
<div class="row white" style="padding-bottom:0"><div> <div class="row white" style="padding-bottom:0"><div>
<h2><a id="sample" href="#sample">Sample</a></h2> <h2><a id="sample" href="#sample">Sample</a></h2>
<p style="margin-bottom:0"> <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> </p>
</div></div> </div></div>
<div class="row dark"><div> <div class="row dark"><div>
<h2><a id="free" href="#free">How much does it cost?</a></h2> <h2><a id="free" href="#free">How much does it cost?</a></h2>
<p> <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. 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>
@ -61,16 +59,16 @@
<h2><a id="usage" href="#usage">How do I use it?</a></h2> <h2><a id="usage" href="#usage">How do I use it?</a></h2>
<p> <p>
Using the font is as easy as 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>
<p> <p>
You're free to bundle copies of Interface with your software, even if it's You're free to bundle copies of Inter UI with your software, even if it's
commercial and you charge money for your software. Interface can also be used 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: on the web by either hosting the font files yourself or by including this CSS:
</p> </p>
<code>@import url('https://rsms.me/interface/interface.css');</code> <code>@import url('https://rsms.me/inter/inter-ui.css');</code>
<p>Use the following CSS rules to specify the Interface family:</p> <p>Use the following CSS rules to specify the Inter UI family:</p>
<code>font-family: Interface, sans-serif;</code> <code>font-family: 'Inter UI', sans-serif;</code>
</div></div> </div></div>
<div class="row"><div> <div class="row"><div>
@ -172,16 +170,16 @@
<div class="row-divider"></div> <div class="row-divider"></div>
<div class="row"><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> <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 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 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 (Units Per EM), and for a particular target rasterization size (11), it would
be possible to get the best of both sharpness and readability. be possible to get the best of both sharpness and readability.
</p> </p>
<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 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 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 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 The project was rebooted with a different approach, sticking with the
specific UPM, but crafting glyphs and kerning in a way that made for specific UPM, but crafting glyphs and kerning in a way that made for
more variation in the rhythm and smoother vertical and horizontal stems. more variation in the rhythm and smoother vertical and horizontal stems.
As Interface was being developed, it was tested on an internal version of 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 Interface works as a designer—and slowly improved upon based on experience and feedback. <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>&nbsp;</p> <p>&nbsp;</p>
<h2><a id="status" href="#status">Current status &amp; usability</a></h2> <h2><a id="status" href="#status">Current status &amp; usability</a></h2>
<p> <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 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>
<p> <p>
@ -226,34 +224,17 @@
source directory. source directory.
</li> </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"> <li class="q" id="faq-contribute">
Can I help with improving Interface? Can I help with improving Inter UI?
</li> </li>
<li class="a"> <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 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 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 what you'd like to do, some things might be more fun
depending on your technical skills. 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 you can have the biggest impact, how things are setup and how to get
started. started.
</li> </li>
@ -262,7 +243,7 @@
This website claims work started in 2016, but the git repository's log says it started later? This website claims work started in 2016, but the git repository's log says it started later?
</li> </li>
<li class="a"> <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. starting in November 2016, prior to being published on August 22, 2017.
Between November 2016 and August 2017, there were Between November 2016 and August 2017, there were
<num>2&#x2006;990&#x2006;150</num> line edits made across 247 versions. <num>2&#x2006;990&#x2006;150</num> line edits made across 247 versions.
@ -290,7 +271,7 @@
</li> </li>
<li class="q" id="faq-contact"> <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> &nbsp;<dem>or</dem>
</li> </li>
<li class="q"> <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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="icon" type="image/png" href="../favicon.ico" /> <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"> <script type="text/javascript">
const samples = new Map() 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'); @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-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url("fonts/Interface-Regular.woff2") format("woff2"), src: url("fonts/Inter-UI-Regular.woff2") format("woff2"),
url("fonts/Interface-Regular.woff") format("woff"); url("fonts/Inter-UI-Regular.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: url("fonts/Interface-RegularItalic.woff2") format("woff2"), src: url("fonts/Inter-UI-RegularItalic.woff2") format("woff2"),
url("fonts/Interface-RegularItalic.woff") format("woff"); url("fonts/Inter-UI-RegularItalic.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
src: url("fonts/Interface-Medium.woff2") format("woff2"), src: url("fonts/Inter-UI-Medium.woff2") format("woff2"),
url("fonts/Interface-Medium.woff") format("woff"); url("fonts/Inter-UI-Medium.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 500;
src: url("fonts/Interface-MediumItalic.woff2") format("woff2"), src: url("fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
url("fonts/Interface-MediumItalic.woff") format("woff"); url("fonts/Inter-UI-MediumItalic.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: url("fonts/Interface-Bold.woff2") format("woff2"), src: url("fonts/Inter-UI-Bold.woff2") format("woff2"),
url("fonts/Interface-Bold.woff") format("woff"); url("fonts/Inter-UI-Bold.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: url("fonts/Interface-BoldItalic.woff2") format("woff2"), src: url("fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
url("fonts/Interface-BoldItalic.woff") format("woff"); url("fonts/Inter-UI-BoldItalic.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: url("fonts/Interface-Black.woff2") format("woff2"), src: url("fonts/Inter-UI-Black.woff2") format("woff2"),
url("fonts/Interface-Black.woff") format("woff"); url("fonts/Inter-UI-Black.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Interface-VERSION'; font-family: 'Inter-UI-VERSION';
font-style: italic; font-style: italic;
font-weight: 900; font-weight: 900;
src: url("fonts/Interface-BlackItalic.woff2") format("woff2"), src: url("fonts/Inter-UI-BlackItalic.woff2") format("woff2"),
url("fonts/Interface-BlackItalic.woff") format("woff"); url("fonts/Inter-UI-BlackItalic.woff") format("woff");
} }
.interface, .interface input, .interface select { .inter-ui, .inter-ui input, .inter-ui select {
font-family: 'Interface-VERSION', 'Interface', serif !important; font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important;
} }
</style> </style>
@ -1046,11 +1046,11 @@ canvas {
<script type="text/javascript"> <script type="text/javascript">
const fontVersion = Math.round(Date.now()).toString(36) 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 fontCSSTemplate = document.querySelector('#font-css')
const fontCSS = fontCSSTemplate.cloneNode(true) const fontCSS = fontCSSTemplate.cloneNode(true)
fontCSS.innerHTML = fontCSS.innerHTML.replace(/Interface-VERSION/g, fontFamilyName) fontCSS.innerHTML = fontCSS.innerHTML.replace(/Inter-UI-VERSION/g, fontFamilyName)
fontFamilyName += ', Interface' fontFamilyName += ", 'Inter UI'"
fontCSS.setAttribute('id', '') fontCSS.setAttribute('id', '')
fontCSS.setAttribute('type', 'text/css') fontCSS.setAttribute('type', 'text/css')
document.head.appendChild(fontCSS) document.head.appendChild(fontCSS)
@ -1058,7 +1058,7 @@ document.head.appendChild(fontCSS)
</script> </script>
</head> </head>
<body> <body>
<div class="options interface"> <div class="options inter-ui">
<select name="sample"></select> <select name="sample"></select>
<label> <label>
@ -1219,7 +1219,7 @@ document.head.appendChild(fontCSS)
<div class="preview"> <div class="preview">
<samples> <samples>
<sample contenteditable class="primary interface"></sample> <sample contenteditable class="primary inter-ui"></sample>
<sample contenteditable class="secondary"></sample> <sample contenteditable class="secondary"></sample>
</samples> </samples>
@ -1227,7 +1227,7 @@ document.head.appendChild(fontCSS)
<canvas id="renderCanvas" width="120" height="50"></canvas> <canvas id="renderCanvas" width="120" height="50"></canvas>
</div> </div>
<div id="measure" class="interface">Åj</div> <div id="measure" class="inter-ui">Åj</div>
<script type="text/javascript"> <script type="text/javascript">
@ -1422,9 +1422,9 @@ class Vars {
function main() { function main() {
const vars = new Vars(document.location.search) 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'); let secondarySample = document.querySelector('sample.secondary');
secondarySample.innerText = interfaceSample.innerText; secondarySample.innerText = interUISample.innerText;
const renderCanvas = document.querySelector('#renderCanvas') const renderCanvas = document.querySelector('#renderCanvas')
const displayCanvas = document.querySelector('#displayCanvas') const displayCanvas = document.querySelector('#displayCanvas')
@ -1465,12 +1465,12 @@ function main() {
if (typeof sampleText == 'object' && sampleText.toHTML) { if (typeof sampleText == 'object' && sampleText.toHTML) {
const html = sampleText.toHTML() const html = sampleText.toHTML()
interfaceSample.innerHTML = html interUISample.innerHTML = html
secondarySample.innerHTML = html secondarySample.innerHTML = html
} else { } else {
sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '') sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '')
if (sampleText) { if (sampleText) {
interfaceSample.innerText = sampleText interUISample.innerText = sampleText
secondarySample.innerText = sampleText secondarySample.innerText = sampleText
} }
} }
@ -1499,7 +1499,7 @@ function main() {
window.addEventListener('load', measure) window.addEventListener('load', measure)
const cssAffectedElements = [ const cssAffectedElements = [
interfaceSample, interUISample,
secondarySample, secondarySample,
measureDiv measureDiv
].concat(secondaryFontElements).concat(primaryFontElements) ].concat(secondaryFontElements).concat(primaryFontElements)

22
init.sh
View file

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

View file

@ -1,7 +1,7 @@
Installing on macOS: Installing on macOS:
1. Open the "Interface (OTF)" folder 1. Open the "Inter UI (OTF)" folder
2. Select all font files 2. Select all font files
3. Right-click (or ctrl-click) the selected files 3. Right-click (or ctrl-click) the selected files
and choose "Open with..." → "Font Book" and choose "Open with..." → "Font Book"
@ -13,12 +13,12 @@ cancel the installation and instead try the instructions below:
Installing on macOS, manually: Installing on macOS, manually:
1. Copy the "Interface (OTF)" folder 1. Copy the "Inter UI (OTF)" folder
2. Press cmd-shift-G in Finder 2. Press cmd-shift-G in Finder
3. Enter "~/Library/Fonts" into the dialog that shows up and press RETURN. 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. 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: Installing on Windows 10:
1. Open the "Interface (hinted TTF)" folder 1. Open the "Inter UI (hinted TTF)" folder
2. Select all font files 2. Select all font files
3. Right-click the selected files and choose "Install" 3. Right-click the selected files and choose "Install"
@ -9,11 +9,11 @@ Installing on Windows 10:
Installing on Windows 10, manually: Installing on Windows 10, manually:
1. Double-click the downloaded zip file 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 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. 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() # 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() # FeaBuilder(font, featuresFilename + '2').build()

View file

@ -24,7 +24,7 @@ from fontTools import ttLib
from robofab.objects.objectsRF import OpenFont 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, ...], ... } def getTTGlyphList(font): # -> { 'Omega': [2126, ...], ... }

View file

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

View file

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

View file

@ -7,12 +7,12 @@
<key>capHeight</key> <key>capHeight</key>
<integer>2048</integer> <integer>2048</integer>
<key>copyright</key> <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> Glyphs from Roboto: Copyright 2011 Google Inc. All Rights Reserved.</string>
<key>descender</key> <key>descender</key>
<integer>-640</integer> <integer>-640</integer>
<key>familyName</key> <key>familyName</key>
<string>Interface</string> <string>Inter UI</string>
<key>italicAngle</key> <key>italicAngle</key>
<integer>0</integer> <integer>0</integer>
<key>openTypeHeadCreated</key> <key>openTypeHeadCreated</key>

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