From 8eae4bfbeb506d559de378fb17c4b355fb42d5cc Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Sat, 18 Nov 2023 11:47:31 -0800 Subject: [PATCH] website: update for v4 release --- docs/Gemfile.lock | 24 ++- docs/Makefile | 48 +++-- docs/_data/faq.yml | 92 ++++++++ docs/_data/fontinfo.json | 64 +++--- docs/_layouts/default.html | 5 +- docs/download/index.html | 3 - docs/index.html | 104 +++++---- docs/lab/favicon.png | Bin 1484 -> 792 bytes docs/lab/glyphinfo.json | 420 +++++++++++++++++++++++++++++++------ docs/res/base.css | 13 +- 10 files changed, 609 insertions(+), 164 deletions(-) create mode 100644 docs/_data/faq.yml mode change 100755 => 100644 docs/lab/favicon.png diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock index a423f6332..01d138b56 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -1,14 +1,20 @@ GEM remote: https://rubygems.org/ specs: - activesupport (7.0.8) + activesupport (7.1.2) + base64 + bigdecimal concurrent-ruby (~> 1.0, >= 1.0.2) + connection_pool (>= 2.2.5) + drb i18n (>= 1.6, < 2) minitest (>= 5.1) + mutex_m tzinfo (~> 2.0) addressable (2.8.5) public_suffix (>= 2.0.2, < 6.0) - base64 (0.1.1) + base64 (0.2.0) + bigdecimal (3.1.4) coffee-script (2.4.1) coffee-script-source execjs @@ -16,8 +22,11 @@ GEM colorator (1.1.0) commonmarker (0.23.10) concurrent-ruby (1.2.2) + connection_pool (2.4.1) dnsruby (1.70.0) simpleidn (~> 0.2.1) + drb (2.2.0) + ruby2_keywords em-websocket (0.5.3) eventmachine (>= 0.12.9) http_parser.rb (~> 0) @@ -30,7 +39,7 @@ GEM faraday-net_http (>= 2.0, < 3.1) ruby2_keywords (>= 0.0.4) faraday-net_http (3.0.2) - ffi (1.16.2) + ffi (1.16.3) forwardable-extended (2.6.0) gemoji (3.0.1) github-pages (228) @@ -212,7 +221,8 @@ GEM jekyll-feed (~> 0.9) jekyll-seo-tag (~> 2.1) minitest (5.20.0) - nokogiri (1.15.4-x86_64-darwin) + mutex_m (0.2.0) + nokogiri (1.15.5-x86_64-darwin) racc (~> 1.4) octokit (4.25.1) faraday (>= 1, < 3) @@ -220,7 +230,7 @@ GEM pathutil (0.16.2) forwardable-extended (~> 2.6) public_suffix (4.0.7) - racc (1.7.1) + racc (1.7.3) rb-fsevent (0.11.2) rb-inotify (0.10.1) ffi (~> 1.0) @@ -241,13 +251,13 @@ GEM unf (~> 0.1.4) terminal-table (1.8.0) unicode-display_width (~> 1.1, >= 1.1.1) - typhoeus (1.4.0) + typhoeus (1.4.1) ethon (>= 0.9.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) unf (0.1.4) unf_ext - unf_ext (0.0.8.2) + unf_ext (0.0.9.1) unicode-display_width (1.8.0) webrick (1.8.1) diff --git a/docs/Makefile b/docs/Makefile index e5eb93384..5ec7e7691 100644 --- a/docs/Makefile +++ b/docs/Makefile @@ -2,6 +2,7 @@ SRCDIR := $(abspath $(lastword $(MAKEFILE_LIST))/../..) FONTDIR := ../build/fonts BIN := $(SRCDIR)/build/venv/bin VENV := ../build/venv/bin/activate +Q = $(if $(filter 1,$(V) $(VERBOSE)),,@) # make V=1 for verbose mode export PATH := $(BIN):$(PATH) HTTP_SERVER_BIND_ADDR ?= 127.0.0.1 @@ -18,7 +19,7 @@ build-tmp: .ruby-bundle bundle exec jekyll build --disable-disk-cache -b /tmp/inter-v4-website/ -d _site-tmp serve: .ruby-bundle - if [ ! -s lab/fonts ]; then \ + $(Q)if [ ! -s lab/fonts ]; then \ [ ! -s lab/fonts/fonts ] || rm lab/fonts/fonts; \ rm -f lab/fonts && ln -fs ../../build/fonts lab/fonts; \ fi @@ -28,8 +29,8 @@ serve: .ruby-bundle @# In the past we tried to work around this by periodically removing the @# copied font files and re-creating the symlink, but it was a frail process. @# For live testing with fonts, you'll instead want to use docs/lab/serve.py - rm -rf _site - bundle exec jekyll serve -b / --watch \ + $(Q)rm -rf _site + $(Q)bundle exec jekyll serve -b / --watch \ --config _config.yml,_config-dev.yml \ --host $(HTTP_SERVER_BIND_ADDR) --port 3002 \ --livereload --livereload-port 30002 @@ -38,7 +39,8 @@ serve-pub: exec $(MAKE) HTTP_SERVER_BIND_ADDR=0.0.0.0 serve optimize-images: - for f in res/*.png; do \ + $(Q)for f in $$(find . -type f -name \*.png); do \ + echo optipng "$$f"; \ optipng -quiet "$$f" & \ done ; \ wait @@ -54,29 +56,33 @@ optimize-images: # ----------------------------------------------------------------------- -dist: fonts info lab/index.html +dist: info lab/index.html +info: fonts _data/fontinfo.json lab/glyphinfo.json +fonts: font-files/Inter-Regular.woff2 -info: _data/fontinfo.json lab/glyphinfo.json +FONTS_SRC := $(wildcard \ + $(FONTDIR)/static/Inter*.woff2 \ + $(FONTDIR)/var/Inter-Variable.woff2 \ + $(FONTDIR)/var/Inter-Variable-Italic.woff2 \ + $(FONTDIR)/var/Inter-Variable.ttf) -fonts: - rm -rf font-files/Inter* - mkdir -p font-files - cp -a $(FONTDIR)/static/Inter*.woff2 \ - $(FONTDIR)/var/Inter-Variable.woff2 \ - $(FONTDIR)/var/Inter-Variable-Italic.woff2 \ - $(FONTDIR)/var/Inter-Variable.ttf \ - font-files/ +font-files/Inter-Regular.woff2: $(FONTS_SRC) + $(Q)rm -rf font-files/Inter* + $(Q)mkdir -p font-files + cp -a $^ font-files/ + $(Q)touch $@ -lab/index.html: ../version.txt +lab/index.html: ../version.txt ../misc/tools/patch-version.py . $(VENV); python ../misc/tools/patch-version.py $@ _data/fontinfo.json: ../misc/tools/fontinfo.py - . $(VENV); python ../misc/tools/fontinfo.py -pretty font-files/Inter-Regular.otf > _data/fontinfo.json +_data/fontinfo.json: font-files/Inter-Regular.woff2 + . $(VENV); python ../misc/tools/fontinfo.py -pretty $< > $@ -lab/glyphinfo.json: ../misc/tools/gen-glyphinfo.py \ - ../build/ufo/Inter-Regular.ufo \ - ../misc/UnicodeData.txt - . $(VENV); python ../misc/tools/gen-glyphinfo.py \ - -ucd ../misc/UnicodeData.txt ../build/ufo/Inter-Regular.ufo > $@ +lab/glyphinfo.json: ../misc/tools/gen-glyphinfo.py ../misc/UnicodeData.txt +lab/glyphinfo.json: ../build/ufo/Inter-Regular.ufo + . $(VENV); python ../misc/tools/gen-glyphinfo.py -ucd ../misc/UnicodeData.txt $< > $@ +../build/ufo/Inter-Regular.ufo: $(wildcard ../build/ufo/Inter-Regular.ufo/*.plist) + touch $@ .PHONY: default build build-tmp serve serve-pub dist info fonts diff --git a/docs/_data/faq.yml b/docs/_data/faq.yml new file mode 100644 index 000000000..c1b813aeb --- /dev/null +++ b/docs/_data/faq.yml @@ -0,0 +1,92 @@ + +- id: faq-using-features + q: "How do I enable and disable font features?" + a: | + In web browsers you can use + [font-feature-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings). + In Figma you can access features via the + [Advanced Type panel](https://help.figma.com/article/250-working-with-fonts#opentype). + In Illustrator, Photoshop and friends, you can access features via the + [Characters and OpenType panels](https://helpx.adobe.com/illustrator/using/special-characters.html#opentype_panel_overview). + Sketch doesn't provide a UI for configuring font features, but there's + [a workaround using macOS's native font UI](https://sketchtalk.io/discussion/comment/1478/#Comment_1478). + +- id: faq-cdn + q: "How reliable are the fonts served from rsms.me/inter?" + a: | + https://rsms.me/inter/inter.css and the Inter font + files are distributed globally over CloudFlare's CDN. + This is very reliable and fast by automatically serving the fonts + from a server near your users, minimizing the latency of your web pages. + +- id: faq-subset + q: "How do I subset the font files?" + a: | + Have a look at [pyftsubset](https://fonttools.readthedocs.io/en/latest/subset/) + +- id: faq-otfeat-customize-compile + q: "Can I change what OpenType features are enabled by default?" + a: | + Have a look at [OpenType Feature Freezer](https://twardoch.github.io/fonttools-opentype-feature-freezer/). + It allows you to customize fonts with certain + OpenType features "on by default." + +- id: faq-contribute + q: "Can I help with improving Inter?" + a: | + Yes you can! Inter is an open-source project, meaning the source + code—or "source design" if you will—that is used to build the font files + [are freely available](https://github.com/rsms/inter) 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 ["Contributing" document](https://github.com/rsms/inter/blob/master/CONTRIBUTING.md) is a great place to start. + This document outlines where you can have the biggest impact, + how things are setup and how to get started. + +- id: faq-inuse + q: "I've made a cool thing that uses Inter" + a: | + [Share what you've made in "Show and Tell"](https://github.com/rsms/inter/discussions/categories/show-and-tell) + +- id: faq-bug + q: "Where can I report technical problems with Inter?" + a: | + Please [submit a bug report on GitHub](https://github.com/rsms/inter/issues/new?template=bug_report.md) + +- id: faq-contact + q: "I have a question, where can I get help?" + a: | + Start by searching [issues](https://github.com/rsms/inter/issues?q=%22YOUR+ISSUE%22) & [discussions](https://github.com/rsms/inter/discussions?discussions_q=%22YOUR+ISSUE%22) for an answer. + If that didn't help, ask your question in + [the "Q&A" forum](https://github.com/rsms/inter/discussions/categories/q-a). + +- id: faq-start-date + q: "This website claims work started in 2016, but the git repository's log says it started later?" + a: | + Inter was developed in 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 + 2,990,150 line edits made across 247 versions. + +- id: faq-old-website + q: "I miss something from the old website" + a: | + Have a pleasant surf on + [a snapshot of the old version 3 website](https://d.rsms.me/inter-website/v3/) + + +- id: faq-technical-details + q: "What are the technical details of Inter?" + a: | + UPM: 2048
+ Variable axis opsz [14–28]
+ Variable axis wght [100–900]
+ Constant axis ital [0, 9.4°]
+ Style classification: Sans-serif, Grotesk
+ x-height, opsz=14: 1118 UPM
+ x-height, opsz=28: 1056 UPM
+ Cap height: 1490 UPM
+ Ascender: 1984 UPM
+ Descender: -494 UPM
+ Vendor ID: [RSMS](https://learn.microsoft.com/en-us/typography/vendors/#r) diff --git a/docs/_data/fontinfo.json b/docs/_data/fontinfo.json index dc17beca9..5f99b40aa 100644 --- a/docs/_data/fontinfo.json +++ b/docs/_data/fontinfo.json @@ -1,6 +1,5 @@ [ { - "CFF ": "[present but not decoded]", "GDEF": "[present but not decoded]", "GPOS": "[present but not decoded]", "GSUB": "[present but not decoded]", @@ -56,7 +55,7 @@ "usWinAscent": 1984, "usWinDescent": 494, "version": 4, - "xAvgCharWidth": 1338, + "xAvgCharWidth": 1314, "yStrikeoutPosition": 671, "yStrikeoutSize": 140, "ySubscriptXOffset": 0, @@ -69,29 +68,31 @@ "ySuperscriptYSize": 1229 }, "cmap": "[present but not decoded]", + "glyf": "[present but not decoded]", "head": { - "checkSumAdjustment": 2400022008, - "created": 3776266544, + "checkSumAdjustment": 267815186, + "created": 3783173853, "flags": [ "0: Baseline at y=0", - "1: Left sidebearing point at x=0" + "1: Left sidebearing point at x=0", + "11: Losslessly optimized" ], - "flags_raw": 3, + "flags_raw": 2051, "fontDirectionHint": 2, "fontRevision": 4.0, "glyphDataFormat": 0, - "indexToLocFormat": 0, + "indexToLocFormat": 1, "lowestRecPPEM": 3, "macStyle": [], "macStyle_raw": 0, "magicNumber": 1594834165, - "modified": 3776266567, + "modified": 3783173867, "tableVersion": 1.0, "unitsPerEm": 2048, "xMax": 5290, "xMin": -1513, "yMax": 2269, - "yMin": -654 + "yMin": -660 }, "hhea": { "advanceWidthMax": 5492, @@ -102,14 +103,15 @@ "descent": -494, "lineGap": 0, "metricDataFormat": 0, - "minLeftSideBearing": -1512, - "minRightSideBearing": -963, - "numberOfHMetrics": 2637, + "minLeftSideBearing": -1513, + "minRightSideBearing": -2200, + "numberOfHMetrics": 2935, "tableVersion": 65536, "xMaxExtent": 5290 }, "hmtx": "[present but not decoded]", - "id": "font-files/Inter-Regular.otf", + "id": "font-files/Inter-Regular.woff2", + "loca": "[present but not decoded]", "maxp": "[present but not decoded]", "name": "[present but not decoded]", "names": { @@ -124,29 +126,33 @@ "#257": "Disambiguation", "#258": "Round quotes & commas", "#259": "Disambiguation (no slashed zero)", - "#260": "Alternate one", - "#261": "Open four", - "#262": "Open six", - "#263": "Open nine", - "#264": "Lower-case L with tail", - "#265": "Simplified u", - "#266": "Alternate German double s", - "#267": "Upper-case i with serif", - "#268": "Flat-top three", - "#269": "Capital G with spur", - "#270": "Single-story a", - "#271": "Compact f", - "#272": "Compact t", - "#3 fontId": "4.000;git-4b01ef878;RSMS;Inter-Regular", + "#260": "Characters in circles", + "#261": "Characters in squares", + "#262": "Square punctuation", + "#263": "Square quotes", + "#264": "Alternate one", + "#265": "Open four", + "#266": "Open six", + "#267": "Open nine", + "#268": "Lower-case L with tail", + "#269": "Simplified u", + "#270": "Alternate German double s", + "#271": "Upper-case i with serif", + "#272": "Flat-top three", + "#273": "Capital G with spur", + "#274": "Single-story a", + "#275": "Compact f", + "#276": "Compact t", + "#3 fontId": "4.000;git-bd621042f;RSMS;Inter-Regular", "#4 fullName": "Inter Regular", - "#5 version": "Version 4.000;git-4b01ef878", + "#5 version": "Version 4.000;git-bd621042f", "#6 postscriptName": "Inter-Regular", "#7 trademark": "Inter UI and Inter is a trademark of rsms.", "#8 manufacturerName": "rsms", "#9 designer": "Rasmus Andersson" }, "post": { - "formatType": 3.0, + "formatType": 2.0, "isFixedPitch": 0, "italicAngle": 0.0, "maxMemType1": 0, diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index b59e080e0..e1c12552d 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -53,8 +53,9 @@

Inter

Features - Glyphs - Lab + Glyphs + FAQ + Lab Download ↓
diff --git a/docs/download/index.html b/docs/download/index.html index 98678ead9..9da25a234 100644 --- a/docs/download/index.html +++ b/docs/download/index.html @@ -190,9 +190,6 @@ if (/linux/i.test(navigator.userAgent)) { @@ -1114,16 +1134,21 @@ At a later date we find the word applied to very different objects, though alway
- - It’s “fun” here, yes + + It’s “fun” here, Möbius - It’s “fun” here, yes + style="font-weight:500;white-space:nowrap;font-size:9.5vw;font-feature-settings:'ss03' 1,'liga' 1,'calt' 1;margin-bottom:1rem"> + It’s “fun” here, Möbius + + It’s “fun” here, Möbius - Give a little personality to titles + Add a little personality to titles ss03 Round quotes & commas
+ ss07 Square punctuation
+ ss08 Square quotes
@@ -1167,6 +1192,10 @@ At a later date we find the word applied to very different objects, though alway ss02 Disambiguation (with zero<)
ss03 Round quotes & commas
ss04 Disambiguation (no zero<)
+ ss05 Circled characters
+ ss06 Squared characters
+ ss07 Square punctuation
+ ss08 Square quotes
subs Subscript
sups Superscript
tnum Tabular Figures
@@ -1281,35 +1310,45 @@ At a later date we find the word applied to very different objects, though alway -

Greek

-

+

ΑΒΓΔΕΖΗΘΙΚΛΜΝ
ΞΟΠΡΣΤΥΦΧΨΩ
αβγδεζηθικλμνξ
- οπρςστυφχψω . : ; + οπρςστυφχψω

-
-
+

Cyrillic

-

+

АБВГДЕЁЖЗИЙКЛ
МНОПРСТУФХЧЦ
ШЩЬЪЫЭЮЯабвг
деёжзийклмнопрс
туфхчцшщьъыэюя

- --> + + + + +
+

Frequenty Asked Questions

+
+ {% for c in site.data.faq %} +

{{c.q}}

+ {{c.a | markdownify}} + {% endfor %} +
+
@@ -1320,24 +1359,6 @@ At a later date we find the word applied to very different objects, though alway const $ = (q, el) => (el || document).querySelector(q) const $$ = (q, el) => [].slice.call((el || document).querySelectorAll(q)) -// FAQ anchors -for (let e of $$('ul.faq > li.q')) { - let tn = document.createTextNode('Q\xa0\xa0') // a0=nbsp - e.insertBefore(tn, e.firstChild) - if (e.id) { - let a = document.createElement('a') - a.href = '#' + e.id - a.className = 'plain' - a.innerHTML = e.innerHTML - e.innerText = '' - e.appendChild(a) - } -} -for (let e of $$('ul.faq > li.a')) { - let tn = document.createTextNode('A\xa0\xa0') - e.insertBefore(tn, e.firstChild) -} - // contenteditable, paste as plain-text $$('[contenteditable]').forEach(el => { el.addEventListener('paste', ev => { @@ -1349,17 +1370,20 @@ $$('[contenteditable]').forEach(el => { // show/hide "Inter" in header let callback = (entries, observer) => { entries.forEach((entry) => { - //console.log(entry.isIntersecting, entry) - // if (entry.isIntersecting) { - // $('header').style.borderBottom = 'none' - // } else { - // $('header').style.borderBottom = '2px solid black' - // } $('header .scroll-reveal').classList.toggle('visible', !entry.isIntersecting) }); } let observer = new IntersectionObserver(callback, { rootMargin: "0px", threshold: 0 }) observer.observe($('h1')) +// low priority stuff that doesn't need to happen immediately +requestIdleCallback(() => { + // convert .num/num numbers to local format, e.g. "1,234.56" vs "1.234,56" + let nfmt = new Intl.NumberFormat() // test with .NumberFormat('de-DE') + if (nfmt.format(1234.89) != "1,234.89") { // written as "1,234.89" in source + for (let el of [...$$("num"), ...$$(".num")]) + el.innerText = nfmt.format(parseFloat(el.innerText.replace(/,/g,''))) + } +}) })() diff --git a/docs/lab/favicon.png b/docs/lab/favicon.png old mode 100755 new mode 100644 index 8a731f3cc609a71ba259995e1f6b6cc89bd18646..07356552b8ef278f096fdce3180bbc869342e8fd GIT binary patch literal 792 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!I14-?iy0Vnyg`_8sqM6tKtaah zAa^H*b?0PW0y!+{j=qiz3>*8o|0J>k`7HrHA+A7L051>{5(3KOCxHqC1qI>8z}Y|s z8UR|y$;k;6tgo+cXlUr@==lHtKU3I-E}(>JNswPKgMfmAe?WXfegQ~9fB%FD^XD&E zux|bO4g2=*KX?B8z5DOp|0`{rzykE#8&4Of40u|sj?egE_Wal!>1&Hh zzyANfUs1uy^ODHB#r@^E?{7_DVPq0qd)em|lacr2l^lBvBBx(5dy;l2wcU8B` zwz}q7ma1_aRa?0y>3zG!soACFu{V!}at!+}X4{;QeH25*ishV49M$spI zQN0PAffF`-(id^4OLRJQT7Gv=e1z)jr~IEw+gcc&@PF!-`0>-ZW-W97A4NNj11IMT zB|QBvFyZj0`WZ8LPyZK8w$k~3+%*cw>{}9j!RFKYk5?+s+5I#>zf-pP~+-YnD@+3o4^0+kN=-Hb_6{C$0&UG{jJ!w^;N)x!rxF`+fWNy}jMH6-gQOdcBFFy|S{>8jr`H;WNM2gK`!FTs}+Gdw+-W zf|u|614$7TNdX{D!aE@Hz1$~iib17P@osN#k0FL92_rE9K)Mdndm#N(?s_;4&^kIO z`$<`bvj7Gn0pPxehMeHzBV0Af4t!P{&)%ukYW`?6dMB2!vH&_Z zJp3gaA;kcP#zPxxFt&i8*Z;xCFMp&ssH080u!b90!~Z5X8VRtzzWzIkj$~`@x~M^f zM{8?qa(#W>*S$$w0FZwPGy74Bk2XYTLWEPD%3404(P+Fy(UNk(8xDsL<0`GhRbbCc z`N$LPpzV=}90G87hbW#(dC|gfsAD+%7gixufWX`TDmmid;6S#vw&eW$Tz?$!HKN1E zu;{QB3lsPc=3;W z0-*PIIjNAGut;7Z0TG(ZhQgcxGgI8GUTWqLMqa^HgkUKA1rbK-x4AILw>oiuf42hL zG}Eq7#EBFGzPZjtwW$RJD}OhCN)C>X#1X2*^E~#FwA<~-`i_>+nze$d0QhkS4}UBf zgT1-Axhehr-Sj;J5o)l48wl?4%Txe({(mLov9HWok9v+zKjBjx) zXDk8?zSf5bgNXo`E_Nit`F@xq%TfdkgO3;nXA=RS2H*2DG5VVoYTHZnrzR4AHJag~w30Eh)k@ z&QDtx)MH6O!eB|Be&Br-;g7Sw)D}2xPr#}^P=KE$r8hsx`A;)N<^%|=;D!l@Vu3gjawb0+`-uH> zNtE|8M3_MV5x7^_6bpojkT-eY66BvO{A6;Etb$`PCkIWQ>C7faF{DG7+RhH!c z2KoKSI--FxCQHNYU&HLbi>s%#DvXK4S5Wgg;*_OfDLD5c)Fw{MVwH}$== 720 */ @@ -184,6 +188,12 @@ header { } header a { padding: 0; text-decoration: none } header a:hover { text-decoration: none; color:inherit } + header a.active { + background: var(--active-bgcolor); + padding: 4px 8px; + margin: -4px -8px; + border-radius: 3px; + } header .scroll-reveal { pointer-events: none; user-select: none; @@ -346,10 +356,11 @@ dem { /* de-emphasize */ font-weight: 400; opacity: 0.7; } -num { /* number */ +num, .num { /* number */ letter-spacing:0.01em; white-space: nowrap; font-variant: tabular-nums slashed-zero; + break-before: avoid; } em, i, .italic { font-style: italic;