diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/preload-font-files.html | 4 | ||||
| -rw-r--r-- | docs/dynmetrics/index.css | 1 | ||||
| -rw-r--r-- | docs/dynmetrics/index.html | 52 | ||||
| -rw-r--r-- | docs/index.html | 8 | ||||
| -rw-r--r-- | docs/res/base.js | 2 | ||||
| -rw-r--r-- | docs/samples/index.css | 21 | ||||
| -rw-r--r-- | docs/samples/index.html | 11 |
7 files changed, 63 insertions, 36 deletions
diff --git a/docs/_includes/preload-font-files.html b/docs/_includes/preload-font-files.html index 9533ce0b5..34847f426 100644 --- a/docs/_includes/preload-font-files.html +++ b/docs/_includes/preload-font-files.html @@ -1,2 +1,2 @@ -<link rel="preload" href="font-files/Inter-upright.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin> - <link rel="preload" href="font-files/Inter-italic.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin>
\ No newline at end of file +<link rel="preload" href="/font-files/Inter-upright.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="/font-files/Inter-italic.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin>
\ No newline at end of file diff --git a/docs/dynmetrics/index.css b/docs/dynmetrics/index.css index f4328c6b2..cd9fb98cf 100644 --- a/docs/dynmetrics/index.css +++ b/docs/dynmetrics/index.css @@ -75,6 +75,7 @@ formula.code { outline: none; margin-right: 50px; margin-bottom: 50px; + min-width: 50px; } .samples .sample > * { display: block; diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index 9b5022c3f..e43be7c9c 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -32,7 +32,7 @@ endfor yourself with typography, but Inter Dynamic Metrics provides guidelines for how to best use Inter. You simply provide the optical font size, - and the tracking and leading is calculated for you through the following + and the tracking and line height is calculated for you through the following formula: </p> <p> @@ -42,12 +42,12 @@ endfor <const title="Base of natural logarithm; ≈2.718">e</const><sup>(<const>c</const> × <const>z</const>)</sup> </formula> <formula> - leading = round(<num data-binding="var-l">1.4</num> × <const>z</const>) + line height = <num data-binding="var-l">1.4</num> × <const>z</const> </formula> <formula title="Values for Inter"> - <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.016</num></g> - <g><const title="Constant b">b</const> = <num data-binding="var-b">0.21</num></g> - <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.18</num></g> + <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.02</num></g> + <g><const title="Constant b">b</const> = <num data-binding="var-b">0.205</num></g> + <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.175</num></g> <g><const>z</const> = font size</g> </formula> </p> @@ -194,24 +194,24 @@ function parseValues(s) { } setIdealValues({ - // 2018-09-28 - 6: 0.054, - 7: 0.042, - 8: 0.033, - 9: 0.025, - 10: 0.018, - 11: 0.012, - 12: 0.008, - 13: 0.004, - 14: 0, - 15: -0.002, + 6: 0.021, + 7: 0.017, + 8: 0.013, + 9: 0.01, + 10: 0.007, + 11: 0.005, + 12: 0.002, + 13: 0, + 14: -0.002, + 15: -0.004, 16: -0.005, 17: -0.007, 18: -0.008, - 20: -0.011, - 24: -0.014, + 20: -0.01, + 24: -0.013, 30: -0.016, - 40: -0.017, + 40: -0.02, + 80: -0.02, }) @@ -222,7 +222,9 @@ setIdealValues({ // var a = -0.015, b = 0.283, c = -0.23; // di=0.00221 on set-2018-02-18 // var a = -0.0149, b = 0.298, c = -0.23; // di=0.000484 on set-2018-02-19 // var a = -0.018, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20 -var a = -0.017, b = 0.202, c = -0.175; // di=0.000247 on 2018-09-28 +// var a = -0.017, b = 0.202, c = -0.175; // 2018-09-28 +var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02 + var l = 1.4 @@ -238,10 +240,6 @@ function _InterDynamicTracking(fontSize, weightClass) { // See https://gist.github.com/rsms/8efdbca5f8145a584ed08a7c3d6e5788 // 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 } @@ -335,6 +333,11 @@ Sample.prototype.cssProperties = function() { ] } +Sample.prototype.setText = function(text) { + this.contentEl.innerText = text + this.render() +} + Sample.prototype.render = function() { this.style.fontSize = this.fontSize + 'px' this.style.letterSpacing = this.tracking + 'em' @@ -393,6 +396,7 @@ function initSamples() { samples.push(new Sample(24)) samples.push(new Sample(30)) samples.push(new Sample(40)) + samples.push(new Sample(80)) // connect focus events var onSampleReceivedFocus = function() { setSelectedSample(this) } diff --git a/docs/index.html b/docs/index.html index 5ec838edc..edbd10835 100644 --- a/docs/index.html +++ b/docs/index.html @@ -100,8 +100,8 @@ html { font-family: 'Inter', sans-serif; } <div class="row"><div> <h2><a id="weights" href="#weights">Weights & Styles</a></h2> <p> - There are six weights, each with italic counterparts, - making a total of 12 styles. + There are nine weights, each with italic counterparts, + making a total of 18 styles. </p> <img src="res/weights-and-styles.svg" style="opacity:0.88;width:100%;display:block;margin:3em 0 3em 0"> </div></div> @@ -564,10 +564,10 @@ var unitEl = $('#dynmet-unit') var unitFormatters = [ ['em', 'em', function(fontSize, tracking) { - return tracking.toFixed(3) + return tracking.toFixed(3).replace(/(?:\.000|0+)$/, '') }], ['px', 'px', function(fontSize, tracking) { - return (fontSize * tracking).toFixed(1) + return (fontSize * tracking).toFixed(2).replace(/(?:\.00|0+)$/, '') }], ['%', 'percent', function(fontSize, tracking) { return (tracking * 100).toFixed(1) diff --git a/docs/res/base.js b/docs/res/base.js index ba858b62e..40188360e 100644 --- a/docs/res/base.js +++ b/docs/res/base.js @@ -81,8 +81,8 @@ var HUDNotification = { // the compensating tracking in EM. // function InterDynamicTracking(fontSize) { + var a = -0.02, b = 0.0755, c = -0.102; // tracking = a + b * e ^ (c * fontSize) - var a = -0.017, b = 0.202, c = -0.175; return a + b * Math.pow(Math.E, c * fontSize) } diff --git a/docs/samples/index.css b/docs/samples/index.css index 6114ae255..a1234d8cc 100644 --- a/docs/samples/index.css +++ b/docs/samples/index.css @@ -8,22 +8,33 @@ body { text-align:center; } +.live > hr { + margin: 3rem 0 4rem 0; + background: black; + height: 2px; + border: none; +} + livesample { display: block; color: #111; outline: none; - /*padding-left: 20px; + margin-top: 1rem; + margin-bottom: 1rem; +} + +/*livesample { + padding-left: 20px; border-left: 2px solid transparent; - margin-left:-22px;*/ - margin-top: 1em; - margin-bottom: 1.6em; + margin-left:-22px; } livesample:hover { border-left-color: rgb(3, 102, 214); } -/*livesample:focus { +livesample:focus { border-left-color: #eee; }*/ + livesample > p { margin-top: 0; } diff --git a/docs/samples/index.html b/docs/samples/index.html index 88f389c88..3784fcccb 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -28,6 +28,17 @@ endfor <div class="row"><div> <div class="live"> + <livesample data-ctxedit="sample-x1" + style="font-size:80px;line-height:1.0" contenteditable> + Interfacing mechanisms + </livesample> + + <livesample data-ctxedit="sample-x2" + style="font-weight:100;font-size:80px;line-height:1.2" contenteditable> + XP–45 / vessel + </livesample> + + <hr> <livesample contenteditable class="s1" data-ctxedit="sample1"> Fabulous typography encountering spring |