diff options
| author | Rasmus Andersson <rasmus@notion.se> | 2017-08-22 10:05:20 +0300 |
|---|---|---|
| committer | Rasmus Andersson <rasmus@notion.se> | 2017-08-22 12:23:08 +0300 |
| commit | 3b1fffade1473f20f2558733fbd218f4580fc7c3 (patch) | |
| tree | ea4f80b43b08744d493bb86ab646444ec04ddc7f /docs/index.html | |
| download | inter-3b1fffade1473f20f2558733fbd218f4580fc7c3.tar.xz | |
Initial public commitv1.0
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 000000000..f247422c2 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,237 @@ +<!DOCTYPE HTML> +<html lang="en" prefix="og: http://ogp.me/ns#"> + <head> + <meta charset="utf-8"> + <title>Interface font family</title> + + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + + <meta name="description" content="Interface is a new typeface optimized for high legibility on computer screens"> + <meta name="og:description" content="Interface is a new typeface optimized for high legibility on computer screens"> + <meta name="twitter:description" content="Interface is a new typeface optimized for high legibility on computer screens"> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@rsms"> + <meta name="twitter:creator" content="@rsms"> + <meta property="og:image" content="https://rsms.me/interface/res/poster.png"> + <meta name="twitter:image" content="https://rsms.me/interface/res/poster.png"> + + <link href="interface.css" rel="stylesheet"> + <style type="text/css"> + +* { margin:0; padding:0; } +html { } +body { + background-color: #f4f4f4; + color: #414141; + font: 16px/22px Interface, sans-serif; + letter-spacing:-0.1px; + font-weight: 400; /*300=light, 400=regular, 500=medium, 600=semibold*/ + padding-bottom: 30px; +} + +a { + color: inherit; + text-decoration: inherit; + background-image: + linear-gradient(to bottom, + rgba(0,0,0,.6) 50%, + rgba(0,0,0,0) 50%); + background-repeat: repeat-x; + background-size: 2px .1em; + background-position: 0 1.155em; + text-shadow: + /* creates "openings" for descenders in the underline */ + -1px -1px 0 #f4f4f4, + 1px -1px 0 #f4f4f4, + -1px 1px 0 #f4f4f4, + 1px 1px 0 #f4f4f4; + word-break: break-word; + word-wrap: break-word; +} +a:hover { + color: rgb(48, 112, 232); + background-image: + linear-gradient(to bottom, + rgba(48, 112, 232, 1) 50%, + rgba(48, 112, 232, 0) 50%); +} +a.plain { + background:none; + text-shadow:none; +} +p { + margin: 20px 0; +} +code { + display: block; + font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; + /*background: rgba(0,0,0,0.05);*/ + border-radius:1px; + padding: 0.5em 0; +} + +h1, h2, h3 { + font-weight: 500; +} +h1 { + color: #333; + font-size: 38px; + letter-spacing: -1.3px; + line-height: 60px; + text-indent: -2px; +} +h2 { + font-size: 24px; + letter-spacing: -0.4px; + line-height: 40px; +} + +h1 > a, h2 > a, h3 > a { + color: inherit; + text-shadow: none; + background: none !important; +} + +.row { + padding: 50px; + /*background: salmon;*/ + display: flex; + justify-content: center; + /*background: white;*/ +} +.row > * { + max-width: 888px; + flex: 1 0 100%; + /*background: white;*/ +} + +.row.white { + background: white; +} +.row.white a { + text-shadow: + /* creates "openings" for descenders in the underline */ + -1px -1px 0 white, + 1px -1px 0 white, + -1px 1px 0 white, + 1px 1px 0 white; +} + +.row.dark { + background: #2b2b2b; + color: #99999b; +} +.row.dark a:hover { + color: rgb(164, 188, 255); + background-image: + linear-gradient(to bottom, + rgba(164, 188, 255, 1) 50%, + rgba(164, 188, 255, 0) 50%); +} +.row.dark a { + background-image: + linear-gradient(to bottom, + rgba(255,255,255,.3) 50%, + rgba(255,255,255,0) 50%); + text-shadow: + /* creates "openings" for descenders in the underline */ + -1px -1px 0 #2b2b2b, + 1px -1px 0 #2b2b2b, + -1px 1px 0 #2b2b2b, + 1px 1px 0 #2b2b2b; +} +.row.dark h2, .row.dark h2 > a { + color: #ccc; + background: none; +} + + </style> + </head> + <body> + + <div class="row"><div> + <h1>The Interface font family</h1> + <p> + Interface is a font for highly legible text on computer screens.<br> + <a href="https://github.com/rsms/interface/releases/latest/">Download the latest release</a> + or try it out in the <a href="/lab/">playground</a> + </p> + </div></div> + + <div class="row white"><div> + <h2><a id="sample" href="#sample">Sample</a></h2> + <p> + <img src="res/sample.png" width="888"> + </p> + </div></div> + + <div class="row dark"><div> + <h2><a id="free" href="#free">How much does it cost?</a></h2> + <p> + Interface is a <a href="https://github.com/rsms/interface">free and open source</a> font family. You are free to use this font in almost any way imaginable. + Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are. + </p> + + <p> </p> + + <h2><a id="usage" href="#usage">How do I use it?</a></h2> + <p> + Using the font is as easy as + <a href="https://github.com/rsms/interface/releases/latest/">download & installing</a> locally on your computer. + </p> + <p> + You're free to bundle copies of Interface with your software, even if it's + commercial and you charge money for your software. Interface can also be used + on the web by either hosting the font files yourself or by including this CSS: + </p> + <code>@import url('https://rsms.me/interface/interface.css');</code> + <p>Use the following CSS rules to specify these families:</p> + <code>font-family: Interface, sans-serif;</code> + </div></div> + + <div class="row"><div> + <h2><a id="story" href="#story">The story behind Interface</a></h2> + <p> + Interface started out in late 2016 as an experiment to build a perfectly + pixel-fitting font at a specific small size (11px.) The idea was that + by crafting a font in a particular way, with a particular coordinate system + (Units Per EM), and for a particular target rasterization size (11), it would + be possible to get the best of both sharpness and readability. + </p> + <p> + However after a few months of using an early version of Interface, it dawned + on everyone exposed to the test that this approach had some serious real–world + problems. Most notably that it was really hard to read longer text. Because of + the pixel–aligning nature of that approach, the font took an almost monospaced + appearance, making it really easy to read numbers, punctuation and very short + words, but eye–straining to read anything longer. + </p> + <p> + The project was rebooted with a different approach, sticking with the + raster–spcific UPM, but crafting glyphs and kerning in a way that made for + more variation in the rythm 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 imporved upon based on experience and feedback. + </p> + + <p> </p> + + <h2><a id="status" href="#status">Current status & usability</a></h2> + <p> + Interface works great for English–language text, and pretty well for other + latin and cyrillic languages. There's still a lot of work to be done, and + <a href="https://github.com/rsms/interface#contributing">contributions are warmly welcomed</a>. + Please refer to the <a href="/lab/?sample=Repertoire&size=42">glyph repertoire</a> + for an overview of currently–available glyphs and their quality. + You can also look at some common <a href="/lab/?sample=Kerning%20body%20multi-lang&size=16">non English–language words in the playground.</a> + </p> + </div></div> + + + <div class="row"><div> + — <a href="https://twitter.com/rsms" class="plain">@rsms</a> + </div></div> + + </body> +</html> |