summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorRasmus Andersson <rasmus@figma.com>2019-02-08 05:18:10 +0300
committerRasmus Andersson <rasmus@figma.com>2019-02-08 05:18:10 +0300
commitec90e93e82855b33ee43a3396ef2e60b2673da1d (patch)
treec87cfb961657fbf904f92fe40f4987a643fec6b4 /docs
parentaf51a3e178eb7820dfcc90e6b2d026326653df0c (diff)
downloadinter-ec90e93e82855b33ee43a3396ef2e60b2673da1d.tar.xz
website: dynamic metrics
Diffstat (limited to 'docs')
-rw-r--r--docs/dynmetrics/index.css2
-rw-r--r--docs/dynmetrics/index.html64
-rw-r--r--docs/index.html2
-rw-r--r--docs/res/base.js2
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> &nbsp;&nbsp;
- <g><const title="Constant b">b</const> = <num data-binding="var-b">0.161</num></g> &nbsp;&nbsp;
- <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.12</num></g> &nbsp;&nbsp;
+ <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.0223</num></g> &nbsp;&nbsp;
+ <g><const title="Constant b">b</const> = <num data-binding="var-b">0.185</num></g> &nbsp;&nbsp;
+ <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.1745</num></g> &nbsp;&nbsp;
<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)
}