Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

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

CSS 

              
                /* 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;
  
  /* 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 {
  ;
}

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);
}

p {
  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) );	

	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) );

	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) );

  font-style: italic;
  font-synthesis: none;
	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 );	
  	font-style: italic;
    font-synthesis: none;
    font-size: 6.5vw;
    margin: 0 0 .25em 0;
    position: relative;
    &:first-letter,
    &:first-line {
      font-style: inherit;
    }
	}
	cite {
    font-style: italic;
    font-synthesis: none;
  	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 {
      font-size: 15vw;
      margin-top: 0;
    }
    h2 {
      color: #444466;
      font-size: 4.35vw;
    }
    h3 {
      
      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;
    font-style: italic;
    font-synthesis: none;
    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;
    font-style: italic;
    font-synthesis: none;
    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 {
    font-style: italic;
    font-synthesis: none;
    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;
  }
}
!

JS 

              
                  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

Console