Miroirs/inter
1
0
Fork 0
mirror of https://github.com/rsms/inter.git synced 2024-11-17 07:47:33 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

website

Browse source
This commit is contained in:
Rasmus Andersson 2019-02-06 11:49:18 -08:00
parent 33aca18922
commit 65ce56b952
14 changed files with 509 additions and 313 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
docs/_data/feature_samples.yml Normal file
View file

@ -0,0 +1,126 @@
- title: Contextual alternates
tag: calt
description:
This feature is enabled by default and causes certain characters to adjust
themselves or be replaced depending on the surrounding context.
footer:
There are many more contextual alternates.
samples:
- "12›:‹34, FE›—‹X"
- "4›.‹2"
- "›(‹SEMI›)‹PERMANENT"
- "SFO ›->‹ STO"
- "IIA ›—>‹ OGG"
- "ARN ›<-->‹ OGG"
- "M›@‹N m@n"
- "Smile ›:-)‹"
- title: Tabular numbers
tag: tnum
description:
Fixed-width numbers are useful for tabular data, where comparing
columns across rows is desired.
samples:
- "1234567890"
- "1131711›&nbsp;‹"
- "0040900›&nbsp;‹"
- "11:31,711›&nbsp;‹"
- "00:40.900›&nbsp;‹"
- "0.45, 0.91, +0.08›&nbsp;‹"
- "1.00, 9.44, −0.13›&nbsp;‹"
- "0.00, 1.13, ~7.12›&nbsp;‹"
- title: Numerators
tag: numr
samples:
- "Hello ›0123‹"
- title: Denominators
tag: dnom
samples:
- "Hello ›0123‹"
- title: Superscript
tag: sups
samples:
- "X›0123 (+)-[=]‹"
- "X›abcdefghijklmnopqrstuvwxyz‹"
- title: Subscript
tag: subs
samples:
- "H›0123 (+)-[=]‹"
- "X›abcdefghijklmnopqrstuvwxyz‹"
- title: Fractions
tag: frac
description:
This feature is contextually sensitive and will convert "words" of
numbers separated by forward slash into proper fractions.
This feature is dynamic and allows for any fractions.
Note that the digits used for fractions are custom-made for their
small size, and are even made separately from the slightly larger
Superscript and Subscript numbers.
samples:
- "›1/3‹&nbsp; ›3/4‹&nbsp; ›1/5‹&nbsp; ›1337/5910‹"
- title: Case alternates
tag: case
description:
Switches out some glyphs to work better with capital letters and numbers.
samples:
- "›(‹Hello›)‹ ›[‹World›]‹ ›{‹9000›}‹"
- "SCHOOL ›@‹ RUN"
- "3 ›+‹ 9 ›=‹ 12 ›*‹ 1"
- "›*+÷±×=≠≈•~&lt;&gt;≤≥‹"
- "›→‹ ›←‹ ›⟶‹ ›⟵‹ ›−‹ ›-‹ ›–‹ ›—‹ ›:‹"
- title: "Stylistic set 1: Alternate digits"
tag: ss01
description:
An alternate style of digits.
Note that individual digit styles can be cherry-picked using the cvXX
features.
samples:
- "›1‹2›34‹5›6‹78›9‹0"
- "›13469‹"
- title: "Stylistic set 2: Disambiguation"
tag: ss02
description:
Alternate glyph set that increases visual difference between
similar-looking characters.
samples:
- "WP›0‹ACO9XS›I‹1›0‹12O9"
- "›Ill‹ega›l‹"
- "βeta ›ß‹eta Busine›ß‹"
- title: Discretionary ligatures
tag: dlig
description:
Alternate glyph set that increases visual difference between
similar-looking characters.
samples:
- "›¡¿‹What›?!‹"
- "›¿¡‹What›!?‹"
- title: Slashed zero
tag: zero
samples:
- "O›0‹123"
- title: Character variants
tag: cvXX
description: "Allows cherry-picking alternate characters."
samples:
- {feat: cv01, alt: "Alternate one", sample: "1"}
- {feat: cv02, alt: "Open four", sample: "4"}
- {feat: cv03, alt: "Open six", sample: "6"}
- {feat: cv04, alt: "Open nine", sample: "9"}
- {feat: cv05, alt: "Lower case L with tail", sample: "l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ"}
- {feat: cv06, alt: "Lower case R with straight tail", sample: "r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ"}
- {feat: cv07, alt: "Alternate German double-s", sample: "ß"}
- {feat: cv08, alt: "Upper-case i with serif", sample: "I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ"}
- {feat: cv09, alt: "Flat top three", sample: "3"}
- {feat: cv10, alt: "Capital G with spur", sample: "G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ"}

7
docs/_includes/ctxedit.html
View file

@ -1,9 +1,8 @@
{%
capture url_root
%}{% if site.safe == false %}/{% else %}/inter/{% endif
%}{%
endcapture %}{%
if site.safe == false %}{%
assign url_root = "/" %}{% else %}{%
assign url_root = "/inter/" %}{% endif %}{%
for file in site.static_files %}{%
assign _path = file.path | remove_first: "/inter" %}{%

7
docs/_includes/preload-font-files.html
View file

@ -1,9 +1,8 @@
{%
capture url_root
%}{% if site.safe == false %}/{% else %}/inter/{% endif
%}{%
endcapture %}{%
if site.safe == false %}{%
assign url_root = "/" %}{% else %}{%
assign url_root = "/inter/" %}{% endif %}{%
for file in site.static_files %}{%
assign _path = file.path | remove_first: "/inter" %}{%

11
docs/_layouts/default.html
View file

@ -2,14 +2,11 @@
assign build_version = site.time | date: "%Y%m%d%H%M%S" %}{%
assign description = "Inter is a typeface optimized for computer-user interfaces" %}{%
capture url_root
%}{% if site.safe == false %}/{% else %}/inter/{% endif
%}{%
endcapture %}{%
if site.safe == false %}{%
assign url_root = "/" %}{% else %}{%
assign url_root = "/inter/" %}{% endif %}{%
capture release_version
%}{{ site.data.fontinfo[0].version }}{%
endcapture %}{%
assign release_version = site.data.fontinfo[0].version %}{%
capture download_url
%}https://github.com/rsms/inter/releases/download/v{{ release_version }}/Inter-{{ release_version }}.zip{%

1
docs/dynmetrics/icons/letter-spacing.svg Executable file
View file

@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 321 B

1
docs/dynmetrics/icons/line-height.svg Executable file
View file

@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.297 12l.762-2.14h3.32L10.14 12h1.015L8.22 4h-1l-2.94 8h1.016zm1.066-3l1.324-3.734h.063L9.074 9h-2.71z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H1V1h14v1zm0 13H1v-1h14v1z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 304 B

1
docs/dynmetrics/icons/style.svg Executable file
View file

@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3h1v10H0zm3 0V3h2v10H3zm4 0V3h3v10H7zm5 0V3h4v10h-4z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 203 B

136
docs/dynmetrics/index.html
View file

@ -4,10 +4,9 @@ title: Dynamic Metrics
---
{%
capture url_root
%}{% if site.safe == false %}/{% else %}/inter/{% endif
%}{%
endcapture %}{%
if site.safe == false %}{%
assign url_root = "/" %}{% else %}{%
assign url_root = "/inter/" %}{% endif %}{%
for file in site.static_files %}{%
assign _path = file.path | remove_first: "/inter" %}{%
@ -41,13 +40,13 @@ endfor
<const>a</const> + <const>b</const> ×
<const title="Base of natural logarithm; ≈2.718">e</const><sup>(<const>c</const> × <const>z</const>)</sup>
</formula>
<formula>
<!--formula>
line height = <num data-binding="var-l">1.4</num> × <const>z</const>
</formula>
</formula-->
<formula title="Values for Inter">
<g><const title="Constant a">a</const> = <num data-binding="var-a">-0.02</num></g> &nbsp;&nbsp;
<g><const title="Constant b">b</const> = <num data-binding="var-b">0.205</num></g> &nbsp;&nbsp;
<g><const title="Constant c">c</const> = <num data-binding="var-c">-0.175</num></g> &nbsp;&nbsp;
<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>z</const> = font size</g>
</formula>
</p>
@ -76,14 +75,9 @@ endfor
</div>
<div class="sidebar controls">
<div class="control">
<label title="Number of ideal matches">ni</label>
<input title="Number of ideal matches" type="number" readonly data-binding="ideal-count">
<label title="Distance from ideal">di</label>
<input title="Distance from ideal" type="number" class="wide" readonly data-binding="ideal-distance">
</div>
<div class="control">
<img title="Style" class="icon" src="../samples/icons/style.svg">
<img title="Style" class="icon" src="icons/style.svg">
<select data-binding="style">
<option value="thin">Thin (BETA)</option>
<option value="thin-italic">Thin Italic (BETA)</option>
@ -107,11 +101,18 @@ endfor
</select>
</div>
<div class="control">
<img title="Base tracking" class="icon" src="../samples/icons/letter-spacing.svg">
<img title="Base tracking" class="icon" src="icons/letter-spacing.svg">
<input type="range" min="-0.05" max="0.06" step="0.001" data-binding="base-tracking">
<input type="number" min="-0.15" max="1" step="0.001" data-binding="base-tracking">
</div>
<div class="control">
<img title="Line height" class="icon" src="icons/line-height.svg">
<input type="range" min="1" max="2" step="0.01" data-binding="var-l">
<input type="number" min="1" max="2" step="0.01" data-binding="var-l">
</div>
<hr>
<div class="control">
<label title="Constant a">a</label>
<input type="range" min="-0.05" max="0" step="0.001" data-binding="var-a">
@ -127,15 +128,20 @@ endfor
<input type="range" min="-1" max="0" step="0.01" data-binding="var-c">
<input type="number" min="-1" max="0" step="0.001" data-binding="var-c">
</div>
<hr>
<div class="control">
<label title="Constant l controls line height">l</label>
<input type="range" min="1" max="2" step="0.1" data-binding="var-l">
<input type="number" min="1" max="2" step="0.1" data-binding="var-l">
</div>
<hr class="without-bottom-margin">
<canvas class="graphplot">Canvas not Supported</canvas>
<hr>
<div class="control">
<label title="Number of ideal matches">ni</label>
<input title="Number of ideal matches" type="number" readonly data-binding="ideal-count">
<label title="Distance from ideal">di</label>
<input title="Distance from ideal" type="number" class="wide" readonly data-binding="ideal-distance">
</div>
<hr class="without-bottom-margin">
<canvas class="graphplot">Canvas not Supported</canvas>
<hr class="when-selection without-top-margin">
<h3 class="when-selection">CSS</h3>
<textarea class="when-selection" readonly id="code-output"></textarea>
@ -194,24 +200,65 @@ function parseValues(s) {
}
setIdealValues({
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.01,
24: -0.013,
30: -0.016,
40: -0.02,
80: -0.02,
// // 2018
// 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.01,
// 24: -0.013,
// 30: -0.016,
// 40: -0.02,
// 80: -0.02,
// 2019-02-02
// 6: 0.066,
// 7: 0.05,
// 8: 0.036,
// 9: 0.025,
// 10: 0.015,
// 11: 0.007,
// 12: 0,
// 13: -0.005,
// 14: -0.01,
// 15: -0.014,
// 16: -0.017,
// 17: -0.02,
// 18: -0.022,
// 20: -0.026,
// 24: -0.03,
// 30: -0.033,
// 40: -0.034,
// 80: -0.034,
// 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,
})
@ -223,7 +270,8 @@ setIdealValues({
// 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; // 2018-09-28
var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02
// 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 l = 1.4

7
docs/glyphs/index.html
View file

@ -4,10 +4,9 @@ title: Glyphs
---
{%
capture url_root
%}{% if site.safe == false %}/{% else %}/inter/{% endif
%}{%
endcapture %}{%
if site.safe == false %}{%
assign url_root = "/" %}{% else %}{%
assign url_root = "/inter/" %}{% endif %}{%
for file in site.static_files %}{%
assign _path = file.path | remove_first: "/inter" %}{%

15
docs/index.css
View file

@ -101,9 +101,7 @@ tablex in, tablex to, tablex out {
white-space: pre;
padding-bottom:0.5em;
}
/*tablex to {
width:0;
}*/
tablex to::after {
-moz-font-feature-settings: 'calt' 1, 'case' 1;
-ms-font-feature-settings: 'calt' 1, 'case' 1;
@ -297,3 +295,14 @@ tablex out.cv10 {
boxes.features box h3 + p {
margin-top:0.5em;
}
boxes.features grid .sample {
word-break: break-word;
word-wrap: break-word;
}
boxes.features grid .sample em {
font-style: inherit;
background: #e4fdef;
color: black;
}

274
docs/index.html
View file

@ -3,11 +3,6 @@ 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" %}{%
@ -69,10 +64,10 @@ html { font-family: 'Inter', sans-serif; }
<p>&nbsp;</p>
<h2 id="dynamic-metrics"><a href="{{url_root}}dynmetrics/">Dynamic Metrics</a></h2>
<h2 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h2>
<p class="dynmet-calc">
Size
<input id="dynmet-font-size" type="number" value="12"
<input id="dynmet-font-size" type="number" value="16"
><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
@ -83,7 +78,7 @@ html { font-family: 'Inter', sans-serif; }
There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter <em>Dynamic Metrics</em> 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.
</p>
<p>
<a href="{{url_root}}dynmetrics/">Learn more…</a>
<a href="dynmetrics/">Learn more…</a>
</p>
<p>&nbsp;</p>
@ -175,7 +170,7 @@ html { font-family: 'Inter', sans-serif; }
<div class="row"><div>
<div class="row features"><div>
<h2><a id="features" href="#features">Features</a></h2>
<p>
Inter comes with many OpenType features that can be used to
@ -184,211 +179,82 @@ html { font-family: 'Inter', sans-serif; }
alternative variations.
</p>
<boxes class="features">
{% for f in site.data.feature_samples %}
<box>
<h3>Contextual alternates <q title='OpenType feature ID'>calt</q></h3>
<p>
This feature is enabled by default and causes certain characters to
adjust themselves or be replaced depending on the surrounding context.
</p>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>12<em>:</em>34, FE<em>—</em>X</in><to></to><out>12:34, FE—X</out></r>
<r><in>4<em>.</em>2</in><to></to><out>4.2</out></r>
<r><in><em>(</em>SEMI<em>)</em>PERMANENT</in><to></to><out>(SEMI)PERMANENT</out></r>
<r><in>SFO <em>-></em> STO</in><to></to><out>SFO -> STO</out></r>
<r><in>IIA <em>—></em> OGG</in><to></to><out>IIA —> OGG</out></r>
<r><in>ARN <em><--></em> OGG</in><to></to><out>ARN <--> OGG</out></r>
<r><in>M<em>@</em>N m@n</in><to></to><out>M@N m@n</out></r>
<r><in>Smile <em>:-)</em></in><to></to><out>Smile :-)</out></r>
</t></tablex>
<p>
There are many more contextual alternates.
<h3>{{f.title}} <q title='OpenType feature ID'>{{f.tag}}</q></h3>
{%
if f.description %}
<p>{{f.description}}</p>
{% endif %}{%
assign feat_tag = f.tag %}{%
assign has_feature_col = false %}{%
for s in f.samples %}{%
if s.feat %}{%
assign has_feature_col = true %}{%
break %}{%
endif %}{%
endfor
%}
{% if has_feature_col %}
<grid class="c8">
<c span="1" class="low-contrast ">Feature</c>
<c span="3" class="low-contrast">Disabled</c>
<c span="1" class="low-contrast center-text">→</c>
<c span="3" class="low-contrast">Enabled</c>
{% else %}
<grid class="c9">
<c span="4" class="low-contrast">Disabled</c>
<c span="1" class="low-contrast center-text">→</c>
<c span="4" class="low-contrast">Enabled</c>
{% endif %}
{% for s in f.samples %}
{%
if has_feature_col %}{%
assign sample = s.sample %}{%
assign feat_tag = s.feat %}{%
else %}{%
assign sample = s %}{%
endif %}{%
assign sample_in = sample | replace: "›", "<em>" | replace: "‹", "</em>" %}{%
assign sample_out = sample | remove: "›" | remove: "‹"
%} {% if has_feature_col %}
<c span="1" class="">{{feat_tag}}</c>
<c span="3" class="sample ff-none">{{sample_in}}</c>
<c span="1" class="low-contrast center-text">→</c>
<c span="3" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
{% else %}
<c span="4" class="sample ff-none">{{sample_in}}</c>
<c span="1" class="low-contrast center-text">→</c>
<c span="4" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
{% endif %}
{% endfor %}
</grid>
<p class="example" title="CSS code">
<tt>font-feature-settings: '{{feat_tag}}' 1</tt>
</p>
{% if f.footer %}
<p>{{f.footer}}</p>
{% endif %}
</box>
<box>
<h3>Tabular numbers <q title='OpenType feature ID'>tnum</q></h3>
<p>
Fixed-width numbers are useful for tabular data, where comparing
columns across rows is desired.
</p>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>1234567890</in><to></to><out class="tnum">1234567890</out></r>
<r><in>1131711<em>&nbsp;</em></in><to></to><out class="tnum">1131711<em>&nbsp;</em></out></r>
<r><in>0040900<em>&nbsp;</em></in><to></to><out class="tnum">0040900<em>&nbsp;</em></out></r>
<r><in>11:31,711<em>&nbsp;</em></in><to></to><out class="tnum">11:31,711<em>&nbsp;</em></out></r>
<r><in>00:40.900<em>&nbsp;</em></in><to></to><out class="tnum">00:40.900<em>&nbsp;</em></out></r>
<r><in>0.45, 0.91, +0.08<em>&nbsp;</em></in><to></to><out class="tnum">0.45, 0.91, +0.08<em>&nbsp;</em></out></r>
<r><in>1.00, 9.44, −0.13<em>&nbsp;</em></in><to></to><out class="tnum">1.00, 9.44, −0.13<em>&nbsp;</em></out></r>
<r><in>0.00, 1.13, ~7.12<em>&nbsp;</em></in><to></to><out class="tnum">0.00, 1.13, ~7.12<em>&nbsp;</em></out></r>
</t></tablex>
</box>
<box>
<h3>Numerators <q title='OpenType feature ID'>numr</q></h3>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>Hello <em>0123</em></in><to></to><out class="numr">Hello 0123</out></r>
</t></tablex>
</box>
<box>
<h3>Denominators <q title='OpenType feature ID'>dnom</q></h3>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>Hello <em>0123</em></in><to></to><out class="dnom">Hello 0123</out></r>
</t></tablex>
</box>
<box>
<h3>Superscript <q title='OpenType feature ID'>sups</q></h3>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>H<em>ello 0123</em></in><to></to><out class="sups">Hello 0123</out></r>
<r><in><em>abcdefghijklm</em></in><to></to><out class="sups">abcdefghijklm</out></r>
<r><in><em>nopqrstuvwxyz</em></in><to></to><out class="sups">nopqrstuvwxyz</out></r>
</t></tablex>
</box>
<box>
<h3>Subscript <q title='OpenType feature ID'>subs</q></h3>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>H<em>ello 0123</em></in><to></to><out class="subs">Hello 0123</out></r>
<r><in><em>abcdefghijklm</em></in><to></to><out class="subs">abcdefghijklm</out></r>
<r><in><em>nopqrstuvwxyz</em></in><to></to><out class="subs">nopqrstuvwxyz</out></r>
</t></tablex>
</box>
<box>
<h3>Fractions <q title='OpenType feature ID'>frac</q></h3>
<p>
This feature is contextually sensitive and will convert "words" of
numbers separated by forward slash into proper fractions.
This feature is dynamic and allows for any fractions.
Note that the digits used for fractions are custom-made for their
small size, and are even made separately from the slightly larger
Superscript and Subscript numbers.
</p>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r>
<in><em>1/3</em> <em>3/4</em> <em>1/5</em> <em>1337/5910</em></in>
<to></to><out class="frac">1/3 3/4 1/5 1337/5910</out>
</r>
</t></tablex>
</box>
<box>
<h3>Case alternates <q title='OpenType feature ID'>case</q></h3>
<p>
Switches out some glyphs to work better with capital letters and numbers.
</p>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r>
<in><em>(</em>Hello<em>)</em> <em>[</em>World<em>]</em> <em>{</em>9000<em>}</em></in>
<to></to><out class="case">(Hello) [World] {9000}</out>
</r>
<r><in>SCHOOL <em>@</em> RUN</in><to></to><out class="case">SCHOOL @ RUN</out></r>
<r><in>3 <em>+</em> 9 <em>=</em> 12 <em>*</em> 1</in><to></to><out class="case">3 + 9 = 12 * 1</out></r>
<r><in><em>*+÷±×=≠≈•~&lt;&gt;≤≥</em></in><to></to><out class="case">*+÷±×=≠≈•~&lt;&gt;≤≥</out></r>
<r><in><em>→</em> <em>←</em> <em>⟶</em> <em>⟵</em> <em>−</em> <em>-</em> <em>–</em> <em>—</em> <em>:</em></in><to></to><out class="case">→ ← ⟶ ⟵ − - – — :</out></r>
</t></tablex>
</box>
<box>
<h3>Stylistic set 1: Alternate digits <q title='OpenType feature ID'>ss01</q></h3>
<p>
An alternate style of digits.
Note that individual digit styles can be cherry-picked using the cvXX
features.
</p>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r>
<in><em>1</em>2<em>34</em>5<em>6</em>78<em>9</em>0</in>
<to></to><out class="ss01">1234567890</out>
</r>
<r><in><em>13469</em></in><to></to><out class="ss01">13469</out></r>
</t></tablex>
</box>
<box>
<h3>Stylistic set 2: Disambiguation <q title='OpenType feature ID'>ss02</q></h3>
<p>
Alternate glyph set that increases visual difference between similar-looking characters.
</p>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>WP<em>0</em>AC2A9XS<em>I</em>1<em>0</em>12O9</in><to></to><out class="ss02">WP0AC2A9XSI1012O9</out></r>
<r><in><em>Ill</em>ega<em>l</em></in><to></to><out class="ss02">Illegal</out></r>
<r><in>βeta <em>ß</em>eta Busine<em>ß</em></in><to></to><out class="ss02">βeta ßeta Busineß</out></r>
</t></tablex>
</box>
<box>
<h3>Discretionary ligatures <q title='OpenType feature ID'>dlig</q></h3>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in><em>¡¿</em>What<em>?!</em></in><to></to><out class="dlig">¡¿What?!</out></r>
<r><in><em>¿¡</em>What<em>!?</em></in><to></to><out class="dlig">¿¡What!?</out></r>
</t></tablex>
</box>
<box>
<h3>Slashed zero <q title='OpenType feature ID'>zero</q></h3>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in><em>0</em>123</in><to></to><out class="zero">0123</out></r>
</t></tablex>
</box>
<box>
<h3>Character variants <q title='OpenType feature ID'>cvXX</q></h3>
<p>
Allows cherry-picking alternate characters.
</p>
<tablex><t>
<h><name>Feature&nbsp;&nbsp;</name><in>Disabled</in><to></to><out>Enabled</out></h>
<r title="Alternate one"><name>cv01</name><in>1</in><to></to><out class="cv01">1</out></r>
<r title="Open four"><name>cv02</name><in>4</in><to></to><out class="cv02">4</out></r>
<r title="Open six"><name>cv03</name><in>6</in><to></to><out class="cv03">6</out></r>
<r title="Open nine"><name>cv04</name><in>9</in><to></to><out class="cv04">9</out></r>
<r title="Lower case L with tail"><name>cv05</name><in>l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ</in><to></to><out class="cv05">l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ</out></r>
<r title="Lower case R with straight tail"><name>cv06</name><in>r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ</in><to></to><out class="cv06">r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ</out></r>
<r title="Alternate German double-s"><name>cv07</name><in>ß</in><to></to><out class="cv07">ß</out></r>
<r title="Upper-case i with serif"><name>cv08</name><in>I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ<br>Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ<br>Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І Ї</in><to></to><out class="cv08">I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ<br>Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ<br>Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І Ї</out></r>
<r title="Flat top three"><name>cv09</name><in>3</in><to></to><out class="cv09">3</out></r>
<r title="Capital G with spur"><name>cv10</name><in>G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ</in><to></to><out class="cv09">G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ</out></r>
</t></tablex>
</box>
<box>
<h3>Capital Spacing <q title='OpenType feature ID'>cpsp</q></h3>
<p>
Slightly increases letter spacing for increased legibility of
capital letters. Note: It's usually better to set letter-spacing
(aka tracking) manually instead of using this feature. It's here
mainly for completeness.
</p>
<tablex><t>
<h><in>Disabled</in><to></to><out>Enabled</out></h>
<r><in>FOREVER IMMATERIAL</in><to></to><out class="cpsp">FOREVER IMMATERIAL</out></r>
<r><in>TORSCHLUẞPANIK</in><to></to><out class="cpsp">TORSCHLUẞPANIK</out></r>
</t></tablex>
</box>
{% endfor %}
</boxes>
<p>
Additional features, not highlighted above:
<q title='OpenType feature ID'>locl</q>,
<q title='OpenType feature ID'>salt</q>,
<q title='OpenType feature ID'>aalt</q>,
<q title='OpenType feature ID'>ccmp</q>,
<q title='OpenType feature ID'>ordn</q> and
<q title='OpenType feature ID'>salt</q>,
<q title='OpenType feature ID'>cpsp</q> and
<q title='OpenType feature ID'>ordn</q>.
<br>
You can explore features in the <a href="lab/">interactive lab</a>.
</p>
<p>&nbsp;</p>

227
docs/res/base.css
View file

@ -7,7 +7,7 @@ body {
font-size: 15px;
line-height: 1.5;
letter-spacing: -0.002em;
letter-spacing: -0.004em;
font-weight: 400;
padding-bottom: 30px;
@ -24,11 +24,11 @@ body {
-moz-font-kerning: normal;
-o-font-kerning: normal;
font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-webkit-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-ms-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-moz-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
-o-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
font-variant-ligatures: contextual common-ligatures;
-webkit-font-variant-ligatures: contextual common-ligatures;
-ms-font-variant-ligatures: contextual common-ligatures;
-moz-font-variant-ligatures: contextual common-ligatures;
-o-font-variant-ligatures: contextual common-ligatures;
}
/* Font style classifiers used by samples and dynmetrics */
@ -157,7 +157,7 @@ h1, h2, h3 {
h1 {
color: #222;
font-size: 55px;
letter-spacing: -0.03em;
letter-spacing: -0.038em;
line-height: 1.1em;
text-indent: -2px;
margin-bottom: 30px;
@ -167,11 +167,15 @@ h1 {
h2 {
font-size: 30px;
font-weight: 600;
letter-spacing: -0.015em;
letter-spacing: -0.025em;
line-height: 30px;
margin-bottom: 25px;
margin-top: 10px;
}
.row.dark h2,
.row.black h2 {
letter-spacing: -0.014em;
}
h2.back {
color:rgba(0,0,0,0.2);
font-size: inherit;
@ -207,6 +211,11 @@ h2.banner {
h3 {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.02em;
}
.row.dark h3,
.row.black h3 {
letter-spacing: -0.012em;
}
h3 q {
font-weight: 400;
@ -333,13 +342,18 @@ h1 > a, h2 > a, h3 > a {
color: #3B414A;
}
ul {
margin-left:1.1em;
}
/* --------------------------------------------------------------------- */
a > img {
display: block;
}
ul { margin-left:1.1em; }
a > img { display: block; }
/* --------------------------------------------------------------------- */
/* generic helpers */
.low-contrast { opacity: 0.4; }
.center-text { text-align: center; }
/* --------------------------------------------------------------------- */
#repertoire-image {
display:block;
@ -358,6 +372,7 @@ a > img {
width: 100%;
}
/* --------------------------------------------------------------------- */
tablex {
display: flex;
@ -380,6 +395,131 @@ tablex {
display: table-row;
}
/* --------------------------------------------------------------------- */
/*
grid with 4 major columns subdivided twice
| | | | |
| 1 | 2 | 3 | 4 |
| | | | |
| | | | |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| | | | | | | | |
| | | | | | | | |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| | | | | | | | | | | | | | | | |
| | | | | | | | | | | | | | | | |
*/
.row.features { display:none; }
@supports (display: grid) {
.row.features { display:flex; }
}
.row.features p.example { margin-top:2rem; opacity:0.4; }
grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
grid.c4 { grid-template-columns: repeat(4, 1fr); }
grid.c8 { grid-template-columns: repeat(8, 1fr); }
grid.c9 { grid-template-columns: repeat(9, 1fr); }
grid.c16 { grid-template-columns: repeat(16, 1fr); }
/*grid, grid4 {
grid-template-columns: repeat(4, 1fr);
}*/
c {
display: block;
grid-column-end: span 1;
}
c[start="1"] { grid-column-start: 1; }
c[start="2"] { grid-column-start: 2; }
c[start="3"] { grid-column-start: 3; }
c[start="4"] { grid-column-start: 4; }
c[start="5"] { grid-column-start: 5; }
c[start="6"] { grid-column-start: 6; }
c[start="7"] { grid-column-start: 7; }
c[start="8"] { grid-column-start: 8; }
c[start="9"] { grid-column-start: 9; }
c[span="1"] { grid-column-end: span 1; }
c[span="2"] { grid-column-end: span 2; }
c[span="3"] { grid-column-end: span 3; }
c[span="4"] { grid-column-end: span 4; }
c[span="5"] { grid-column-end: span 5; }
c[span="6"] { grid-column-end: span 6; }
c[span="7"] { grid-column-end: span 7; }
c[span="8"] { grid-column-end: span 8; }
c[span="9"] { grid-column-end: span 9; }
c[span="1-1"] { grid-column: 1 / 1; }
c[span="2-5"] { grid-column: 2 / 5; }
c[span="2-4"] { grid-column: 2 / 4; }
grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; }
grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; }
/* .debug can be added to a grid to visualize its effective cells.
.debug-color applies alternating colors. */
grid.debug > *, grid.debug-color > * {
--color: rgba(250, 230, 0, 0.2);
background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
}
grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); }
grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); }
grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); }
.col-all { grid-column: 1 / span 16; }
.col-1 { grid-column: 1 / span 2; }
.col-1-2 { grid-column: 1 / span 4; }
.col-1-3 { grid-column: 1 / span 6; }
.col-1-4 { grid-column: 1 / span 8; }
.col-1-5 { grid-column: 1 / span 10; }
.col-1-6 { grid-column: 1 / span 12; }
.col-1-7 { grid-column: 1 / span 14; }
.col-1-8 { grid-column: 1 / span 16; }
.col-2 { grid-column: 2 / span 2; }
.col-2-2 { grid-column: 2 / span 4; }
.col-2-3 { grid-column: 2 / span 6; }
.col-2-4 { grid-column: 2 / span 8; }
.col-2-5 { grid-column: 2 / span 10; }
.col-2-6 { grid-column: 2 / span 12; }
.col-2-7 { grid-column: 2 / span 14; }
.col-3 { grid-column: 3 / span 2; }
.col-3-2 { grid-column: 3 / span 4; }
.col-3-3 { grid-column: 3 / span 6; }
.col-3-4 { grid-column: 3 / span 8; }
.col-3-5 { grid-column: 3 / span 10; }
.col-3-6 { grid-column: 3 / span 12; }
.col-4 { grid-column: 4 / span 2; }
.col-4-2 { grid-column: 4 / span 4; }
.col-4-3 { grid-column: 4 / span 6; }
.col-4-4 { grid-column: 4 / span 8; }
.col-4-5 { grid-column: 4 / span 10; }
.col-5 { grid-column: 5 / span 2; }
.col-5-2 { grid-column: 5 / span 4; }
.col-5-3 { grid-column: 5 / span 6; }
.col-5-4 { grid-column: 5 / span 8; }
.col-6 { grid-column: 6 / span 2; }
.col-6-2 { grid-column: 6 / span 4; }
.col-6-3 { grid-column: 6 / span 6; }
.col-7 { grid-column: 7 / span 2; }
.col-7-2 { grid-column: 7 / span 4; }
.col-8 { grid-column: 8 / span 2; }
/* --------------------------------------------------------------------- */
boxes {
display: flex;
@ -411,6 +551,16 @@ box h3 {
margin-bottom:0.8em;
}
box.large tablex r {
line-height: 1.5;
}
box.large tablex r in,
box.large tablex r to,
box.large tablex r out {
font-size: 2rem;
padding-bottom: 0;
}
#hud-notification {
position: fixed;
bottom: 20px;
@ -536,30 +686,31 @@ instead.
*/
.ff-dlig { font-feature-settings: 'dlig' 1; }
.ff-numr { font-feature-settings: 'numr' 1; }
.ff-dnom { font-feature-settings: 'dnom' 1; }
.ff-tnum { font-feature-settings: 'tnum' 1; }
.ff-case { font-feature-settings: 'case' 1; }
.ff-zero { font-feature-settings: 'zero' 1; }
.ff-frac { font-feature-settings: 'frac' 1; }
.ff-sups { font-feature-settings: 'sups' 1; }
.ff-subs { font-feature-settings: 'subs' 1; }
.ff-cpsp { font-feature-settings: 'cpsp' 1; }
.ff-salt { font-feature-settings: 'salt' 1; }
.ff-none { font-feature-settings: 'calt' 0, 'liga' 0; -webkit-font-feature-settings: 'calt' 0, 'liga' 0; -ms-font-feature-settings: 'calt' 0, 'liga' 0; -moz-font-feature-settings: 'calt' 0, 'liga' 0; }
.ff-dlig { font-feature-settings: 'dlig' 1; -webkit-font-feature-settings: 'dlig' 1; -ms-font-feature-settings: 'dlig' 1; -moz-font-feature-settings: 'dlig' 1; }
.ff-numr { font-feature-settings: 'numr' 1; -webkit-font-feature-settings: 'numr' 1; -ms-font-feature-settings: 'numr' 1; -moz-font-feature-settings: 'numr' 1; }
.ff-dnom { font-feature-settings: 'dnom' 1; -webkit-font-feature-settings: 'dnom' 1; -ms-font-feature-settings: 'dnom' 1; -moz-font-feature-settings: 'dnom' 1; }
.ff-tnum { font-feature-settings: 'tnum' 1; -webkit-font-feature-settings: 'tnum' 1; -ms-font-feature-settings: 'tnum' 1; -moz-font-feature-settings: 'tnum' 1; }
.ff-case { font-feature-settings: 'case' 1; -webkit-font-feature-settings: 'case' 1; -ms-font-feature-settings: 'case' 1; -moz-font-feature-settings: 'case' 1; }
.ff-zero { font-feature-settings: 'zero' 1; -webkit-font-feature-settings: 'zero' 1; -ms-font-feature-settings: 'zero' 1; -moz-font-feature-settings: 'zero' 1; }
.ff-frac { font-feature-settings: 'frac' 1; -webkit-font-feature-settings: 'frac' 1; -ms-font-feature-settings: 'frac' 1; -moz-font-feature-settings: 'frac' 1; }
.ff-sups { font-feature-settings: 'sups' 1; -webkit-font-feature-settings: 'sups' 1; -ms-font-feature-settings: 'sups' 1; -moz-font-feature-settings: 'sups' 1; }
.ff-subs { font-feature-settings: 'subs' 1; -webkit-font-feature-settings: 'subs' 1; -ms-font-feature-settings: 'subs' 1; -moz-font-feature-settings: 'subs' 1; }
.ff-cpsp { font-feature-settings: 'cpsp' 1; -webkit-font-feature-settings: 'cpsp' 1; -ms-font-feature-settings: 'cpsp' 1; -moz-font-feature-settings: 'cpsp' 1; }
.ff-salt { font-feature-settings: 'salt' 1; -webkit-font-feature-settings: 'salt' 1; -ms-font-feature-settings: 'salt' 1; -moz-font-feature-settings: 'salt' 1; }
.ff-salt-zero { font-feature-settings: 'salt' 1, 'zero' 1; }
.ff-cv07-salt-zero { font-feature-settings: 'cv07' 1, 'salt' 1, 'zero' 1; }
.ff-ss01 { font-feature-settings: 'ss01' 1; }
.ff-ss02 { font-feature-settings: 'ss02' 1; }
.ff-cv01 { font-feature-settings: 'cv01' 1; }
.ff-cv02 { font-feature-settings: 'cv02' 1; }
.ff-cv03 { font-feature-settings: 'cv03' 1; }
.ff-cv04 { font-feature-settings: 'cv04' 1; }
.ff-cv05 { font-feature-settings: 'cv05' 1; }
.ff-cv06 { font-feature-settings: 'cv06' 1; }
.ff-cv07 { font-feature-settings: 'cv07' 1; }
.ff-cv08 { font-feature-settings: 'cv08' 1; }
.ff-cv09 { font-feature-settings: 'cv09' 1; }
.ff-cv10 { font-feature-settings: 'cv10' 1; }
.ff-ss01 { font-feature-settings: 'ss01' 1; -webkit-font-feature-settings: 'ss01' 1; -ms-font-feature-settings: 'ss01' 1; -moz-font-feature-settings: 'ss01' 1; }
.ff-ss02 { font-feature-settings: 'ss02' 1; -webkit-font-feature-settings: 'ss02' 1; -ms-font-feature-settings: 'ss02' 1; -moz-font-feature-settings: 'ss02' 1; }
.ff-cv01 { font-feature-settings: 'cv01' 1; -webkit-font-feature-settings: 'cv01' 1; -ms-font-feature-settings: 'cv01' 1; -moz-font-feature-settings: 'cv01' 1; }
.ff-cv02 { font-feature-settings: 'cv02' 1; -webkit-font-feature-settings: 'cv02' 1; -ms-font-feature-settings: 'cv02' 1; -moz-font-feature-settings: 'cv02' 1; }
.ff-cv03 { font-feature-settings: 'cv03' 1; -webkit-font-feature-settings: 'cv03' 1; -ms-font-feature-settings: 'cv03' 1; -moz-font-feature-settings: 'cv03' 1; }
.ff-cv04 { font-feature-settings: 'cv04' 1; -webkit-font-feature-settings: 'cv04' 1; -ms-font-feature-settings: 'cv04' 1; -moz-font-feature-settings: 'cv04' 1; }
.ff-cv05 { font-feature-settings: 'cv05' 1; -webkit-font-feature-settings: 'cv05' 1; -ms-font-feature-settings: 'cv05' 1; -moz-font-feature-settings: 'cv05' 1; }
.ff-cv06 { font-feature-settings: 'cv06' 1; -webkit-font-feature-settings: 'cv06' 1; -ms-font-feature-settings: 'cv06' 1; -moz-font-feature-settings: 'cv06' 1; }
.ff-cv07 { font-feature-settings: 'cv07' 1; -webkit-font-feature-settings: 'cv07' 1; -ms-font-feature-settings: 'cv07' 1; -moz-font-feature-settings: 'cv07' 1; }
.ff-cv08 { font-feature-settings: 'cv08' 1; -webkit-font-feature-settings: 'cv08' 1; -ms-font-feature-settings: 'cv08' 1; -moz-font-feature-settings: 'cv08' 1; }
.ff-cv09 { font-feature-settings: 'cv09' 1; -webkit-font-feature-settings: 'cv09' 1; -ms-font-feature-settings: 'cv09' 1; -moz-font-feature-settings: 'cv09' 1; }
.ff-cv10 { font-feature-settings: 'cv10' 1; -webkit-font-feature-settings: 'cv10' 1; -ms-font-feature-settings: 'cv10' 1; -moz-font-feature-settings: 'cv10' 1; }

2
docs/res/base.js
View file

@ -81,7 +81,7 @@ var HUDNotification = {
// the compensating tracking in EM.
//
function InterDynamicTracking(fontSize) {
var a = -0.02, b = 0.0755, c = -0.102;
var a = -0.038, b = 0.161, c = -0.12;
// tracking = a + b * e ^ (c * fontSize)
return a + b * Math.pow(Math.E, c * fontSize)
}

7
docs/samples/index.html
View file

@ -4,10 +4,9 @@ title: Samples
---
{%
capture url_root
%}{% if site.safe == false %}/{% else %}/inter/{% endif
%}{%
endcapture %}{%
if site.safe == false %}{%
assign url_root = "/" %}{% else %}{%
assign url_root = "/inter/" %}{% endif %}{%
for file in site.static_files %}{%
assign _path = file.path | remove_first: "/inter" %}{%