diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 63f0a4eb7..dbd245320 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -60,6 +60,7 @@ endfor +
Hello
diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index 24ace9ad3..2ffa7c8b5 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -39,16 +39,16 @@ endfor tracking = a + b × - e(c × fontSize) + e(c × z) - leading = 1.4 × fontSize + leading = round(1.4 × z) a = -0.016    b = 0.21    c = -0.18    - e ≈ 2.718 + z = font size

@@ -251,10 +251,10 @@ var a = -0.016, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20 var l = 1.4 -// InterUIDynamicTracking takes the font size in points or pixels and returns -// the compensating tracking in EM. +// _InterUIDynamicTracking is a version of InterUIDynamicTracking that +// uses some global variables that are adjustable. // -function InterUIDynamicTracking(fontSize, weightClass) { +function _InterUIDynamicTracking(fontSize, weightClass) { // Note: weightClass is currently unused // // y = -0.01021241 + 0.3720623 * e ^ (-0.2808687 * x) @@ -263,7 +263,7 @@ function InterUIDynamicTracking(fontSize, weightClass) { // return a + b * Math.pow(Math.E, c * fontSize) // [6 - 38] 0.05798 .. -0.01099 (midpoint = 12.533) - + // // y = 0.025 - (ln(x) * 0.01) // return 0.025 - Math.log(fontSize) * 0.01 } @@ -322,7 +322,7 @@ Sample.prototype.idealDistance = function(fontSize) { Sample.prototype.setFontSize = function(fontSize) { this.fontSize = fontSize - this.tracking = baseTracking + InterUIDynamicTracking(fontSize, weightClass) + this.tracking = baseTracking + _InterUIDynamicTracking(fontSize, weightClass) this.lineHeight = InterUIDynamicLineHeight(fontSize, weightClass) this.maxBoxWidth = Math.round(fontSize * (this.tracking + 1) * 25) @@ -352,11 +352,11 @@ Sample.prototype.setFontSize = function(fontSize) { } Sample.prototype.cssProperties = function() { - return { - fontSize: round(this.fontSize, 3) + 'px', - letterSpacing: round(this.tracking, 3) + 'em', - lineHeight: round(this.lineHeight, 3) + 'px', - } + return [ + ['font-size', round(this.fontSize, 3) + 'px'], + ['letter-spacing', round(this.tracking, 3) + 'em'], + ['line-height', round(this.lineHeight, 3) + 'px'], + ] } Sample.prototype.render = function() { @@ -479,7 +479,7 @@ function updateGraphPlot() { graph.clear() graph.plotLine(idealValuesList, '#0d3') graph.plotf(function(x) { - return InterUIDynamicTracking(x, weightClass) + return _InterUIDynamicTracking(x, weightClass) }) if (focusedSample) { var graphedFontSize = Math.min(24, focusedSample.fontSize) // clamp to [-inf,24] @@ -496,13 +496,22 @@ codeOutput.addEventListener('focus', function(ev) { codeOutput.select() }, {passive:false,capture:true}) +codeOutput.addEventListener('pointerdown', function(ev) { + // TODO: don't do this if codeOutput is focused + ev.preventDefault() + ev.stopPropagation() + codeOutput.select() + document.execCommand("copy") + HUDNotification.show('Copied to clipboard') +}, {passive:false,capture:true}) + function updateCodeView() { var s = '' if (focusedSample) { - var cssprops = focusedSample.cssProperties() - var props = Object.keys(cssprops) + var props = focusedSample.cssProperties() props.forEach(function(prop, i) { - s += prop + ': ' + cssprops[prop] + ';' + var name = prop[0], value = prop[1] + s += name + ': ' + value + ';' if (i != props.length-1) { s += '\n' } diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 000000000..9fb3c5d45 --- /dev/null +++ b/docs/index.css @@ -0,0 +1,61 @@ + +#hidden-text-input { + position: absolute; + left:0; + top:0; + background: none; + border: none; + opacity: 0; + pointer-events: none; +} + +.dynmet-calc { + font-size: 18px; + line-height: 26px; + user-select: text; +} + .dynmet-calc input { + border: none; + box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.3); + background: transparent; + font: inherit; + color: inherit; + outline: none; + margin: 0 0.2em; + width: 40px; + text-align: center; + line-height: inherit; + color: #eee; + user-select: text; + } + .dynmet-calc input:focus { + color: #fff; + box-shadow: inset 0 -2px 0 0 rgb(43, 139, 247); + } + .dynmet-calc input[type=number]::-webkit-inner-spin-button, + .dynmet-calc input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + .dynmet-calc .arrow { + margin: 0 0.8em; + color: #eee; + } + + .dynmet-calc #dynmet-tracking { + box-shadow: none; + width: 57px; + margin-right: 0.1em; + color: #eee; + } + .dynmet-calc #dynmet-tracking.percent { + width: 34px; + } + + .dynmet-calc #dynmet-unit:hover { + color: rgb(43, 139, 247); + } + .dynmet-calc #dynmet-unit:active { + color: white; + } diff --git a/docs/index.html b/docs/index.html index fb2345fc9..a2f4e8dd7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,6 +1,23 @@ --- layout: default --- +{% + +capture url_root + %}{% if site.safe == false %}/{% else %}/inter/{% endif +%}{% +endcapture %}{% + +for file in site.static_files %}{% + assign _path = file.path | remove_first: "/inter" %}{% + if _path == "/index.css" %}{% + assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% + endif %}{% +endfor + +%} + +

The Inter UI font family

@@ -46,8 +63,17 @@ layout: default

 

Dynamic Metrics

+

+ Font size + dp + —> + letter spacing + + em +

- There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter UI Dynamic Metrics provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results. + There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter UI Dynamic Metrics provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.
Learn about Dynamic Metrics —>

@@ -297,30 +323,124 @@ layout: default — @rsms
- diff --git a/docs/res/base.css b/docs/res/base.css index bf0c440b7..555bf4fa6 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -269,8 +269,8 @@ h1 > a, h2 > a, h3 > a { color: #aaa; } .row.dark a:hover { - color: rgba(160, 190, 255, 1); - text-decoration: underline rgba(164, 188, 255, 0.6); + color: rgb(95, 170, 255); + text-decoration: underline rgb(95, 170, 255); } .row.dark h2, .row.dark h2 > a { color: #ccc; @@ -467,6 +467,35 @@ box h3 { margin-bottom:0.8em; } +#hud-notification { + position: fixed; + bottom: 20px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 9; + pointer-events: none; +} + #hud-notification .msg { + background: #000; + color: white; + height: 50px; + line-height: 50px; + font-size: 22px; + letter-spacing: -0.012em; + padding: 0 0.7em; + border-radius: 4px; + opacity: 0.1; + transition: 250ms all ease-in; + transform: translate3d(0, 71px, 0); /* height + bottom offset + 1 */ + } + #hud-notification.visible .msg { + transform: translate3d(0, 0, 0); + transition: 120ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); + opacity: 1; + } + /* ------------------------------------------------------ */ diff --git a/docs/res/base.js b/docs/res/base.js index 3ef970cc3..859b8d56f 100644 --- a/docs/res/base.js +++ b/docs/res/base.js @@ -48,6 +48,44 @@ var timeNow = ( ) +var HUDNotification = { + el: $('#hud-notification'), + timer: null, + visible: false, + + show: function(message, duration) { + var n = this + n.el.firstChild.innerText = message + n.el.classList.add('visible') + if (n.visible) { + n.hide() + setTimeout(function(){ n.show(message, duration) }, 120) + return + } + n.visible = true + clearTimeout(n.timer) + n.timer = setTimeout(function(){ n.hide() }, duration || 1200) + }, + + hide: function() { + var n = this + if (n.visible) { + n.el.classList.remove('visible') + n.visible = false + } + } +} + + +// InterUIDynamicTracking takes the font size in points or pixels and returns +// the compensating tracking in EM. +// +function InterUIDynamicTracking(fontSize) { + // tracking = a + b * e ^ (c * fontSize) + return -0.016 + 0.21 * Math.pow(Math.E, -0.18 * fontSize) +} + + // Mac or not? Maybe even a buggy Safari? var isMac = false if (!window.MSStream &&