inter/docs/index.html

---
layout: default
---
{% include defs.html %}{%

assign release_version = site.data.fontinfo[0].version %}{%

for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
  if _path == "/index.css" %}{%
    assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
  elsif _path == "/index-var.css" %}{%
    assign index_var_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
  elsif _path == "/index-var.js" %}{%
    assign index_var_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
  endif %}{%
endfor %}{%

assign lang_count = 0 %}{%
for c in site.data.languages %}{%
  for language in c.languages %}{%
    assign lang_count = lang_count | plus:1 %}{%
  endfor %}{%
endfor -%}
<style type="text/css">

body { overflow-x: hidden }

h1.title {
  font-size: 6rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
  margin-top: 4rem;
  font-size: calc(100vw / 8);
  line-height: 1.0;
}

.row.examples .spacer { height: 3rem; }
.row.section1-roman {}
@media (prefers-color-scheme: light) {
  /*.row.section1-italic {
    background: var(--foreground-color);
    color: var(--background-color);
  }*/
}
@media (prefers-color-scheme: dark) {
  /*.row.section1-italic {
    background: #555;
  }*/
}

.row.examples .label { font-size: var(--font-size); opacity: 0.3; }
.row.examples a.label:hover { opacity: 1; }
.row.examples .label.r { text-align: right }
.example2 {
  font-size: 10vw;
  line-height: initial;
  margin-left: calc(1em / -18);
  letter-spacing: -0.02em;
}
.example2.i { font-style:italic; }
.example2.single-line {
  line-height: 1.0;
  white-space: nowrap;
}
.example2.multi-line {
  font-size: 6vw;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  line-height: 1.1;
}
.example2.features {
  line-height: 1.2;
  white-space: nowrap;
  font-size: 16vw;
}

.example-a-z {
  font-size: 9.5vw;
  white-space: nowrap;
  font-weight: 450;
  line-height: 1.0;
  display: flex;
  flex-direction: column; /* ☰ */
  gap: 1rem; /* label to text */
  padding: 0 0;
  margin: 0;
  width: 100%;
}

.row.features-section1 { padding-bottom:1.5rem; }
.row.features-section1 hr:last-child { display: none; }
.row.features-section2 { padding-top:3vw; }

.row.features-section1 {
  /* light pink:
  --background-color: #ffb6c1;
  --em-color: #815159;
  */
  --background-color: var(--warm-yellow);
  --foreground-color: #000011;
  --em-color: color(display-p3 0.5 0.4 0);
  --unit-background-color: rgba(0, 0, 0, 0.08);
  color: var(--foreground-color);
  background: var(--background-color);
}
@supports not (color: color(display-p3 1 1 1)) {
  .row.features-section1 {
    --em-color: #a07400;
  }
}
.feat-example em { color: var(--em-color); }

.feat-name p { margin-bottom:0 }
.feat-example {
  font-size: 2.5vw;
}
.feat-example em {
  font-style: normal;
}
.feat-table hr.thin {
  height: 1px;
  opacity: 0.3;
}



input[type="checkbox"] {
  --height:               calc(1rem * var(--line-height));
  --checkbox-size:        1rem;
  --checkbox-handle-size: calc(var(--checkbox-size) - 8px);
  --checkbox-border:      2px;
  --checkbox-bg:          black;
  --checkbox-fg:          black;
  --checkbox-on-bg:       black;
  --checkbox-on-fg:       var(--background-color);
  --focus-color:          blue;

  flex: 0 0 auto;
  margin: calc((var(--height) - var(--checkbox-size)) / 2) 0;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none;
  user-select: none; -moz-user-select: none; -webkit-user-select:none;
  background: none;
  border: none;

  background-color: transparent;

  border: var(--checkbox-border) solid var(--checkbox-bg);
  box-sizing: border-box;

  width: calc(var(--checkbox-size) * 2);
  height: var(--checkbox-size);
  border-radius: var(--checkbox-size);
  position:relative;
  transition: all 168ms ease-out;
}
input[type="checkbox"]:focus {
  outline: none;
  /*box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--focus-color);*/
}
input[type="checkbox"]:active {
  /* trick to avoid flickering outline */
  box-shadow: none;
}
input[type="checkbox"]::after {
  --padding: calc(
    ( (var(--checkbox-size) - var(--checkbox-handle-size)) / 2 )
    - var(--checkbox-border)
  );
  content: "";
  background: var(--checkbox-fg);
  display:block;
  position:absolute;
  left: var(--padding);
  top: var(--padding);
  width:var(--checkbox-handle-size);
  height:var(--checkbox-handle-size);
  border-radius:var(--checkbox-handle-size);
  transform: translate(0, 0);
  transition: all 90ms ease-out; /*cubic-bezier(0.09, 0.49, 0.71, 0.98);*/
}
input[type="checkbox"]:checked {
  background-color: var(--checkbox-on-bg);
}
input[type="checkbox"]:checked::after {
  background-color: var(--checkbox-on-fg);
  transform: translate(calc(var(--checkbox-size)), 0);
  /*transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);*/
}




input[type="range"] {
  --height: calc(1rem * var(--line-height));

  --input-range-color-bg: black;
  --input-range-color-fg: black;
  --input-range-color-focus: rgb(0, 130, 255);
  --input-range-knob-size: 0.75rem;
  --input-range-track-size: 2px;
  --input-range-height: var(--height);

  --surface1-color-bg: red;

  -webkit-appearance: none;
  /*width: 100%;*/
  background: transparent;
  cursor: default;
  margin:0;
  padding:0 0.5em;
  box-sizing: border-box;
  /*margin-left: calc((var(--input-range-height) - var(--input-range-track-size)) / -2);*/
}
input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0;
  height: var(--input-range-knob-size);
  width: var(--input-range-knob-size);
  border-radius: var(--input-range-knob-size);
  background: var(--input-range-color-fg);
  box-shadow: 0 0 0 2px var(--background-color);
  margin-top: calc((var(--input-range-knob-size) - var(--input-range-track-size)) / -2);
}
input[type="range"]::-moz-range-thumb {
  border: 0;
  height: var(--input-range-knob-size);
  width: var(--input-range-knob-size);
  border-radius: var(--input-range-knob-size);
  background: var(--input-range-color-fg);
  box-shadow: 0 0 0 2px var(--background-color);
  margin-top: calc((var(--input-range-knob-size) - var(--input-range-track-size)) / -2);
}


input[type="range"]::-webkit-slider-runnable-track {
  /* Note: hit testing is done on this element so we make it large enough
     to easily hit with --input-range-height and a border that matches the
     background color. This is not portable, unfortunately. */
  box-sizing: border-box;
  width: 100%;
  height: var(--input-range-height);
  background: var(--input-range-color-bg);
  --border-w: calc((var(--input-range-height) - var(--input-range-track-size)) / 2);
  border-top: var(--border-w) solid var(--background-color);
  border-bottom: var(--border-w) solid var(--background-color);
}
input[type="range"]::-moz-range-track {
  box-sizing: border-box;
  width: 100%;
  height: var(--input-range-height);
  background: var(--input-range-color-bg);
  --border-w: calc((var(--input-range-height) - var(--input-range-track-size)) / 2);
  border-top: var(--border-w) solid var(--background-color);
  border-bottom: var(--border-w) solid var(--background-color);
}

/*input[type="range"]:focus::-webkit-slider-thumb { background-color: var(--blue) }
input[type="range"]:focus::-moz-range-thumb     { background-color: var(--blue) }*/

input[type="range"]:focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 2px var(--focus-color);
}
input[type="range"]:focus::-moz-range-track {
  box-shadow: 0 0 0 2px var(--focus-color);
}




.switch-button {
  --height: calc(1rem * var(--line-height));
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  user-select: none;
  line-height: var(--height);
  height: var(--height);
}
  .switch-button > input[type="checkbox"] {
    margin-right: 0.4rem;
  }



.row.glyphs {
  /*--background-color: var(--medium-green);*/
  --background-color: color(display-p3 0.28 0.89 1);
  --background-color-transparent: color(display-p3 0.28 0.89 1 / 0);
  --grid-color: color(display-p3 0 0.65 0.8);

  --background-color: var(--medium-green);
  --grid-color: #000;

  --foreground-color: black;
  --font-weight: 400;

  color: var(--foreground-color);
  background: var(--background-color);
  flex-direction: column;
  padding: 2rem 0 0 0;
  box-sizing: border-box;
  scroll-padding-top: 0;
}
.row.glyphs h2 {
  font-size: 8rem;
  margin-left: calc(8rem / -19);
  line-height: 1.0;
}
.row.glyphs h2 > a {
  color: white;
}
.row.glyphs > *:first-child {
  padding: 0 var(--row-padding);
  padding-bottom: 1rem;
}

.glyph-grid {
  --line-width: 1px;
  --cell-size: 4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  position: relative;
  max-width: 100vw;
  box-sizing: border-box;
  gap: var(--line-width);
  flex: 1 0 100%;
}

.glyph-grid .popup-menu {
  --height: calc(1rem * var(--line-height));
  position: relative;
  width: 100%;
  height: var(--height);
  overflow: hidden;
  /*grid-column-start: span 2;*/
  display: grid;
  grid-template-columns: auto 1fr;
}
  .glyph-grid .popup-menu .label {
    display: block;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .glyph-grid .popup-menu .icon {
    display: block;
    pointer-events: none;
    background-image: url(res/icons/popup-black.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    width: calc(var(--cell-size) / 3);
    height: var(--height);
  }
  .glyph-grid .popup-menu .label,
  .glyph-grid .popup-menu select {
    padding: 0;
    line-height: var(--height);
    height: var(--height);
    box-sizing: border-box;
    outline: none;
  }
  .glyph-grid .popup-menu select {
    position: absolute;
    top:0; right:0; left:0;
    font: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    border: none;
    background: none;
    color: transparent;
    /*color: rgba(255,0,0,0.8);*/
  }
    .glyph-grid .popup-menu select option {
      font-family: var(--font-family), sans-serif;
    }

.glyph-grid .inspector {
  position: sticky;
  display: grid;
  grid-template-rows: auto 1fr;
  top: var(--header-height);
  left: 0;
  height: 100%;
  max-height: calc(100vh - var(--header-height));
  box-shadow: 0 0 0 var(--line-width) var(--grid-color);
}
.glyph-grid .toolbar {
  height: var(--cell-size);
  padding: 0 0 0 1rem;
  border-bottom: var(--line-width) solid var(--grid-color);
  gap: 2rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
  .glyph-grid .toolbar .popup-menu {
    /*align-self: start;
    margin-top: 4px;*/
  }
  .glyph-grid .toolbar .slider {
    display:flex;
    user-select: none;
  }
    .glyph-grid .toolbar .slider > input { flex: 0 0 auto; }
    .glyph-grid .toolbar .slider > input { width: 2rem; padding:0; margin-right: 0.4rem }
    .glyph-grid .toolbar .opsz-switch { display: none; }
  .glyph-grid .toolbar .identification {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
  }
    .glyph-grid .toolbar .identification > * {
      user-select: all;
    }
    .glyph-grid .toolbar .identification .name {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .glyph-grid .toolbar .identification .unicode {
      font-variant: tabular-nums slashed-zero;
    }
  .glyph-grid .toolbar .preview {
    display: flex;
    flex: 0 0 auto;
    width: var(--cell-size);
    height: var(--cell-size);
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: var(--inspector-wght);
    font-variation-settings: "opsz" var(--inspector-opsz);
    border-left: var(--line-width) solid var(--grid-color);
    user-select: all;
  }
.glyph-grid .canvas {
  user-select: none;
  font-size: 40vw;
  text-align: center;
  line-height: 1.0;
  height: 100%;
  max-height: 50vw;
  overflow: hidden;
  position: relative;
}
.glyph-grid .canvas > canvas {
  position: absolute;
  top:0; left:0;
  /*cursor:
    url(res/cursor-glyph-inspector.svg) 10 10,
    url(res/cursor-glyph-inspector.png) 10 10,
    crosshair;*/
  cursor: crosshair;
}

.glyph-grid .glyph-list .clipview {
  position: relative;
}

.glyph-grid .glyph-list .clipview .content {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(var(--cell-size), 1fr) );
  gap: var(--line-width);
  font-size: calc(var(--cell-size) / 2);
}
  .glyph-grid .glyph-list .clipview .content > * {
    height: var(--cell-size);
    line-height: calc(var(--cell-size) + 1px);
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 0 0 var(--line-width) var(--grid-color);
    scroll-padding-top: 0;
  }
  .glyph-grid .glyph-list .clipview .content > .fill-row { grid-column: 1 / -1 }
  .glyph-grid .glyph-list .clipview .content > :hover {
    color: inherit;
    text-decoration: none;
    overflow: unset;
    z-index: 1;
    box-shadow: 0 0 0 2px var(--foreground-color);
  }
  .glyph-grid .glyph-list .clipview .content > .selected {
    color: white;
    background: black;
  }
  .glyph-grid .glyph-list .clipview .content > :focus {
    outline: none;
  }

.glyph-grid .glyph-list .fade-cover { display: none; } /* small screens only */

.columns {
  column-width: 22em;
  column-count: 4;
  column-gap: 3em;
  column-fill: balance;
}
.columns > p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.columns > h1,
.columns > h2,
.columns > h3,
.columns > h4,
.columns > h5,
.columns > h6 {
  break-after: avoid;
}
/*.columns.size1 { font-size: var(--font-size); }*/

@media only screen and (min-width: 1800px) { /* window width >= 1800 */
  .columns.size1 { font-size: 0.9vw }
}
@media only screen and (min-width: 1600px) { /* window width >= 1600 */
  .columns.size1 { font-size: var(--font-size); }
}
@media only screen and (min-width: 1392px) { /* window width >= 1392 */
  .example-a-z { font-size: 8.9em; }
}
@media only screen and (min-width: 1000px) { /* window width >= 1000 */
  .glyph-grid .toolbar > :first-child { min-width: 45% }
}
@media only screen and (max-width: 1000px) { /* window width <= 1000 */
  .example2.features { font-size: 15.5vw; }
}
@media only screen and (max-width: 880px) { /* window width <= 880 */
  .columns.size1 { font-size: 14px; }
  .example2.features { font-size: 15vw; }
  .glyph-grid .toolbar .opsz-switch { display: flex; }
  .glyph-grid .toolbar .opsz-slider { display: none; }
}
@media only screen and (max-width: 719px) { /* window width <= 719 */
  .example-a-z { font-size: 13vw; }
  .glyph-grid { --cell-size: 10vw; }
  .example2.features { font-size: 16vw; }
}
@media only screen and (max-width: 500px) { /* window width <= 500 */
  .feat-table > r-grid > r-cell { grid-column: 1 / -1 }
  .feat-table .col-head { display: none }
  .feat-table hr.thin { opacity:1; height:2px; margin-top: 4rem }
  .feat-name { margin-top: 0; margin-bottom: 1rem }
  .feat-name p { display: none; }
  /*.feat-name p {
    margin-bottom: 1em; font-style: italic; font-size: inherit;
    opacity: 0.4;
  }*/
  .feat-example { margin-top: 0; font-size: 2em; line-height:1.5 }
  .feat-example:nth-child(odd) { padding:2rem 0 3rem 0 }
  .feat-example:nth-child(even) {}
  .row.features-section1 { padding-bottom: 4rem }
  .row.features-section2 r-cell:first-child { padding: 2rem 0 }

  .row.glyphs { padding: 0; margin-top: 6rem; position:relative }
  .row.glyphs::before {
    content: "Glyphs";
    font-weight: 600;
    font-size: 2em;
    position:absolute;
    top:-4rem; left: 1rem;
  }
  .row.glyphs > :first-child { display: none }
  /*.row.glyphs h2 { font-size: 2rem; margin-bottom: 1rem }*/
  .glyph-grid {
    --cell-size: 16vw; --line-width: 1px;
    --glyph-list-height: 40vh;
    --inspector-height: calc(60vh - (var(--header-height)/2));
    display: grid;
    grid-template-columns: none;
    grid-template-rows: var(--inspector-height) auto;
  }
  .glyph-grid .toolbar { gap: 1.4rem }
  .glyph-grid .inspector {
    position: initial;
    height: var(--inspector-height);
    max-height: var(--inspector-height);
    background: var(--background-color);
  }
  .glyph-grid .inspector .canvas { max-height: unset }
  .glyph-grid .glyph-list {
    position: relative;
  }
    .glyph-grid .glyph-list .clipview {
      display: grid;
      height: var(--glyph-list-height);
      grid-auto-flow: column;
      overflow-x: scroll;
      overflow-y: hidden;
      max-width: 100vw;
      box-sizing: border-box;
    }
  .glyph-grid .glyph-list .fade-cover {
    display: block;
    position: absolute;
    top:0; bottom:0;
    width: 1rem;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(270deg, var(--background-color-transparent) 0%, var(--background-color) 100%);
    /*background: rgba(255,0,0,0.4);*/
  }
  .glyph-grid .glyph-list .fade-cover.left { left: 0; display:none }
  .glyph-grid .glyph-list .fade-cover.right {
    right: 0;
    width: 3rem;
    background: linear-gradient(270deg, var(--background-color) 0%, var(--background-color-transparent) 100%);
    /*background: rgba(0,0,255,0.4);*/
  }
  .glyph-grid .glyph-list .clipview .content {
    /*grid-template-columns: none;*/
    /*grid-template-rows: repeat( auto-fit, minmax(var(--cell-size), 1fr) );*/

    grid-template-columns: repeat(auto-fill, var(--cell-size));
    grid-auto-rows: var(--cell-size);

    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, var(--cell-size));
  }
  .glyph-grid .glyph-list .clipview .content > * {
    width: var(--cell-size);
    height: unset;
  }
}

#faq .columns > p {
  margin-bottom: 2em;
}
#faq h4:target {
  background: var(--active-bgcolor);
  outline: 8px solid var(--active-bgcolor);
  border-radius: 4px;
}
@media (prefers-color-scheme: dark) { #faq h4:target {
  color: white;
}}

</style>


<div class="row"><div>
  <r-grid columns=8>
    <r-cell span=row>
      <h1 class=title>The Inter typeface family</h1>
    </r-cell>
    <r-cell span=1-2 span-s=row>
      The 21st century standard<br>
      <br>
      <a class=button href="{{url_root}}download/">Download ↓</a><br>
      <br>
    </r-cell>
    <r-cell span=3-5 span-s=row>
      <p>
        Inter is a workhorse of a typeface carefully crafted &amp; designed for
        a wide range of applications, from detailed user interfaces to marketing &amp; signage.
        The Inter typeface family features over <a href="#glyphs">2000&nbsp;glyphs</a>
        covering <a href="#languages">{{lang_count}}&nbsp;languages</a>.
        Weights ranges from a delicate thin 100 all the way up to a heavy 900. Each glyph has three dedicated designs for weights 100, 400 and 900 to ensure excellent quality at any weight. Optical size ranges from "text" to "display" and there is a true italic variant.
      </p>
      <p>
        Inter is one of the world's most used typefaces with applications ranging from computer interfaces, advertising &amp; airports, to NASA instrumentation &amp; medical equipment.
      </p>
    </r-cell>
    <r-cell span=6.. span-s=row>
      <p>
        The smaller "text" optical-size designs features a tall x-height to aid in legibility of lower-case text, with several contrast-enhancing details like ink traps and bridges. The larger "display" optical-size designs offers clean lines, smooth curves and delicate details for excellent rythm of large text.
      </p><p>
        <a href="#features">38&nbsp;OpenType features</a> are provided as well,
        including contextual alternates which adjusts punctuation depending on the
        shape of surrounding glyphs, slashed zero for when you need to
        disambiguate "0" from "o", tabular numbers, and much more.
      </p>
    </r-cell>
  </r-grid>
</div></div>


<div class="row"><div>
  <p class="example-a-z only-large-screen" contenteditable spellcheck=false>
    ABCDEFGHIJKLMN<br>
    OPQRSTUVWXYZ<br>
    abcdefghijklm<br>
    nopqrstuvwxyz<br>
    0123456789 &amp;→!
  </p>
  <p class="example-a-z only-small-screen" contenteditable spellcheck=false>
    ABCDEFGHIJ<br>
    KLMNOPQRS<br>
    TUVWXYZ →<br>
    abcdefghijklm<br>
    nopqrstuvwxyz<br>
    0123456789&amp;!
  </p>
</div></div>


<div class="row"><div>
  <r-grid columns=8>

    <r-cell span=2 span-s=row>
      <h3><a id="usage" href="#usage">Usage</a></h3>
    </r-cell>
    <r-cell span=3.. span-s=row>
      <p>
        Using Inter is as easy as
        <a class="download-link" href="download/">downloading &amp; installing</a>
        the font files.<br>
        If you're making a web thing, you can use the following HTML and CSS:
      </p>
      <pre>&lt;!-- HTML in your document's head --&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://rsms.me/&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://rsms.me/inter/inter.css&quot;&gt;

/* CSS */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}</pre>
      <p>Global <abbr title="Content Delivery Network">CDN</abbr>
        sponsored by <a href="https://cloudflare.com/">Cloudflare</a></p>
    </r-cell>



    <r-cell class=spacer></r-cell>


    <r-cell span=2 span-s=row>
      <h3><a id="free" href="#free">Free &amp; open source</a></h3>
    </r-cell>
    <r-cell span=3.. span-s=row>
      <p>
        Inter is a <a href="https://github.com/rsms/inter">free and open source</a> font family.<br>
        You are free to use this font in almost any way imaginable.<br>
        Refer to the <a href="https://raw.githubusercontent.com/rsms/inter/v{{release_version}}/LICENSE.txt">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.
      </p>
      <p>
        <a id="sponsor-button"
           title="Help Inter by becoming a sponsor and donating a coffee or two"
           href="https://github.com/sponsors/rsms">
           <span>Sponsor</span>
        </a>
      </p>
    </r-cell>

  </r-grid>
</div></div>



<div class="row examples section1-roman">
  <r-grid columns=6>
    <r-cell span=2 class=label>Thin</r-cell>
    <r-cell span=3.. class="label r">100</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:100;letter-spacing:-0.01em;">Salient gazelle eyes</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>ExtraLight</r-cell>
    <r-cell span=3.. class="label r">200</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:200;letter-spacing:-0.01em;">Internationalization</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Light</r-cell>
    <r-cell span=3.. class="label r">300</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:300">Millimeter waves</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Regular</r-cell>
    <r-cell span=3.. class="label r">400</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:400">Assimilation engine</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Medium</r-cell>
    <r-cell span=3.. class="label r">500</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:500">Botanica Francisco</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>SemiBold</r-cell>
    <r-cell span=3.. class="label r">600</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:600">Spontaneous apes</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Bold</r-cell>
    <r-cell span=3.. class="label r">700</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:700">15 Mango Avenue</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>ExtraBold</r-cell>
    <r-cell span=3.. class="label r">800</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:800">Comedy Morning</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Black</r-cell>
    <r-cell span=3.. class="label r">900</r-cell>
    <r-cell span=row class="example2 single-line" contenteditable spellcheck=false style="font-weight:900">Hamburgefonstiv</r-cell>
  </r-grid>
</div>



<div class="row examples section1-italic">
  <r-grid columns=6>
    <r-cell span=2 class=label>Thin</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">100</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:100;letter-spacing:-0.01em;">Inorganic compound</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>ExtraLight</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">200</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:200;letter-spacing:-0.01em;">Extravaganza Lime</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Light</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">300</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:300">Rectangular ellipse</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Regular</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">400</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:400">3 hours till midnight</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Medium</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">500</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:500">Artificial Intelligence</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>SemiBold</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">600</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:600">Sulfur hexafluoride</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Bold</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">700</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:700">Hospital helicopter</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>ExtraBold</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">800</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:800">Encyclopedia Abc</r-cell>

    <r-cell class=spacer></r-cell>

    <r-cell span=2 class=label>Black</r-cell>
    <r-cell span=2 class=label>Italic</r-cell>
    <r-cell span=2 class="label r">900</r-cell>
    <r-cell span=row class="example2 i single-line" contenteditable spellcheck=false style="font-weight:900">United Martians</r-cell>
  </r-grid>
</div>


<div class="row examples">
  <r-grid columns=6>
    <r-cell span=2 class=label>Thin</r-cell>
    <r-cell span=3.. class="label r">100</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:100;letter-spacing:-0.005em;">
      Chemistry is a physical science under natural sciences that covers the elements that make up matter</r-cell>

    <r-cell span=2 class=label>ExtraLight</r-cell>
    <r-cell span=3.. class="label r">200</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:200;letter-spacing:-0.007em;">
      The aspect ratio of an image is the ratio of its width to its height,
      but you already knew that</r-cell>

    <r-cell span=2 class=label>Light</r-cell>
    <r-cell span=3.. class="label r">300</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:300">
      Unlike a moka express, a napoletana does not use the pressure of steam to force the water through the coffee</r-cell>

    <r-cell span=2 class=label>Regular</r-cell>
    <r-cell span=3.. class="label r">400</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:400">
      The Berlin key, also known as Schließzwangschlüssel, was not
      designed to make people laugh</r-cell>

    <r-cell span=2 class=label>Medium</r-cell>
    <r-cell span=3.. class="label r">500</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:500">
      Stanley Kubrick was an American film director, screenwriter, and producer of many films</r-cell>

    <r-cell span=2 class=label>SemiBold</r-cell>
    <r-cell span=3.. class="label r">600</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:600">
      Jet Propulsion Laboratory,<br>
      California Institute of Technology</r-cell>

    <r-cell span=2 class=label>Bold</r-cell>
    <r-cell span=3.. class="label r">700</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:700">
      The Sicilian Defense is a chess opening that begins with 1.e4 c5</r-cell>

    <r-cell span=2 class=label>ExtraBold</r-cell>
    <r-cell span=3.. class="label r">800</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:800">
      Padrón province of A Coruña, Galicia, northwestern Spain</r-cell>

    <r-cell span=2 class=label>Black</r-cell>
    <r-cell span=3.. class="label r">900</r-cell>
    <r-cell span=row class="example2 multi-line" contenteditable spellcheck=false style="font-weight:900">
      Woven silk pyjamas exchanged for blue quartz crystals</r-cell>
  </r-grid>
</div>


<div class="row examples" style="padding-top:0"><div>
  <p class=label>Example text, Regular</p>
  <div class="columns size1">
  <p>
One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; and other authorities even attribute it to Alexander the Great.
</p><p>
All that can with certainty be affirmed is, that the architect was named Sostrates. Montfaucon, in his great work, endeavours to explain how it is that while we are thus informed as to the architect, we are so doubtful as to the founder, whom, for his part, he believes to have been Ptolemæus. Our ignorance, he says, is owing to the knavery of Sostrates. He wished to immortalize his name; a blameless wish, if at the same time he had not sought to suppress that of the founder, whose glory it was to have suggested the erection. For this purpose Sostrates devised a stratagem which proved successful; deep in the wall of the tower he cut the following inscription: “Sostrates of Cnidos, son of Dexiphanes, to the gods who Protect those who are upon the Sea.” But, mistrustful that King Ptolemæus would scarcely be satisfied with an inscription in which he was wholly ignored, he covered it with a light coat of cement, which he knew would not long endure the action of the atmosphere, and carved thereon the name of Ptolemæus. After a few years the cement and the name of the king disappeared, and revealed the inscription which gave all the glory to Sostrates.
</p><p>
Montfaucon, with genial credulity, adopts this anecdote as authentic, and adds: Pliny pretends that Ptolemæus, out of the modesty and greatness of his soul, desired the architect’s name to be engraved upon the tower, and no reference to himself to be made. But this statement is very dubious; it would have passed as incredible in those times, and even to-day would be regarded as an ill-understood act of magnanimity. We have never heard of any prince prohibiting the perpetuation of his name upon magnificent works designed for the public utility, or being content that the architect should usurp the entire honour.
</p><p>
To solve the difficulty, Champollion represents the pharos as constructed by Ptolemæus Soter. But, as Edrisi solemnly remarks, “God alone knows what is the truth.”
</p><p>
Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language. From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light.
</p><p>
The most reasonable conjecture seems to be that the word is a Hellenic form of Phrah, the Egyptian name of the sun, to whom the Alexandrian lighthouse would naturally be compared by wondering spectators, or dedicated by a devout prince.
</p><p>
At a later date we find the word applied to very different objects, though always retaining the signification of light or brilliancy. A pharos of fire—i.e., a ball or meteor—was seen, says Gregory of Tours, to issue from the church of St. Hilaire, and descend upon King Clovis. The same historian uses the word to describe a conflagration:—“They (the barbarians) set fire to the church of St. Hilaire, kindled a great pharos, and while the church was burning, pillaged the monastery.” The old French historian frequently employs the word in this sense, which leads us to suppose that in his time an incendiary was probably designated “a maker of pharoses” (un faiseur de phares). Still later, the term pharos was applied to certain machines in which a number of lamps or tapers were placed, as in a candelabrum. A modern French writer quotes from Anastasius the Librarian, that Pope Sylvester caused “a pharos of pure gold” to be constructed; and that Pope Adrian I. made one, “in the form of a cross,” capable of receiving one hundred and seventy candles or tapers. And Leon of Ostia, in his “Chronicle of Monte Cassino,” says, that the Abbot Didier had a pharos, or great silver crown, weighing one hundred pounds, constructed, which was surmounted by twelve little turrets, and from which were suspended six and thirty lamps.
</p><p>
<em>Excerpt from “Lighthouses and Lightships”</em>
  </p>
</div>
</div></div>


<div class="row examples features features-section1 feat-table" id="features">
  <r-grid columns=8>

    <r-cell span=4 span-s=row>
      <h2><a href="#features">Features</a></h2>
      <p>
        Inter comes with many OpenType features which can be used to tailor functionality and aesthetics to your specific needs. Some of these features can be combined to form a great number of alternative variations.
      </p>
    </r-cell>
    <r-cell span=6-8 span-s=row class="only-large-screen">
      <h2>&nbsp;</h2>
      <p style="font-feature-settings:'cv01' 1,'cv03' 1,'cv04' 1,'cv08' 1,'cv10' 1,'cv11' 1,'ss01' 1,'ss02' 1,'dlig' 1;font-size:10vw;margin:-0.33em 0 0 -0.07em;color:white">
        altG16I
      </p>
    </r-cell>

    <hr>

    <r-cell span=1-2 class=col-head>Feature</r-cell>
    <r-cell span=3-5 class=col-head>Off</r-cell>
    <r-cell span=6-8 class=col-head>On</r-cell>

    <hr class="thin col-head">

  {% for f in site.data.feature_samples %}

    <r-cell span=1-2 class="leading-trim feat-name" id="features/{{f.tag}}">
      <r-feat>{{f.tag}}</r-feat> {{f.title}}
      {% if f.description %}
        <p class=small style="margin-top:0.5rem">{{f.description}}</p>
      {% endif %}
    </r-cell>

    <r-cell span=3-5 class="leading-trim feat-example" style="font-feature-settings:'{{f.tag}}' 0{% if f.disable %},'{{f.disable}}'0 {% endif %}">
    {% for sample in f.samples %}{%
      assign sample_in = sample | replace: "›", "<em>" | replace: "‹", "</em>" -%}
      {{sample_in}}<br>
    {% endfor %}
    </r-cell>

    <r-cell span=6-8 class="leading-trim feat-example" style="font-feature-settings:'{{f.tag}}' 1;">
    {% for sample in f.samples %}{%
      assign sample_out = sample | remove: "›" | remove: "‹" %}{%
      assign sample_out = sample_out | remove: " " -%}
      {{sample_out}}<br>
    {% endfor %}
    </r-cell>

    <hr class=thin>

  {% endfor %}

    <!-- leading trim test: -->
    <!-- <r-cell class=spacer></r-cell>
    <r-cell span=row style="height:1px;background:black"></r-cell>
    <r-cell class=leading-trim style="font-size: 1em">M</r-cell>
    <r-cell class=leading-trim style="font-size: 2em">M</r-cell>
    <r-cell class=leading-trim style="font-size: 4em">M</r-cell>
    <r-cell class=leading-trim style="font-size: 8em">M</r-cell>
    <r-cell class=leading-trim style="font-size:12em">M</r-cell>
    <r-cell class=leading-trim style="font-size:16em">M</r-cell> -->

  </r-grid>
</div>


<div class="row examples features features-section2" id="feature-examples">
  <r-grid columns=6>

    <r-cell span=row id="features/cv">
      <r-feat>cvXX</r-feat> Character variants
    </r-cell>

    <r-cell span=row class="example2 features"
        style="font-weight:600;margin-bottom:-1rem">
      1234567890</r-cell>
    <r-cell span=row class="example2 features"
        style="font-weight:600;font-feature-settings:'cv01' 1,'cv02' 1,'cv03' 1,'cv04' 1,'cv09' 1,'zero' 1,'liga' 1,'calt' 1">
      1234567890</r-cell>
    <r-cell span=2>Alternative digits</r-cell>
    <r-cell span=3-4 span-s=3-6>
      <r-feat>cv01</r-feat> Alternate one<br>
      <r-feat>cv09</r-feat> Flat-top three<br>
      <r-feat>cv02</r-feat> Open four<br>
    </r-cell>
    <r-cell span=5-6 span-s=3-6>
      <r-feat>cv03</r-feat> Open six<br>
      <r-feat>cv04</r-feat> Open nine<br>
      <r-feat>zero</r-feat> Slashed zero<br>
    </r-cell>

    <hr style="margin-top:3rem">

    <r-cell span=row class="example2 features"
        style="margin-bottom:-1rem">
      Guillable ürá</r-cell>
    <r-cell span=row class="example2 features"
        style="font-feature-settings:'cv06' 1,'cv10' 1,'cv11' 1,'liga' 1,'calt' 1">
      Guillable ürá</r-cell>
    <r-cell span=2>
      Character variants is a mood
    </r-cell>
    <r-cell span=3..>
      <r-feat>cv10</r-feat> Capital G with spur<br>
      <r-feat>cv06</r-feat> Simplified u<br>
      <r-feat>cv11</r-feat> Single-story a<br>
    </r-cell>

    <hr style="margin-top:3rem">

    <r-cell span=row class="example2 features"
        style="font-weight:300;margin-bottom:-1rem">
      Efficient after</r-cell>
    <r-cell span=row class="example2 features"
        style="font-weight:300;font-feature-settings:'cv12' 1,'cv13' 1,'liga' 1,'calt' 1">
      Efficient after</r-cell>
    <r-cell span=2>
      Give it a compact character
    </r-cell>
    <r-cell span=3..>
      <r-feat>cv12</r-feat> Compact f<br>
      <r-feat>cv13</r-feat> Compact t<br>
    </r-cell>

    <hr style="margin-top:3rem">

    <!-- <r-cell span=row class="example2 features"
        style="font-weight:200;font-size:10vw;font-variant:tabular-nums;line-height:1.1;margin-top:1rem">
      010.2*364+8(2).5<br>
      −51,67×8÷91{0}:<span class=cv01>1</span></r-cell> -->
    <r-cell span=row class="example2 features"
        style="font-weight:500;font-size:10vw;font-variant:tabular-nums;line-height:1.1">
      0<span class=cv01>1</span>0.2*<span class=cv09>3</span>64+8(2).5<br>
      −51,67×8÷<span class=cv04>9</span>1{<span class=zero>0</span>}:1</r-cell>
    <!-- <r-cell span=row class="example2 features"
        style="font-weight:600;font-size:10vw;font-variant:tabular-nums;line-height:1.1">
      <span class=zero>0</span>10.2*3<span class=cv03>6</span>4+8(2).5<br>
      −5<span class=cv01>1</span>,67×8÷91{0}:1</r-cell> -->
    <r-cell span=row class="example2 features"
        style="font-weight:800;font-size:10vw;font-variant:tabular-nums;line-height:1.1">
      010.2*36<span class=cv02>4</span>−8(2).5<br>
      +51,67×8÷9<span class=cv01>1</span>{0}:<span class=cv01>1</span></r-cell>
    <r-cell span=row class="example2 features"
        style="font-size:10vw;font-variant:tabular-nums;line-height:1.1;margin-bottom:2rem">
      <span style="font-weight:100">1</span><span style="font-weight:200">2</span><span style="font-weight:300">3.</span><span style="font-weight:400">4</span><span style="font-weight:500">5</span><span style="font-weight:600">6</span><span style="font-weight:700">7</span><span style="font-weight:800">8</span><span style="font-weight:900">90</span>[1]<span style="font-weight:600">,</span><span style="font-weight:800">3</span></r-cell>
    <r-cell span=2>
      Tabular figures are excellent for tables of numeric data. <code>tnum</code> enables an entire set of dedicated glyphs that have the same width across all weights.
    </r-cell>
    <r-cell span=3..>
      <r-feat>tnum</r-feat> Tabular figures
    </r-cell>

    <hr style="margin-top:3rem">

    <r-cell span=row class="example2 features"
        style="margin-bottom:-1rem">
      Illusion A03</r-cell>
    <r-cell span=row class="example2 features"
        style="font-feature-settings:'ss02' 1,'liga' 1,'calt' 1">
      Illusion A03</r-cell>
    <r-cell span=2>
      Disambiguate between similar-looking characters with
      <r-feat>ss02</r-feat> or individual character variants
    </r-cell>
    <r-cell span=3..>
      <r-feat>ss02</r-feat> Disambiguation, or<br>
      <r-feat>cv08</r-feat> Upper-case i with serif<br>
      <r-feat>cv05</r-feat> Lower-case L with tail<br>
      <r-feat>zero</r-feat> Slashed zero<br>
    </r-cell>

    <hr style="margin-top:3rem">

    <r-cell span=row class="example2" style="font-weight:500;white-space:nowrap;font-size:9.5vw">
      It’s “fun” here, Möbius</r-cell>
    <r-cell span=row class="example2"
        style="font-weight:500;white-space:nowrap;font-size:9.5vw;font-feature-settings:'ss03' 1,'liga' 1,'calt' 1;margin-bottom:1rem">
      It’s “fun” here, Möbius</r-cell>
    <r-cell span=row class="example2"
        style="font-weight:500;white-space:nowrap;font-size:9.5vw;font-feature-settings:'ss07' 1,'ss08' 1,'liga' 1,'calt' 1;margin-bottom:1rem">
      It’s “fun” here, Möbius</r-cell>
    <r-cell span=2>
      Add a little personality to titles
    </r-cell>
    <r-cell span=3..>
      <r-feat>ss03</r-feat> Round quotes &amp; commas<br>
      <r-feat>ss07</r-feat> Square punctuation<br>
      <r-feat>ss08</r-feat> Square quotes<br>
    </r-cell>

    <hr style="margin-top:3rem">

    <r-cell span=row>
      Listing of all features
    </r-cell>
    <r-cell span=row style="margin-top:1rem">
      <div class="columns" style="column-width:18em;column-gap:1em">
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-aalt">aalt</a> Access All Alternates<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-c2sc">c2sc</a> Small Capitals From Capitals<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-calt">calt</a> Contextual Alternates<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-case">case</a> Case-Sensitive Forms<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-ccmp">ccmp</a> Glyph Composition/Decomposition<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cpsp">cpsp</a> Capital Spacing<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv01</a> Alternate one<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv02</a> Open four<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv03</a> Open six<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv04</a> Open nine<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv05</a> Lower-case L with tail<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv06</a> Simplified u<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv07</a> Alternate German double s<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv08</a> Upper-case i with serif<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv09</a> Flat-top three<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv10</a> Capital G with spur<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv11</a> Single-story a<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv12</a> Compact f<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-cv01--cv99">cv13</a> Compact t<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dlig">dlig</a> Discretionary Ligatures<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dnom">dnom</a> Denominators<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_fj#tag-frac">frac</a> Fractions<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-liga">liga</a> Standard Ligatures<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-locl">locl</a> Localized Forms<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-numr">numr</a> Numerators<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-ordn">ordn</a> Ordinals<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-pnum">pnum</a> Proportional Figures<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-salt">salt</a> Stylistic Alternates<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-sinf">sinf</a> Scientific Inferiors<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-smcp">smcp</a> Small Capitals (limited)<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss01</a> Open digits<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss02</a> Disambiguation (with zero<)<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss03</a> Round quotes &amp; commas<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss04</a> Disambiguation (no zero<)<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss05</a> Circled characters<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss06</a> Squared characters<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss07</a> Square punctuation<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss08</a> Square quotes<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-subs">subs</a> Subscript<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-sups">sups</a> Superscript<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-tnum">tnum</a> Tabular Figures<br>
        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_uz#tag-zero">zero</a> Slashed Zero<br>
      </div>
    </r-cell>

  </r-grid>
</div>



<div class="row glyphs" id="glyphs">
  <div>
    <h2><a href="#glyphs">Glyphs</a></h2>
  </div>
  <div class="glyph-grid">
    <div class=inspector>
      <div class=toolbar>
        <div>
          <!-- <div class=popup-menu>
            <select name=font>
              <option value="d-100">Thin (Display)</option>
              <option value="d-200">ExtraLight (Display)</option>
              <option value="d-300">Light (Display)</option>
              <option value="d-400" selected>Regular (Display)</option>
              <option value="d-500">Medium (Display)</option>
              <option value="d-600">SemiBold (Display)</option>
              <option value="d-700">Bold (Display)</option>
              <option value="d-800">ExtraBold (Display)</option>
              <option value="d-900">Black (Display)</option>
              <option value="t-100">Thin (Text)</option>
              <option value="t-200">ExtraLight (Text)</option>
              <option value="t-300">Light (Text)</option>
              <option value="t-400">Regular (Text)</option>
              <option value="t-500">Medium (Text)</option>
              <option value="t-600">SemiBold (Text)</option>
              <option value="t-700">Bold (Text)</option>
              <option value="t-800">ExtraBold (Text)</option>
              <option value="t-900">Black (Text)</option>
            </select>
            <span class="label"></span>
            <span class="icon"></span>
          </div> -->
          <!-- <label class=switch-button>
            <input type="checkbox" name="opsz" checked>
            Small optical size
          </label> -->
          <div class="slider opsz-slider" title='opsz from 14 "text" to 28 "display"'>
            <input type="range" name="opsz" value=28 min=14 max=28 step=0.1>
            Optical size
          </div>
          <label class="switch-button opsz-switch">
            <input type="checkbox" name="opsz-switch">
            Small opsz
          </label>
          <!-- <div class="slider wght-slider" title="wght">
            Weight
            <input type="range" name="wght" value=400 min=100 max=900 step=1>
          </div> -->
          <label class=switch-button>
            <input type="checkbox" name="show-details">
            Details
          </label>
        </div>
        <div class=identification>
          <div class=name>A</div>
          <div class=unicode>U+0041</div>
        </div>
        <div class=preview>A</div>
      </div>
      <div class=canvas>A</div>
    </div>
    <div class="glyph-list">
      <div class="fade-cover left"></div>
      <div class=clipview>
        <div class=content>
    {% for g in site.data.glyphinfo.glyphs -%}
      {%- if g[2] == 0 and g[3] -%}
        <a title="{{g[1]}}
  U+{{g[3]}}{%if g[4]%} {{g[4]}} {%endif%}" data-name="{{g[1]}}" data-cp="{{g[3]}}" href="#glyphs/{{g[1]}}">&#x{{g[3]}}</a>
      {% endif -%}
    {%- endfor %}
        </div>
      </div>
      <div class="fade-cover right"></div>
    </div>
  </div>
  {% for file in site.static_files %}{%
    assign _path = file.path | remove_first: "/inter" %}{%
    if _path == "/res/glyph-inspector.js" %}{%
      assign glyph_inspector_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
    endif %}{%
  endfor -%}
  <script type="module" src="{{url_root}}res/glyph-inspector.js?v={{glyph_inspector_js_v}}"></script>
</div>



<div class="row examples" id="languages"><div>
  <h2><a href="#languages">Language support</a></h2>
  <p>Inter currently covers {{lang_count}} scripts</p>
  <div class="columns" style="column-width:12em;column-gap:1em">
  {% for c in site.data.languages %}
    <h4>{{c.category}}</h4>
    {% for language in c.languages -%}
      {{language}}<br>
    {% endfor %}
  {% endfor %}
  </div>
</div></div>



<div class="row examples"><div>
  <!-- <p>Latin</p>
  <p class="example2">
    ABCDEFGHIJKLMN<br>
    OPQRSTUVWXYZ<br>
    abcdefghijklm<br>
    nopqrstuvwxyz<br>
    0123456789 &amp;→!
  </p>
  <br><br> -->
  <p>Greek</p>
  <p class="example2">
    ΑΒΓΔΕΖΗΘΙΚΛΜΝ<br>
    ΞΟΠΡΣΤΥΦΧΨΩ<br>
    αβγδεζηθικλμνξ<br>
    οπρςστυφχψω
  </p>
  <br><br>
  <p>Cyrillic</p>
  <p class="example2">
    АБВГДЕЁЖЗИЙКЛ<br>
    МНОПРСТУФХЧЦ<br>
    ШЩЬЪЫЭЮЯабвг<br>
    деёжзийклмнопрс<br>
    туфхчцшщьъыэюя
  </p>
</div></div>



<div class="row examples" id="faq"><div>
  <h2><a href="#faq">Frequenty Asked Questions</a></h2>
  <div class="columns" style="column-width:15em;column-gap:2em">
  {% for c in site.data.faq %}
    <h4 id="{{c.id}}"><a href="#{{c.id}}">{{c.q}}</a></h4>
    {{c.a | markdownify}}
  {% endfor %}
  </div>
</div></div>





<script>(function(){

const $  = (q, el) => (el || document).querySelector(q)
const $$ = (q, el) => [].slice.call((el || document).querySelectorAll(q))

// contenteditable, paste as plain-text
$$('[contenteditable]').forEach(el => {
  el.addEventListener('paste', ev => {
    ev.preventDefault()
    document.execCommand("insertText", false, ev.clipboardData.getData("text/plain"))
  }, {capture:true,passive:false})
})

// show/hide "Inter" in header
let callback = (entries, observer) => {
  entries.forEach((entry) => {
    $('header .scroll-reveal').classList.toggle('visible', !entry.isIntersecting)
  });
}
let observer = new IntersectionObserver(callback, { rootMargin: "0px", threshold: 0 })
observer.observe($('h1'))

// low priority stuff that doesn't need to happen immediately
requestIdleCallback(() => {
  // convert .num/num numbers to local format, e.g. "1,234.56" vs "1.234,56"
  let nfmt = new Intl.NumberFormat() // test with .NumberFormat('de-DE')
  if (nfmt.format(1234.89) != "1,234.89") { // written as "1,234.89" in source
    for (let el of [...$$("num"), ...$$(".num")])
      el.innerText = nfmt.format(parseFloat(el.innerText.replace(/,/g,'')))
  }
})

})()</script>