123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                  <a href="#" id="toggle-editorial" class="toggle-editorial button off">Toggle Editorial Layout</a>

      <div id="maincontent" class="section-content main editorial">
        <div class="content-container">
          <article class="article-detail">
            <header>
              <h1>FF Meta: a concise history</h1>
            </header>
            <p>FF Meta is a humanist sans-serif typeface family designed by Erik Spiekermann and released 
              in 1991 through his FontFont library. According to Spiekermann, FF Meta was intended to 
              be a “complete antithesis of Helvetica”, which he found “boring and bland”. It originated 
              om an unused commission for the Deutsche Bundespost (German Federal Post Office). Throughout 
              the 1990s, FF Meta was embraced by the international design community with Spiekermann and 
              E. M. Ginger writing that it had been dubiously praised as the Helvetica of the 1990s.
            </p>
            <p>FF Meta has been adopted by numerous corporations and other organizations as a corporate typeface, for signage or in their logo. These include Imperial College London, The Weather Channel, Free Tibet, Herman Miller, Zimmer Holdings, Mozilla Corporation, Mozilla Foundation, Schaeffler Group and Fort Wayne International Airport. The University of Hull uses FF Meta Serif alongside FF Meta.</p>
<div class="columns">
  <div class="column-samples">
<figure class="size-comparison">
  <div class="size-comparison--begin">transform</div>
  <div class="size-comparison--was">54 files, over 1350k</div>
  <div class="size-comparison--middle">into just</div>
  <div class="size-comparison--is">2 files & 310k</div>
  <div class="stats--glyphs"><strong>1200+</strong> glyphs, </div>
  <div class="stats--otf"><strong>21</strong> OpenType features</div>
  <div class="stats--closer"><strong>Infinite</strong> variations</div>
</figure>
  </div>
  <div class="column-text">
    <h2>Visually distinctive characteristics</h2>
    <h3>Lower case</h3>
    <ul>
      <li>Round dot over the letter i and j.</li>
      <li>Ends of the letter <i>s</i> are nearly horizontal</li>
      <li>Curved bottom of <i>l</i>, making it clearly different to a 1 or upper-case <i>i</i>.</li>
      <li>Double-storey <i>a</i> with a very open aperture at the top.</li>
      <li>Not fully closed bottom loop in binocular <i>g</i>.</li>
      <li>Bend to the left at the top of the letters <i>b</i>, <i>h</i>, <i>k</i>,  <i>l</i>.</li>
      <li>Bend to the right at the top of the letter <i>d</i>.</li>
      <li>A very distinctive y where the two strokes do not join smoothly.</li>
    </ul>
    <h3>Upper case</h3>
    <ul>
      <li>Angled letter <i>M</i>, more resembling Futura or an upturned <i>W</i> than Helvetica or Gill Sans</li>
      <li>Slanted upper terminal on the top right of <i>E</i>, <i>T</i> and <i>F</i>. E and T are not symmetrical.</li>
    </ul>
    <p>A general feature of FF Meta is relatively open apertures, in contrast to the more folded-up 
      appearance of Helvetica. This is believed to promote legibility and make the letterforms 
      more clearly different from one another. </p>
  <figure class="media--small media--right character-sample">
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
  </figure>
    <p>Source: <a href="https://en.wikipedia.org/wiki/FF_Meta">Wikipedia</a></p>
  </div>
            </div>
          </article>
    
        </div>
      </div><!--/.section-content-->
    </main>



            
          
!
            
              
@font-face {
  font-family: 'FF Meta VF';
  src: url('https://rwt.io/_demo_fonts/monotype/meta/MetaVariable.woff2') format('woff2-variations');
  font-display: swap;
  font-stretch: 3% 5%;
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family: 'FF Meta VF';
  src: url('https://rwt.io/_demo_fonts/monotype/meta/MetaVariable-Italic.woff2') format('woff2-variations');
  font-display: swap;
  font-stretch: 3% 5%;
  font-style: italic;
  font-weight: 100 900;
}



/* static web fonts */
@font-face {
  font-family: 'Plex Sans';
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-Regular.eot");
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/IBM-Plex-Sans/woff2/IBMPlexSans-Regular.woff2") format("woff2"), url("../fonts/IBM-Plex-Sans/woff/IBMPlexSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Plex Sans';
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-Bold.eot");
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/IBM-Plex-Sans/woff2/IBMPlexSans-Bold.woff2") format("woff2"), url("../fonts/IBM-Plex-Sans/woff/IBMPlexSans-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Plex Sans';
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-Italic.eot");
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/IBM-Plex-Sans/woff2/IBMPlexSans-Italic.woff2") format("woff2"), url("../fonts/IBM-Plex-Sans/woff/IBMPlexSans-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'Plex Sans';
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-BoldItalic.eot");
  src: url("../fonts/IBM-Plex-Sans/eot/IBMPlexSans-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/IBM-Plex-Sans/woff2/IBMPlexSans-BoldItalic.woff2") format("woff2"), url("../fonts/IBM-Plex-Sans/woff/IBMPlexSans-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic; }


:root {
  /* font stack */
  --font-stack-sans: "Plex Sans", Helvetica, arial, sans-serif;
  --font-stack-sans-vf: "FF Meta VF", Helvetica, arial, sans-serif;
  --font-stack-heading: var(--font-stack-sans);
  --font-stack-body: var(--font-stack-sans);
  /* breakpoint variables */
  --bp-small: 25;
  --bp-medium: 45;
  --bp-large: 55;
  --bp-xlarge: 65;
  /* colors */
  --color-gray-dark: #414141;
  --color-gray-dark-alpha: #41414188;
  --color-gray-lightest: #f9f9fd;
  --color-gray-lightest-alpha: #f9f9fd88;
  --color-blue: #003399;
  --color-blue-light: #ccd8ee;
  --color-purple: #7803bb;
  --color-purple-light: #d6c0e4;
  --color-red: #dd2f03;
  --color-red-light: #f79880;
  --color-parchment: #f7e8d3;
  --color-parchment-alpha: #f7e8d388;
  --color-bg: var(--color-gray-lightest);
  --color-bga: var(--color-parchment-alpha);
  --color-text: var(--color-gray-dark);
  --color-a-link: var(--color-blue);
  --color-a-visited: var(--color-purple);
  --color-a-hover: var(--color-red);
  --color-a-active: var(--color-red);
  --color-a-focus: var(--color-red);
  /* initial values  */
  --text-wght: 375;
  --text-wdth: 5;
  /* set px value sizes */
  /* initial px value for text */
  --rem-px: 16;
  /* set px value sizes */
  --p-size-s-px: 16;
  --p-size-m-px: 18;
  --p-size-l-px: 20;
  --h1-size-s-px: 40;
  --h1-size-m-px: 56;
  --h1-size-l-px: 72;
  --h2-size-s-px: 32;
  --h2-size-m-px: 36;
  --h2-size-l-px: 48;
  --h3-size-s-px: 20;
  --h3-size-m-px: 24;
  --h3-size-l-px: 28;
  /* set scale values */
  --p-size-min: calc( var(--p-size-s-px) / var(--rem-px) );
  --p-size-mid: calc( var(--p-size-m-px) / var(--rem-px) );
  --p-size-max: calc( var(--p-size-l-px) / var(--rem-px) );
  --p-lh-min: 1.3;
  --p-lh-mid: 1.4;
  --p-lh-max: 1.6;
  --p-wdth-min: 90;
  --p-wdth-mid: 95;
  --p-wdth-max: 100;
  --h1-size-min: calc( var(--h1-size-s-px) / var(--rem-px) );
  --h1-size-mid: calc( var(--h1-size-m-px) / var(--rem-px) );
  --h1-size-max: calc( var(--h1-size-l-px) / var(--rem-px) );
  --h1-lh-min: 1.05;
  --h1-lh-mid: 1.075;
  --h1-lh-max: 1.1;
  --h1-wdth-min: 85;
  --h1-wdth-mid: 92.5;
  --h1-wdth-max: 100;
  --h1-wght-min: 575;
  --h1-wght-mid: 625;
  --h1-wght-max: 675;
  --h2-size-min: calc( var(--h2-size-s-px) / var(--rem-px) );
  --h2-size-mid: calc( var(--h2-size-m-px) / var(--rem-px) );
  --h2-size-max: calc( var(--h2-size-l-px) / var(--rem-px) );
  --h2-lh-min: 1.05;
  --h2-lh-mid: 1.075;
  --h2-lh-max: 1.1;
  --h2-wdth-min: 85;
  --h2-wdth-mid: 92.5;
  --h2-wdth-max: 100;
  --h2-wght-min: 575;
  --h2-wght-mid: 625;
  --h2-wght-max: 675;
  --h3-size-min: calc( var(--h3-size-s-px) / var(--rem-px) );
  --h3-size-mid: calc( var(--h3-size-m-px) / var(--rem-px) );
  --h3-size-max: calc( var(--h3-size-l-px) / var(--rem-px) );
  --h3-lh-min: 1.05;
  --h3-lh-mid: 1.075;
  --h3-lh-max: 1.1;
  --h3-wdth-min: 90;
  --h3-wdth-mid: 95;
  --h3-wdth-max: 100;
  --h3-wght-min: 575;
  --h3-wght-mid: 625;
  --h3-wght-max: 675;
}

  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-stack-body);
  font-weight: var(--text-wght);
  font-stretch: calc( var(--text-wdth) * 1%);
  margin: 0;
  padding: 0 2em 0 0.5em; }

figure {
  margin: 0 auto 1rem;
  max-width: 96vw; }
  @media screen and (min-width: 45em) {
    figure {
      max-width: 40rem; } }
  @media screen and (min-width: 55em) {
    figure {
      max-width: 42rem; } }
  @media screen and (min-width: 65em) {
    figure {
      max-width: 44rem; } }

img {
  height: auto;
  max-width: 100%;
  width: 100%; }

h1 {
  font-family: var(--font-stack-heading);
  font-size: calc( var(--h1-size-min) * 1em);
  font-synthesis: none;
  font-weight: bold;
  line-height: var(--h1-lh-min);
  margin: 1rem auto;
  max-width: 96vw; }
  transition: all 0.5s ease-in-out; }
  @media screen and (min-width: 25em) {
    h1 {
      line-height: var(--h1-lh-mid);
      font-size: calc( var(--h1-size-mid) * 1em); } }
  @media screen and (min-width: 45em) {
    h1 {
      font-weight: var(--h1-wght-mid);
      max-width: 40rem; } }
  @media screen and (min-width: 55em) {
    h1 {
      font-weight: var(--h1-wght-max);
      max-width: 42rem; } }
  @media screen and (min-width: 65em) {
    h1 {
      font-size: calc( var(--h1-size-max) * 1em);
      line-height: var(--h1-lh-max);
      max-width: 44rem; } }

h2 {
  font-family: var(--font-stack-heading);
  font-size: calc( var(--h2-size-min) * 1em);
  font-synthesis: none;
  font-weight: bold;
  line-height: var(--h2-lh-min);
  margin: 1rem auto;
  max-width: 96vw;
  transition: all 0.5s ease-in-out; }
  @media screen and (min-width: 25em) {
    h2 {
      line-height: var(--h2-lh-mid);
      font-size: calc( var(--h2-size-mid) * 1em); } }
  @media screen and (min-width: 45em) {
    h2 {
      font-weight: var(--h2-wght-mid);
      max-width: 40rem; } }
  @media screen and (min-width: 55em) {
    h2 {
      font-weight: var(--h2-wght-max);
      max-width: 42rem; } }
  @media screen and (min-width: 65em) {
    h2 {
      font-size: calc( var(--h2-size-max) * 1em);
      line-height: var(--h2-lh-max);
      max-width: 44rem; } }

p {
  font-size: calc( var(--p-size-min) * 1em);
  font-synthesis: none;
  font-weight: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  line-height: var(--p-lh-min);
  margin: 0 auto;
  max-width: 96vw;
  transition: all 0.5s ease-in-out; }
  @media screen and (min-width: 25em) {
    p {
      line-height: var(--p-lh-mid);
      font-size: calc( var(--p-size-mid) * 1em); } }
  @media screen and (min-width: 45em) {
    p {
      max-width: 40rem; } }
  @media screen and (min-width: 55em) {
    p {
      -webkit-hyphens: none;
      hyphens: none;
          max-width: 42rem; } }
  @media (min-width: 65em) {
    p {
      font-size: calc( var(--p-size-max) * 1em);
      line-height: var(--p-lh-max);
      max-width: 44rem; } }
  * + p {
    margin-top: 1em; }

.article-detail {
  padding-bottom: 2rem;
}

i {
  font-synthesis: none;
}
/* -------------------- *\

     Variable Fonts

\* -------------------- */
@supports (font-variation-settings: normal) {
  :root {
    --font-stack-heading: var(--font-stack-sans-vf);
    --font-stack-body: var(--font-stack-sans-vf); }
  h1 {
    --text-wght: 575;
    font-size: calc( var(--h1-size-min) * 1em);
    font-stretch: calc( var(--h1-wdth-min) * 1%);
    font-weight: var(--h1-wght-min); }
    margin-left: calc( (100vw - 40rem) / 3 );
    transition: all 0.5s ease-in-out; }
    @media screen and (min-width: 25em) {
      h1 {
        line-height: calc(( var(--h1-lh-min) * 1em ) + ( var(--h1-lh-max) - var(--h1-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
        font-size: calc(( var(--h1-size-min) * 1em ) + ( var(--h1-size-max) - var(--h1-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) ))); } }
    @media screen and (min-width: 45em) {
      h1 {
        font-stretch: calc( var(--h1-wdth-mid) * 1%);
        font-weight: var(--h1-wght-mid); 
      }
    }
    @media screen and (min-width: 55em) {
      h1 {
        font-weight: var(--h1-wght-max); 
        margin-left: calc( (100vw - 42rem) / 3 ); 
      }
    }
    @media screen and (min-width: 65em) {
      h1 {
        font-size: calc( var(--h1-size-max) * 1em);
        font-stretch: calc( var(--h1-wdth-max) * 1%);
        line-height: var(--h1-lh-max); 
        margin-left: calc( (100vw - 44rem) / 3 );
      }
    }
  h2 {
    --text-wght: 575;
    font-size: calc( var(--h2-size-min) * 1em);
    font-stretch: calc( var(--h2-wdth-min) * 1%);
    font-weight: var(--h2-wght-min); 
  }
    @media screen and (min-width: 25em) {
      h2 {
        line-height: calc(( var(--h2-lh-min) * 1em ) + ( var(--h2-lh-max) - var(--h2-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
        font-size: calc(( var(--h2-size-min) * 1em ) + ( var(--h2-size-max) - var(--h2-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) ))); 
      } 
    }
    @media screen and (min-width: 45em) {
      h2 {
        font-stretch: calc( var(--h2-wdth-mid) * 1%);
        font-weight: var(--h2-wght-mid);
        margin-left: calc( (100vw - 40rem) / 6 );
        width:  calc( 40rem + ((100vw - 40rem) / 1.5) ) 
      } 
    }
    @media screen and (min-width: 55em) {
      h2 {
        font-weight: var(--h2-wght-max);
        margin-left: calc( (100vw - 42rem) / 3 );
        width:  calc( 42rem + ((100vw - 42rem) / 1.5) ) 
      }
    }
    @media screen and (min-width: 65em) {
      h2 {
        font-size: calc( var(--h2-size-max) * 1em);
        font-stretch: calc( var(--h2-wdth-max) * 1%);
        line-height: var(--h2-lh-max);
        margin-left: calc( (100vw - 44rem) / 3 );
        width:  calc( 44rem + ((100vw - 44rem) / 1.5) ) 
      } 
    }

    h3 {
      --text-wght: 575;
      font-size: calc( var(--h3-size-min) * 1em);
      font-stretch: calc( var(--h3-wdth-min) * 1%);
      font-weight: var(--h3-wght-min); 
    }
      @media screen and (min-width: 25em) {
        h3 {
          line-height: calc(( var(--h3-lh-min) * 1em ) + ( var(--h3-lh-max) - var(--h3-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
          font-size: calc(( var(--h3-size-min) * 1em ) + ( var(--h3-size-max) - var(--h3-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) ))); 
        } 
      }
      @media screen and (min-width: 45em) {
        h3 {
          font-stretch: calc( var(--h3-wdth-mid) * 1%);
          font-weight: var(--h3-wght-mid);
          margin-left: calc( (100vw - 40rem) / 6 );
          width:  calc( 40rem + ((100vw - 40rem) / 1.5) ) 
        } 
      }
      @media screen and (min-width: 55em) {
        h3 {
          font-weight: var(--h3-wght-max);
          margin-left: calc( (100vw - 42rem) / 3 );
          width:  calc( 42rem + ((100vw - 42rem) / 1.5) ) 
        }
      }
      @media screen and (min-width: 65em) {
        h3 {
          font-size: calc( var(--h3-size-max) * 1em);
          font-stretch: calc( var(--h3-wdth-max) * 1%);
          line-height: var(--h3-lh-max);
          margin-left: calc( (100vw - 44rem) / 3 );
          width:  calc( 44rem + ((100vw - 44rem) / 1.5) ) 
        } 
      }
  
  p {
    --text-wdth: calc( var(--p-vf-wdth) * .9 );
    font-size: calc( var(--p-size-min) * 1em);
    font-stretch: calc( var(--p-wdth-min) * 1%);
    font-synthesis: none;
    font-weight: var(--text-wght);
    margin-left: 0;
    width: 100%; 
  }
    @media screen and (min-width: 25em) {
      p {
        line-height: calc(( var(--p-lh-min) * 1em ) + ( var(--p-lh-max) - var(--p-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
        font-size: calc(( var(--p-size-min) * 1em ) + ( var(--p-size-max) - var(--p-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) ))); } }
    @media screen and (min-width: 45em) {
      p {
        font-stretch: calc( var(--p-wdth-mid) * 1%);
        max-width: 40rem;
        margin-left: calc( (100vw - 40rem) / 6 );
        width:  calc( 40rem + ((100vw - 40rem) / 1.5) ) 
      }
    }
    @media screen and (min-width: 55em) {
      p {
        margin-left: calc( (100vw - 42rem) / 3 );
        max-width: 42rem; 
        width:  calc( 42rem + ((100vw - 42rem) / 1.5) )
      }
    }
    @media (min-width: 65em) {
      p {
        font-size: calc( var(--p-size-max) * 1em);
        font-stretch: calc( var(--p-wdth-max) * 1%);
        line-height: var(--p-lh-max);
        margin-left: calc( (100vw - 44rem) / 3 );
        max-width: 44rem; 
        width:  calc( 44rem + ((100vw - 44rem) / 1.5) )
      }
    }
    * + p {
      margin-top: 1em; } 
    
    ul {
      --text-wdth: calc( var(--p-vf-wdth) * .9 );
      font-size: calc( var(--p-size-min) * 1em);
      font-stretch: calc( var(--p-wdth-min) * 1%);
      font-synthesis: none;
      font-weight: var(--text-wght);
      margin-left: 0;
      width: 100%; 
    }
      @media screen and (min-width: 25em) {
        ul {
          line-height: calc(( var(--p-lh-min) * 1em ) + ( var(--p-lh-max) - var(--p-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
          font-size: calc(( var(--p-size-min) * 1em ) + ( var(--p-size-max) - var(--p-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) ))); 
        } 
      }
      @media screen and (min-width: 45em) {
        ul {
          font-stretch: calc( var(--p-wdth-mid) * 1%);
          max-width: 40rem;
          margin-left: calc( (100vw - 40rem) / 6 );
          width:  calc( 40rem + ((100vw - 40rem) / 1.5) ) 
        }
      }
      @media screen and (min-width: 55em) {
        ul {
          margin-left: calc( (100vw - 42rem) / 3 );
          max-width: 42rem; 
          width:  calc( 42rem + ((100vw - 42rem) / 1.5) )
        }
      }
      @media (min-width: 65em) {
        ul {
          font-size: calc( var(--p-size-max) * 1em);
          font-stretch: calc( var(--p-wdth-max) * 1%);
          line-height: var(--p-lh-max);
          margin-left: calc( (100vw - 44rem) / 3 );
          max-width: 44rem; 
          width:  calc( 44rem + ((100vw - 42rem) / 1.5) )
        }
      }
    }

a:link {
  color: var(--color-a-link); }

a:visited {
  color: var(--color-a-visited); }

a:hover {
  color: var(--color-a-hover); }

a:active {
  color: var(--color-a-active); }

a:focus {
  color: var(--color-a-focus); }


/* first line style */
.article-detail > p:first-of-type:first-line {
  font-weight: 550;
  font-variant: small-caps; }

.size-comparison > * {
  font-size: 3rem;
}
 

.character-sample {
  border: solid 1px #a1a1a1;
  font-size: 2.5rem;
  font-weight: 375;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  width: calc( 100vw - 4rem );
  word-break: break-all;
}
  @media screen and (min-width: 45em) {
    .character-sample {
      font-size: 3.5rem;
      margin-left: calc( (100vw - 40rem) / 6 );
    }
  }
  @media screen and (min-width: 55em) {
    .character-sample {
      font-size: 4.5rem;
      margin-left: calc( (100vw - 42rem) / 3 );
    }
  }
  @media (min-width: 65em) {
    .character-sample {
      margin-left: calc( (100vw - 44rem) / 3 );
    }
  }



/* Editorial Design Bits */


.editorial h1 {
  --h1-size-max: 11;
  float: left;
  font-stretch: 3.5%;
  font-weight: 100;
  margin-left: 0;
  width: 3.5em;
  shape-outside: polygon(0px 0px, 2.95em 0px, 2.95em 42%, 3.5em 42%, 3.5em 65%, 2.5em 65%, 2.5em 95%, 0 95%);
}
@media screen and (min-width: 45em) {
  h1 {
    font-stretch: 5%;
  }
}

.editorial header + p {
  padding-top: 3rem;
}

.editorial .character-sample {
  border: solid 1px #a1a1a1;
  font-size: 3.5rem;
  font-weight: 375;
  margin-left: 0;
  max-width: 100%;
  padding: 1rem;
  width: calc( 100vw - 4rem );
  word-break: break-all;
}
@media screen and (min-width: 45em) {
  .editorial .character-sample {
    font-size: 3rem
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (min-width: 55em) {
  .editorial .character-sample {
    font-size: 3rem;
  }
}

.editorial .columns {
  display: grid;
        grid-template-columns: repeat(2, minmax(30em, 1fr));
  grid-gap: 2rem;
}
@media screen and (min-width: 65em) {
  .editorial .column-text > * {
    margin-left: 0;
    max-width: 100%;
  } 
}

.editorial .size-comparison * {
  --comp-ital: 0;
  --comp-wght: 500;
  --comp-wdth: 5%;
  --comp-size-mod: 1;
  font-family: "FF Meta VF";
  font-size: calc( (5vw + 1.75rem) * var(--comp-size-mod) );
  font-stretch: var(--comp-wdth);
  font-synthesis: none;
  font-weight: var(--comp-wght);
  font-variation-settings: "ital" var(--comp-ital);
  line-height: 1.15;
}

.editorial .size-comparison--begin {
  --comp-wght: 130;
  --comp-ital: 1;
  font-style: italic;
}
.editorial .size-comparison--was {
  --comp-wght: 900;
  --comp-size-mod: 1.25;
  line-height: 1;
}

.editorial .size-comparison--middle {
  --comp-wdth: 3%;
  --comp-wght: 325;
  --comp-ital: 1;
  font-style: italic;
}

.editorial .size-comparison--is {
  --comp-wght: 200;
  --comp-size-mod: 1.2;
}

.editorial .stats--glyphs {
  --comp-wdth: 3%;
  --comp-wght: 275;
}

.editorial .stats--glyphs strong {
  --comp-wght: 900;
  --comp-wdth: 4.5%;
  --comp-size-mod: 1.15;
}

.editorial .stats--otf {
  --comp-wdth: 3%;
  --comp-wght: 275;
  --comp-size-mod: 0.7;
}

.editorial .stats--otf strong {
  --comp-wght: 900;
  --comp-wdth: 5%;
  --comp-size-mod: 1.2;
}

.editorial .stats--closer {
  --comp-wdth: 3%;
  --comp-wght: 275;
  --comp-size-mod: 0.7;
}

.editorial .stats--closer strong {
  --comp-wght: 900;
  --comp-wdth: 3%;
  --comp-size-mod: 1.15;
  --comp-ital: 1;
  font-style: italic;
}


            
          
!
            
              if (!'classList' in document.createElement('span')) {
  document.getElementById('c-unsupported').classList.remove('hidden');
  document.getElementById('execute').setAttribute('disabled', 'disabled');
} else {
  if (document.getElementById('toggle-editorial')) {
    document.getElementById('toggle-editorial').addEventListener('click', function(e) {
      document.getElementById('maincontent').classList.toggle('editorial');
      e.preventDefault();
    });

  }
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console