diff options
author | Rasmus Andersson <rasmus@figma.com> | 2019-02-08 05:18:10 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@figma.com> | 2019-02-08 05:18:10 +0300 |
commit | ec90e93e82855b33ee43a3396ef2e60b2673da1d (patch) | |
tree | c87cfb961657fbf904f92fe40f4987a643fec6b4 | |
parent | af51a3e178eb7820dfcc90e6b2d026326653df0c (diff) | |
download | inter-ec90e93e82855b33ee43a3396ef2e60b2673da1d.tar.xz |
website: dynamic metrics
-rw-r--r-- | docs/dynmetrics/index.css | 2 | ||||
-rw-r--r-- | docs/dynmetrics/index.html | 64 | ||||
-rw-r--r-- | docs/index.html | 2 | ||||
-rw-r--r-- | docs/res/base.js | 2 |
4 files changed, 46 insertions, 24 deletions
diff --git a/docs/dynmetrics/index.css b/docs/dynmetrics/index.css index cd9fb98cf..776b04b75 100644 --- a/docs/dynmetrics/index.css +++ b/docs/dynmetrics/index.css @@ -165,7 +165,7 @@ div.controls > h3 { div.controls > textarea { border: none; padding:16px; - height: 220px; + height: 240px; font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; outline: none; resize: vertical; diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index d6cbbc49a..2cfe09d7c 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -44,9 +44,9 @@ endfor 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.038</num></g> - <g><const title="Constant b">b</const> = <num data-binding="var-b">0.161</num></g> - <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.12</num></g> + <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.0223</num></g> + <g><const title="Constant b">b</const> = <num data-binding="var-b">0.185</num></g> + <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.1745</num></g> <g><const>z</const> = font size</g> </formula> </p> @@ -240,25 +240,45 @@ setIdealValues({ // 40: -0.034, // 80: -0.034, - // 2019-02-06 - 6: 0.04, + // // 2019-02-06 + // 6: 0.04, + // 7: 0.032, + // 8: 0.024, + // 9: 0.017, + // 10: 0.01, + // 11: 0.005, + // 12: 0, + // 13: -0.004, + // 14: -0.008, + // 15: -0.011, + // 16: -0.014, + // 17: -0.017, + // 18: -0.019, + // 20: -0.023, + // 24: -0.029, + // 30: -0.034, + // 40: -0.037, + // 80: -0.038, + + // 2019-02-07 + 6: 0.043, 7: 0.032, 8: 0.024, - 9: 0.017, + 9: 0.016, 10: 0.01, 11: 0.005, 12: 0, - 13: -0.004, - 14: -0.008, - 15: -0.011, - 16: -0.014, - 17: -0.017, - 18: -0.019, - 20: -0.023, - 24: -0.029, - 30: -0.034, - 40: -0.037, - 80: -0.038, + 13: -0.0025, + 14: -0.006, + 15: -0.009, + 16: -0.011, + 17: -0.013, + 18: -0.014, + 20: -0.017, + 24: -0.019, + 30: -0.021, + 40: -0.022, + 80: -0.022, }) @@ -271,7 +291,8 @@ setIdealValues({ // 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; // 2018-09-28 // var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02 -var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06 +// var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06 +var a = -0.0223, b = 0.185, c = -0.1745 // 2019-02-07 var l = 1.4 @@ -506,9 +527,10 @@ function updateIdealMatches() { function updateGraphPlot() { graph.clear() graph.plotLine(idealValuesList, '#0d3') - graph.plotf(function(x) { - return _InterDynamicTracking(x, weightClass) - }) + graph.plotf( + x => _InterDynamicTracking(x, weightClass), + 'rgba(0, 0, 0, 0.5)' + ) if (focusedSample) { var graphedFontSize = Math.min(24, focusedSample.fontSize) // clamp to [-inf,24] graph.plotPoints([ diff --git a/docs/index.html b/docs/index.html index 4a9ee17bc..08a30dbbc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -73,7 +73,7 @@ html { font-family: 'Inter', sans-serif; } <h2 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h2> <p class="dynmet-calc"> Size - <input id="dynmet-font-size" type="number" value="16" + <input id="dynmet-font-size" type="number" value="16" min="4" max="99" ><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span> <span class="arrow">=</span> <span title='letter-spacing in CSS; also called "tracking" in some software.'>spacing diff --git a/docs/res/base.js b/docs/res/base.js index 05e98a7ff..20cf6734d 100644 --- a/docs/res/base.js +++ b/docs/res/base.js @@ -81,7 +81,7 @@ var HUDNotification = { // the compensating tracking in EM. // function InterDynamicTracking(fontSize) { - var a = -0.038, b = 0.161, c = -0.12; + var a = -0.0223, b = 0.185, c = -0.1745; // tracking = a + b * e ^ (c * fontSize) return a + b * Math.pow(Math.E, c * fontSize) } |