cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
                  <main class="content-area clearfix">
      <div class="section-content">
        <article class="article-detail initial">
          <header>
            <h1>The evolution of typography with variable fonts</h1>
            <h2>Words have power, and typography is their voice</h2>
            <h3>by Jason Pamental</h3>
          </header>
          <figure id="example-ampersand" class="example-ampersand pause">
            <div class="example-ampersand--thin-thick">&</div>
            <div class="example-ampersand--thick-thin">&</div>
            <div class="example-ampersand--middle example-ampersand-pulse">&</div>
            <div class="example-ampersand--pulse">&</div>
            <figcaption class="button-control"><button id="play-pause" name="play-pause" class="play-pause pause">Click to </button></figcaption>
          </figure>
          <div class="no-support-message">
            <h3>We’re sorry!</h3>
            <p>It appears that your browser does not support variable fonts. So while you can read the article, you’re not really seeing it as intended. There are a bunch of browsers that do support them already, including:</p>
            <ul>
              <li><a href="https://www.apple.com/safari/">Safari</a> (Mac OS High Sierra, iOS 11+)</li>
              <li><a href="https://www.google.com/chrome/">Chrome</a> (Mac/Windows, v62+)</li>
              <li><a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> (v17+)</li>
              <li><a href="https://nightly.mozilla.org">Firefox Nightly Build</a> (v62+)</li>
              <li><a href="https://www.opera.com">Opera</a> (v49+)</li>
            </ul>
          </div>
<p class="intro">For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. Unfortunately, for many years after the advent of the web, we were unable to apply all but the most basic of typographic design to online content. With the ability to use real fonts and OpenType features—like ligatures, specific figure sets, fractions, and true kerning—the typographic landscape improved tremendously. But the reality of viewing content on the web dictates that speed is the most critical aspect of design—so we’ve traded typographic ‘vocal range’ for page speed. That means fewer font weights and reduced brand fidelity and voice.</p>

<h2 class="clear">From many, one (paradigm: shifted)</h2>
  <blockquote class="right"><p>A variable font is a single font that acts as many</p><cite>John Hudson</cite></blockquote>
<p>The advent of Variable Fonts changes that entire dynamic. As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file. What’s more: the format (which is technically part of the OpenType 1.8 specification) is completely extensible. The type designer has complete control over what axes are used, their ranges, and even the definition of new axes. There are currently 5 ‘registered’ axes (width, weight, slant, italics, and optical sizing), but the designer can vary any axis they choose. Some examples include the height of ascenders and descenders, text grade, even serif shape. The possibilities are nearly limitless. By removing the performance barrier, we open the door for more interesting and dynamic design and far greater ability to express the true voice of the brand. All this while maintaining fidelity to the typeface itself: only axes exposed by the type designer can be varied. No artificial distortion allowed.</p>

<h2>Web design, reinvented</h2>
<figure class="size-comparison">
  <div class="size-comparison--begin">transform</div>
  <div class="size-comparison--was">18 files, over 288k</div>
  <div class="size-comparison--middle">into just</div>
  <div class="size-comparison--is">1 file<br />84k</div>
</figure>
<p>While the technology is still maturing and type designers are working to become more fluent in this new way of working, the promise for design on the web is ground-breaking. The typical scenario would be to constrain any given design to 3-5 different fonts to represent every aspect of a site’s design language and voice—including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to use different weights for every level of heading—greatly increasing their clarity and readability.</p>

<p>One could also use slightly narrower character widths for headings or on data-dense displays of information. In fact the entire typographic system could be designed to be proportional: weight and width could become multipliers on the standard body copy settings. Doing so would allow those aspects to scale easily along with the body copy should its settings change based on screen size or user preference. All of this with an accompanying increase in performance due to fewer HTTP requests (fewer font files) and  an overall savings of data to download (though that will vary by font and compression used).</p>

<p>But while these freedoms allow us to be more expressive, some of the really interesting capabilities will help transform the reading experience itself. This page has been set with a new variable font version of <strong>FF Meta</strong>, the classic sans-serif design by Erik Spiekermann first released in 1991. Even with only one axis of variation (weight) of both roman and italic variants, a wonderful range of voice can be achieved with massive gains in performance: 18 files and over 288k replaced with a single file of only 84k.</p>

<h2>Reinvented reading on screen</h2>
<blockquote class="right">
  <p>[Meta] has to do more than look pretty: it has to work pretty hard</p>
  <cite>Erik Spiekermann</cite>
</blockquote>
<p>Some of the biggest challenges in creating a good reading experience are tied to the lack of finesse in proportion and fine details. The combination of modern CSS and OpenType features and variations presents a powerful combination. Being able to set features like ligatures and hyphenation based on language, turn hyphenation on and off based on screen size, and even tailor the character width on the smallest screens in order to fit more characters per line without reducing font size can make dramatic improvements in the smoothness and comfort of the reading experience.</p>

<h2>Ready for a close-up</h2>
<figure class="optical-sizing right">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/garamond_6pt.png" alt="Garamond 6pt" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/garamond_72pt.png" alt="Garamond 72pt" />
  <figcaption>18th century cut of Garamond cut in optical sizes. The first image is at 6pt size, the second is at 72. Note the difference in stroke contrast. It's much more refined in the larger size.</figcaption>
</figure>
<p>Another feature that was common in metal type but lost in translation to photo-typesetting and digital was optical sizing (well, some designers do still create separate optical sizes for different ranges, but it’s rare and somewhat limited). Not as often found on sans-serif designs, but in decades past (in truth, for centuries), it was quite common for the physically smaller sizes of a typeface to be cut with slightly heavier strokes, more open bowls and counters, and in some cases even wider apertures in order to preserve readability. Newspapers in particular found this critical to ensure lines didn’t get lost or letters didn’t suffer too greatly from ink gain.</p>

<p>Optical sizing has made a return in variable fonts, and can be automatically applied where available, or set explicitly by the web designer or developer. As mentioned, it’s not as frequent a feature in sans-serif typefaces like this one, but can be used to quite dramatic effect in higher-stroke-contrast serif designs.</p>

<h2>Polish and poise</h2>
<p>With the benefits already discussed, the case for variable fonts is pretty compelling. But good typography isn’t all there is to great design. The range of axes like width and weight give us tremendous freedom to embrace more editorial design on the web without having to load an exorbitant number of file assets. And since we already have those few required variable fonts in place, the opportunity is to expose them for use by content publishers themselves. Imagine a role for designers inside the Content Management System (or CMS) where the website is housed. That designer could use some simple controls built into the CMS that would allow them to typeset specific headlines or pull-quotes, enabling a whole new level of design much like what we have in print, without having to write custom code every time.</p>

<h3>We may still be at the dawn of this new era, but it’s future is certainly bright</h3>
<p>As of May 2018, 3 out of 4 major web browsers already support variable fonts, in addition to both dominant mobile platforms (<a href="https://caniuse.com/#feat=variable-fonts">check support on caniuse.com</a>). With that in mind, we’re ready to start lighting up the web today.</p>
<p>&nbsp;</p>
        </article>
      </div><!--/.section-content-->
    </main>

            
          
!
            
              /* FF Meta Variable Demo Font */

/* Import FF Meta VF using this link in your HTML */
/* https://variablefonts.monotype.com/MetaVariableDemo-Set.css */
/* Use 'FF Meta VF' for the font-family name */

/* Import Fira Sans for browsers that don't support Variable Fonts */
@supports not (font-variation-settings: normal) {
  @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i');
}
:root {

  /* Breakpoint variables */
  --bp-small: 24.15;
  --bp-medium: 43.75;
  --bp-large: 60.25;
  --bp-xlarge: 75;

  /* initial values ital */
  --text-wght: 350;
  --text-ital: 0;
  
  /* Paragraph variables */
  --p-line-height-min: 1.15;
  --p-line-height-max: 1.5;
  --p-font-size-min: 1.0;
  --p-font-size-max: 1.25;
  --p-vf-wght: var(--text-wght);

  /* H1 variables */
  --h1-line-height-min: 1.05;
  --h1-line-height-max: 1.1;
  --h1-font-size-min: 3;
  --h1-font-size-max: 6;
  --h1-vf-wght-multiplier-s: .33;
  --h1-vf-wght-multiplier-m: .33;
  --h1-vf-wght-multiplier-l: .33;

  /* H2 variables */
  --h2-line-height-min: 1.15;
  --h2-line-height-max: 1.25;
  --h2-font-size-min: 1.75;
  --h2-font-size-max: 2.5;
  --h2-vf-wght-multiplier-s: 1.25;
  --h2-vf-wght-multiplier-m: 1.5;
  --h2-vf-wght-multiplier-l: 1.75;

  /* H3 variables */
  --h3-line-height-min: 1.15;
  --h3-line-height-max: 1.25;
  --h3-font-size-min: 1.75;
  --h3-font-size-max: 2.5;
  --h3-vf-wght-multiplier-s: .5;
  --h3-vf-wght-multiplier-m: .5;
  --h3-vf-wght-multiplier-l: .5;

  /* Dropcap variables */
  --dc-line-height-min: .9;
  --dc-line-height-max: .95;
  --dc-font-size-min: 2.7;
  --dc-font-size-max: 5.25;

  /* Blockquote variables */
  --bq-line-height-min: 1.1;
  --bq-line-height-max: 1.1;
  --bq-font-size-min: 2.7;
  --bq-font-size-max: 5;
}

.italic,
i,
em {
  --text-ital: 1;
}

b,
strong {
  --text-wght: 475;
}

.clear {
  clear: both;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  background-color: #fbfbf6;
  color: #3c3d31;
  font-size: 100%;
}

body {
  padding-top: 5rem;
}

body, 
div,
p, 
th, 
td, 
ul, 
li, 
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figcaption,
cite,
i,
em,
b,
strong,
button,
p:first-line,
p:first-letter {
	font-family: "FF Meta VF", "Fira Sans", Helvetica, Arial, sans-serif;
	font-weight: normal;
  font-style: normal;
  font-variation-settings: 
    'wght' var(--text-wght), 
    'ital' var(--text-ital);
}

p {
  --text-ital: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 38rem;
	transition: all linear 0.2s;
  hyphens: auto;
}

/* Variations and variables */
p {
  font-size: calc( var(--p-font-size-min) * 1rem );
  line-height: var(--p-line-height-min);
  @media screen and (min-width: 24.15em) {
    line-height: calc(( var(--p-line-height-min) * 1em ) + ( var(--p-line-height-max) - var(--p-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
  }
  @media (min-width: 60.25em) {
    font-size: calc(( var(--p-font-size-min) * 1em ) + ( var(--p-font-size-max) - var(--p-font-size-min) ) * ((100vw - ( var(--bp-large) * 1em )) / ( var(--bp-xlarge) - var(--bp-large) )));
    line-height: var(--p-line-height-max);
  }
  @media (min-width: 75em) {
    font-size: calc( var(--p-font-size-max) * 1em );
    max-width: 42rem;
  }
}


/* Generic header styles */
h1, h2, h3, h4, h5, h6 {
	font-family: "FF Meta VF", "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: normal;
	transition: all linear 0.2s; 
	--text-wght: calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-s) );	
}

h1 {
  /* Set --text-wght value multiplier */
	--text-wght: calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-s) );	
  --text-ital: 0;

	font-family: "FF Meta VF", "Fira Sans", Helvetica, Arial, sans-serif;
  font-size: calc( var(--h1-font-size-min) * 1em );
  line-height: var(--h1-line-height-min);
  margin: 1rem auto;
  max-width: 50rem;
  @media screen and (min-width: 24.15em) {
    line-height: calc(( var(--h1-line-height-min) * 1em ) + ( var(--h1-line-height-max) - var(--h1-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    font-size: calc(( var(--h1-font-size-min) * 1em ) + ( var(--h1-font-size-max) - var(--h1-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
  }
  @media screen and (min-width: 43.75em) {
	  --text-wght: calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-m) );	
    max-width: 60rem;
  }
  @media screen and (min-width: 60.25em) {
	  --text-wght: calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) );	
    line-height: var(--h1-line-height-max);
    max-width: 70rem;
  }
  @media (min-width: 75em) {
    font-size: calc( var(--h1-font-size-max) * 1em );
    line-height: var(--h1-line-height-max);
    max-width: 75rem;
  }
}





h2 {
  /* Set --text-wght value multiplier */
	--text-wght: calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-s) );
  --text-ital: 0;

	font-family: "FF Meta VF", "Fira Sans", Helvetica, Arial, sans-serif;
  font-size: calc( var(--h2-font-size-min) * 1em );
  line-height: var(--h2-line-height-min);
  margin: 1rem auto .5rem auto;
  max-width: 38rem;
  @media screen and (min-width: 24.15em) {
    line-height: calc(( var(--h2-line-height-min) * 1em ) + ( var(--h2-line-height-max) - var(--h2-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    font-size: calc(( var(--h2-font-size-min) * 1em ) + ( var(--h2-font-size-max) - var(--h2-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
  }
  @media screen and (min-width: 43.75em) {
  	--text-wght: calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-m) );	

    max-width: 38.5rem;
  }
  @media screen and (min-width: 60.25em) {
    max-width: 38.5rem;
  }
  @media (min-width: 75em) {
  	--text-wght: calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-l) );	

    font-size: calc( var(--h2-font-size-max) * 1em );
    line-height: var(--h2-line-height-max);
    max-width: 42rem;
  }
}

h3 {
  /* Set --text-wght value multiplier */
	--text-wght: calc( var(--p-vf-wght) * var(--h3-vf-wght-multiplier-s) );
	--text-ital: 1;

	color: #444466;
	font-family: "FF Meta VF", "Fira Sans", Helvetica, Arial, sans-serif;
  font-size: calc( var(--h2-font-size-min) * 1em );
  line-height: var(--h2-line-height-min);
  margin: 1rem auto .5rem auto;
  max-width: 38rem;
  text-align: center;
  @media screen and (min-width: 24.15em) {
    line-height: calc(( var(--h3-line-height-min) * 1em ) + ( var(--h3-line-height-max) - var(--h3-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    font-size: calc(( var(--h3-font-size-min) * 1em ) + ( var(--h3-font-size-max) - var(--h3-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
  }
  @media screen and (min-width: 43.75em) {
  	--text-wght: calc( var(--p-vf-wght) * var(--h3-vf-wght-multiplier-m) );	

    max-width: 38.5rem;
  }
  @media screen and (min-width: 60.25em) {
    max-width: 38.5rem;
  }
  @media (min-width: 75em) {
  	--text-wght: calc( var(--p-vf-wght) * var(--h3-vf-wght-multiplier-l) );	

    font-size: calc( var(--h3-font-size-max) * 1em );
    line-height: var(--h3-line-height-max);
    max-width: none;
  }
}

a {
  &:link {
    color: #555577;
    text-decoration: underline;
  }
  &:visited {
    color: #555577;
    text-decoration: underline;
  }
  &:hover {
    color: #bb4444;
    
  }
}
blockquote {

  float: right;
  line-height: var(--bq-line-height-min);
  margin: .5rem 5% 1rem .5rem;
  max-width: 45%;
	transition: all linear 0.2s; 
	&.right {
  	float: right;
  	margin-left: .5rem;
  	margin-right: 5%;
	}	
	&.left {
  	float: left;
  	margin-left: 5%;
  	margin-right: .5rem;
	}	
	p {
    /* Set --text-x value */
  	--text-wght: calc( var(--p-vf-wght) * .65 );	
  	--text-ital: 1;
    font-size: 6.5vw;
    margin: 0 0 .25em 0;
    position: relative;
    &:first-letter {
      --text-ital: 1;
    }
	}
	cite {
  	--text-ital: 1;
  	display: block;
    font-size: 3.5vw;
    text-align: right;
    &:before {
      content: "—";
    }
	}
  @media screen and (min-width: 24.15em) {
    margin: .5rem 5% .5rem .5rem;
    max-width: 45%;
  	&.right {
    	margin-left: .5rem;
    	margin-right: 0;
  	}	
  	&.left {
    	margin-left: 0;
    	margin-right: .5rem;
  	}	
  	p {
    	--text-wght: calc( var(--p-vf-wght) * .8 );
      font-size: 5.5vw;
      line-height: calc(( var(--bq-line-height-min) * 1em ) + ( var(--bq-line-height-max) - var(--bq-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
  	}
  	cite {
      font-size: 3vw;
  	}
  }
  @media (min-width: 60.25em) {
    margin: 1rem 12vw 2rem 2rem;
    max-width: 29.5%;
  	&.right {
    	margin-left: 3.5%;
    	margin-right: 12vw;
  	}	
  	&.left {
    	margin-left: 17%;
    	margin-right: 3.5%;
  	}	
  	p {
    	--text-wght: calc( var(--p-vf-wght) * .7 );
      font-size: 4vw;
      line-height: var(--bq-line-height-max);
  	}
  	cite {
      font-size: 2.5vw;
  	}
  }
}

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

h2 + p {
  margin-top: 1em;
}

/* Layout */
/* Undo some of the Layout width bits */
.section-content {
	margin: 0 auto;
	padding: 0 0.5em;
}
	@media only screen and (min-width: 24.15em) {
	    .section-content {
		    max-width: 98%;
	    }
	}
	
	@media only screen and (min-width: 43.75em) {
	    .section-content {
		    max-width: 98%;
	    }
	}
	
	@media only screen and (min-width: 60.25em) {
	    .section-content {
		    max-width: 98%;
	    }
	}
	
	@media only screen and (min-width: 75em) {
	    .section-content {
		    max-width: 94%;
	    }
	}

.article-detail {
  > header {
    
    h1 {
      --text-ital: 0;
      font-size: 15vw;
      margin-top: 0;
    }
    h2 {
      color: #444466;
      font-size: 4.35vw;
    }
    h3 {
      --text-ital: 0;
      
      color: #000000;
      font-size: 4vw;
      text-align: left;
    }
  	@media only screen and (min-width: 43.75em) {
  	  float: left;
      width: 50%;
      h1 {
        font-size: 7.25vw;
        @supports not (font-variation-settings: normal) {
          font-size: 6.25vw;
        }

      }
      h2 {
        font-size: 2vw;
        max-width: none;
      }
      h3 {
        font-size: 2vw;
      }
  	}
  }
  .intro {
    max-width: none;
    position: relative;
    z-index: 45;
  	@media only screen and (min-width: 43.75em) {
    	padding-left: 50%;
    }
  }

}



/* Component styles */
@supports (font-variation-settings: normal) {
  .no-support-message {
    display: none;
    position: absolute;
    text-indent: -999em;
    visibility: hidden;
  }
}

@supports not (font-variation-settings: normal) {
  .example-ampersand {
    display: none;
    position: absolute;
    text-indent: -999em;
    visibility: hidden;
  }
}

.no-support-message {
  background-color: rgba(#1155aa,.25);
  display: grid;
  margin: 0;
  padding: 1.5em;
  @media screen and (min-width: 43.75em) {
	  float: none;
    width: 50%;
  }
  h3 {
    margin-top: 0;
  }
  p {
    font-size: .925em;
    margin-top: 0;
  }
  ul {
    font-size: .925em;
    margin-top: 0;
  }
}

.example-ampersand {
  display: grid;
  float: right;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin: 0;
  padding: 0;
  width: 50%;
  @media screen and (min-width: 43.75em) {
	  float: none;
  }
  > div {
    font-size: 50vw;
    grid-column: col / span 1;
    grid-row: row / span 1;
    line-height: .89;
    text-align: center;
    transition: margin .2s ease-out, color .2s ease-out;
    @media screen and (min-width: 43.75em) {
  	  font-size: 25vw;
    }
  }
  &--thin-thick {
    --text-wght: 100;
    color: rgba(#000000,.25);
    z-index: 10;
    .pause & {
      color: rgba(#000000,.1);
      margin-left: -2.5em;
    	@media screen and (min-width: 43.75em) { 
    	  color: rgba(#000000,.25);	
      }
    }
  }
  &--middle {
    --text-wght: 500;
    color: rgba(#000000,.25);
    z-index: 15;
    .pause & {
      color: rgba(#000000,.15);
      margin-left: -1.75em;
    	@media screen and (min-width: 43.75em) { 
    	  color: rgba(#000000,.25);	
      }
    }
  }
  &--thick-thin {
    --text-wght: 900;
    color: rgba(#000000,.25);
    z-index: 20;
    .pause & {
      margin-left: -.75em;
    }
  }
  &--pulse {
    color: rgba(#1155aa,.25);
    z-index: 15;
    .play & {
      animation: pulse 4s 1;
      will-change: transform;
    }
  }
}

.button-control {
  grid-column: col / span 1;
  grid-row: row 2 / span 1;
  justify-self: end;
}
.play-pause {
  --text-wght: 450;
  border: none;
  background-color: rgba(#444466,.8);
  border-radius: .2em;
  color: #ffffff;
  cursor: pointer;
  padding: .25em 0;
  position: relative;
  transition: background-color .2s ease-out;
  width: 9em;
  z-index: 50;
  &:hover {
    background-color: rgba(#444466,1);
  }
  &:after {
    .play & {
      content: "Pause";
    }
    .pause & {
      content: "Play";
    }
  }
}


.size-comparison {
  float: left;
  margin: 0;
  padding: 0;
  width: 35vw;
	@media screen and (min-width: 43.75em) { 
	  width: 18vw;	
  }
  > * {
    --text-wght: 100;
    font-size: 3vw;
  }
  &--begin {
    --text-wght: 195;
    --text-ital: 1;
    color: #444466;
    font-size: 6vw;
  	@media screen and (min-width: 43.75em) { 
  	  --text-wght: 135;
      font-size: 4vw;	
    }
  }
  &--was {
    --text-wght: 450;
    font-size: 4.15vw;
    line-height: 1;
  	@media screen and (min-width: 43.75em) { 
  	  font-size: 2.15vw;	
    }
  }
  &--middle {
    --text-wght: 195;
    --text-ital: 1;
    color: #444466;
    font-size: 6.5vw;
    line-height: 1;
  	@media screen and (min-width: 43.75em) { 
  	  --text-wght: 135;
      font-size: 4.5vw;	
    }
  }
  &--is {
    --text-wght: 900;
    font-size: 14vw;
    line-height: 1;
  	@media screen and (min-width: 43.75em) { 
  	  font-size: 8vw;	
    }
  }
}

/* First-line styles */
.article-detail > p:first-of-type:first-line {
  /* Set --text-x value */
	--text-wght: calc( var(--p-vf-wght) * 1.25 );	

	font-family: "FF Meta VF", "Fira Sans", Helvetica, Arial, sans-serif;
	@media screen and (min-width: 43.75em) { 
	  --text-wght: calc( var(--p-vf-wght) * 1.25 );	

    }
}

/* Initial Cap styles */
.article-detail.initial > p:first-of-type:first-letter {
	--text-wght: calc( var(--p-vf-wght) * 1.75 );	

	color: #444466;
	float: left; 
	padding-right: 0.05em; 
	font-family: "FF Meta VF", "Fira Sans", Helvetica, Arial, sans-serif;
	font-size:  calc( var(--dc-font-size-min) * 1em ); 
  line-height: var(--dc-line-height-min);
	margin-bottom: -.1em; 
	margin-top: -.05em;
  @media screen and (min-width: 24.15em) {
    font-size: calc(( var(--dc-font-size-min) * 1em ) + ( var(--dc-font-size-max) - var(--dc-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    line-height: calc(( var(--dc-line-height-min) * 1em ) + ( var(--dc-line-height-max) - var(--dc-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
  }
  @media screen and (min-width: 43.75em) {
	  --text-wght: calc( var(--p-vf-wght) * 1.95 );	

  }
  @media (min-width: 60.25em) {
  	--text-wght: calc( var(--p-vf-wght) * 2.15 );	

    font-size: calc( var(--dc-font-size-max) * 1em );
    line-height: var(--dc-line-height-max);
  }
}

/* Content end styles */
.content-area p:last-child:after {
  color: #777;
	content: "\2766";
	display: block;
	font-family: Georgia, "New Times Roman", serif;
	font-size: 5em;
	font-style: italic;
	font-weight: 300;
	line-height: .75;
	margin-top: 1rem;
	margin-bottom: 2rem;
	text-align: center;
}

.optical-sizing {
  margin: 1rem 0 0 0;
  @media screen and (min-width: 43.75em) {
    float: right;
    margin: 1rem 10% 0 2%;
    width: 39%;
  }
  > img {
    display: inline;
    width: 49%;
  }
  figcaption {
    --text-ital: 1;
    font-size: .875rem;
    margin-bottom: .5em;
  }
}

@-webkit-keyframes pulse {
  0% {
  font-variation-settings: 
    'wght' 100, 
    'ital' 0;
  }
  50% {
  font-variation-settings: 
    'wght' 900, 
    'ital' 0;
  }
  100% {
  font-variation-settings: 
    'wght' 100, 
    'ital' 0;
  }
}
@keyframes pulse {
  0% {
  font-variation-settings: 
    'wght' 100, 
    'ital' 0;
  }
  50% {
  font-variation-settings: 
    'wght' 900, 
    'ital' 0;
  }
  100% {
  font-variation-settings: 
    'wght' 100, 
    'ital' 0;
  }
}

            
          
!
            
                var container = document.getElementById('example-ampersand');
  var controls = document.getElementById('play-pause');
  
  controls.addEventListener('click', function(evt) {
    var input=evt.target;
    switch (input.name) {
      case "play-pause":
        var opposite = input.classList.contains('play');

  if (opposite) {
    container.classList.remove('play');
    container.classList.add('pause');
    controls.classList.remove('play');
    controls.classList.add('pause');
  }         else {
    container.classList.add('play');
    container.classList.remove('pause');
    controls.classList.add('play');
    controls.classList.remove('pause');
    var delayInMilliseconds = 4000; //1 second
    
    setTimeout(function() {
      //your code to be executed after 1 second
        container.classList.remove('play');
        container.classList.add('pause');
        controls.classList.remove('play');
        controls.classList.add('pause');
    }, delayInMilliseconds);
  }
        break;

        }
  });




            
          
!
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.
Loading ..................

Console