diff options
author | Rasmus Andersson <rasmus@figma.com> | 2019-02-06 22:49:18 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@figma.com> | 2019-02-06 22:49:18 +0300 |
commit | 65ce56b9527ce698214f24db779b7a8a2a4783a1 (patch) | |
tree | a52d8cfd36071cf47e674ab4731eb4a8e650b88b /docs/index.html | |
parent | 33aca189225fff8e5f94838190f8ed10f5f9d8f3 (diff) | |
download | inter-65ce56b9527ce698214f24db779b7a8a2a4783a1.tar.xz |
website
Diffstat (limited to 'docs/index.html')
-rw-r--r-- | docs/index.html | 274 |
1 files changed, 70 insertions, 204 deletions
diff --git a/docs/index.html b/docs/index.html index fb6e376a7..bd559d96d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -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> </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> </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. - </p> - </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> </em></in><to></to><out class="tnum">1131711<em> </em></out></r> - <r><in>0040900<em> </em></in><to></to><out class="tnum">0040900<em> </em></out></r> - <r><in>11:31,711<em> </em></in><to></to><out class="tnum">11:31,711<em> </em></out></r> - <r><in>00:40.900<em> </em></in><to></to><out class="tnum">00:40.900<em> </em></out></r> - <r><in>0.45, 0.91, +0.08<em> </em></in><to></to><out class="tnum">0.45, 0.91, +0.08<em> </em></out></r> - <r><in>1.00, 9.44, −0.13<em> </em></in><to></to><out class="tnum">1.00, 9.44, −0.13<em> </em></out></r> - <r><in>0.00, 1.13, ~7.12<em> </em></in><to></to><out class="tnum">0.00, 1.13, ~7.12<em> </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>*+÷±×=≠≈•~<>≤≥</em></in><to></to><out class="case">*+÷±×=≠≈•~<>≤≥</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. + <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> - <tablex><t> - <h><name>Feature </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> + {% if f.footer %} + <p>{{f.footer}}</p> + {% endif %} </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> </p> |