Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

+ 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.

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

              
                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>typetura</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <meta name="disabled-adaptations" content="watch">
    <link rel="manifest" href="manifest.json" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#359f9d">
    <meta name="apple-mobile-web-app-title" content="typetura">
    <meta name="application-name" content="typetura">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="theme-color" content="#359f9d">
    <link href="style.css" rel="stylesheet">
    <script src="script.js"></script>
  </head>
  <body>
    <svg id="filters" width="0" height="0"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect id="high2" width="100%" height="100%" fill="url(#high1)"></rect>
      <rect id="low2" width="100%" height="100%" fill="url(#low1)"></rect>
      <filter id="fluid">
        <feTurbulence type="fractalNoise" baseFrequency=".08 .04" numOctaves="3" result="noise1"></feTurbulence>
        <feColorMatrix in="noise1" type="hueRotate" result="noise2">
          <animate attributeName="values" from="0" to="360" dur="10s" repeatCount="indefinite"/>
        </feColorMatrix>
        <feDisplacementMap xChannelSelector="R" yChannelSelector="B" scale="16" in="SourceGraphic" in2="noise2" />
      </filter>
    </svg>
    
    <nav id="nav">
      <a href="javascript:navtoggle()" class="navtoggle">
        <span class="navtoggle_label">Toggle nav</span>
        <div class="partbar active"></div>
        <div class="partbar"></div>
        <div class="partbar"></div>
        <div class="partbar"></div>
        <div class="partbar"></div>
      </a>
      <div class="navparts">
        <a href="#part1" class="current">
          <span class="part">Part 1</span>
          <span class="title">Fluid Typography and the Creation of Typetura</span>
        </a>
        <a>
          <span class="part">Part 2</span>
          <span class="title">Getting started with Typetura.com</span>
        </a>
        <a>
          <span class="part">Part 3</span>
          <span class="title">Unlocking the potential of Typetura.js</span>
        </a>
        <a>
          <span class="part">Part 4</span>
          <span class="title">Building Typetrura.com</span>
        </a>
        <a>
          <span class="part">Part 5</span>
          <span class="title">The future of Typetura</span>
        </a>
      </div>
    </nav>

    <article>
      <div class="bkg"></div>
      <div class="width-value" id="widthValue"></div>

      <div class="meta momentumcss">
        <div class="logo">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M256.3,123h42.1l-14.2,64h62.7l-6.4,42.9h-66.5l-23.2,97.4l1.3,2.6l64-18l6.4,5.6
            c-16.3,32.6-58.8,66.1-85.8,66.1c-12.4,0-49.8-20.2-48.9-25.3l23.2-124.5L173,226l4.3-23.2l48.1-21L256.3,123z"/>
          </svg>
        </div><span class="date">January 31, 2019</span>
      </div>

      <h1 class="hed momentumcss">Fluid typography and&nbsp;the creation of&nbsp;Typetura</h1>
      <div class="byline">by <a href="https://scottkellum.com">Scott Kellum</a> and <a href="http://clickclickonsal.com/">Sal Hernandez</a>. Edited by <a href="http://anamonroe.com/">Ana Monroe</a>.</div>
      <section class="lede">
        <p>
          The web is an inherently fluid platform. To design for it effectively, a fluid typographic system is necessary. Over the past decade fluid and responsive layouts have evolved significantly. However, the text that flows through them has not. While images and boxes shrink and expand relative to their context, text occupies a static volume. In his 2015 essay, <a href="https://frankchimero.com/writing/the-webs-grain/"><em>‘The Webs Grain’</em></a>, Frank Chimero refers to this issue as “the primary visual challenge of responsive design”. Fluid typography answers this problem, and typetura answers fluid typography.
        </p>
      </section>
      <section class="article">
        <p>
          Originally published at <a href="https://typetura.scottkellum.com">typetura.scottkellum.com</a>.
        </p>
        <p>
          The transition from print to digital rocked the design industry. In print, page sizes, paper stock, and printing methods are carefully controlled, and the resulting artifact is shipped to the consumer of that media. In digital, the only thing that is sent to the consumer is a set of instructions that are later assembled by that consumer’s device. Before smartphones, web designers would keep track of popular screen sizes to craft pixel perfect websites to deliver. But this practice was a fool’s errand. Designers needed to ensure designs would show up correctly regardless of screen size, not a specific width. Ethan Marcotte presented a better vision for the web with <a href="https://alistapart.com/article/responsive-web-design">responsive web design</a>. This vision was of a single web, a web that adapted to every device that touched it.
        </p>
        <figure>
          <div class="flexwrap">
            <div class="fluidpage">
              <div class="img"></div>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
            </div>
            <div class="fluidtype">
              <div class="img"></div>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
              <span class="word"></span>
            </div>
          </div>
          <figcaption>Tap/hover to see how text wraps around a block level element in a responsive context without fluid typography (on left), compared with how text wraps with fluid typography (on right).</figcaption>
        </figure>
        <p>
          Responsive design works for layouts through percentages and media queries. However, to Chimero’s point, they don’t solve the typographic needs of a fluid medium. Images and boxes fluidly grow and collapse to fit the context. In his 2012 post <a href="https://tbrown.org/notes/2012/02/03/molten-leading-or-fluid-line-height/"><em>‘Molten leading (or, fluid line-height)’</em></a>, Tim Brown proposed a solution. Brown’s solution involves scaling text and leading fluidly as a block of text changes in size. A few months later, Trent Walton expressed similar ideas, coining the term <a href="https://trentwalton.com/2012/06/19/fluid-type/"><em>‘fluid type’</em></a> in his post of the same name. The need for fluid typography was apparent. Ways to implement it started being developed initially in JavaScript: Mat Marquis released <a href="https://github.com/Wilto/Molten-Leading">Molten Leading</a> and Dave Rupert released <a href="http://fittextjs.com/">FitText</a>. While FitText caught on, these tools didn’t solve the problem of fluid typesetting at scale. They lack the ability to style within CSS and are limited to portions of a page. So designers heald off on implementing fluid type on their websites.
        </p>
        <div class="detail ellipsis momentumcss"></div>
        <p>
          Viewport units and the CSS <code>calc()</code> function brought new opportunities. Mike Riethmuller developed a <a href="https://www.madebymike.com.au/writing/precise-control-responsive-typography/">fluid typography formula</a> combining these features, which Tim Brown later dubbed <a href="https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/">CSS Locks</a>. This technique is more performant and gave a far more practical option for implementing fluid typography. Sass plugins helped abstract the complicated mathematics behind it, as I demonstrated in the <a href="https://github.com/modularscale/modularscale-sass#multiple-scale-threads">Sass Modular Scale</a> plugin. However, with all its advantages, CSS Locks hasn’t gone without criticism. Lea Verou noted that <a href="https://github.com/w3c/csswg-drafts/issues/544">new CSS features</a> would better serve this technique. And, In a new-ish problem, it also lacks the ability to interpolate variable font settings.
        </p>
        <h1>New fonts, new opportunities</h1>
        <p>
          <a href="https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369">Variable fonts were announced in In 2016 by John Hudson</a>. Variable fonts contain information that allow them to dynamically change their style and appearance. This means one font file can contain every weight and every variation. The implication for fluid typesetting is that variable fonts can interpolate among these styles. This means that, as a website scales, the weight, optical size, and width of the letterforms can theoretically scale with it. Bringing this theory to practical usage, Andrew Johnson wrote a wonderful article on <a href="https://alistapart.com/article/live-font-interpolation-on-the-web">what font interpolation is and how it can be used</a>, and Mandy Michael has numerous examples of <a href="https://codepen.io/mandymichael/details/YYaWop">how variable fonts add life to text</a>.
        </p>
        <figure>
          <h1><span class="variable-a">Foreday</span></h1>
          <figcaption>
            Tap/hover to see <a href="https://www.dstype.com/variable-fonts">Foreday Italic, by DSType</a>, animated across weight and serif axis.
          </figcaption>
        </figure>
        <p>
          Combining variable fonts and fluid typography is important. Different characteristics are brought out of type at different sizes. Finer, more delicate features can exist at large sizes, while blunt features and more open forms are easier to read at small sizes. This is referred to as optical sizing and has as long a history as type design itself. Metal type was only usable at the size it was cast, so optical size variations were built into the font. Until variable fonts, digital fonts lacked that control without loading an entirely different font.
        </p>
        <h1>Creating Typetura</h1>
        <div class="detail spot momentumcss"></div>
        <p>
          Typetura was created to make fluid typography mainstream. To do this there were two problems to solve. First, develop an implementation that is feature rich and easy to implement with CSS. Second, create a design tool that designers can use to illustrate how they want fluid typography to look.
        </p>
        <p>
          To ensure the implementation was easy to use and understand, Typetura needed a simple, declarative syntax in vanilla CSS. This means no complicated math or Sass tricks. In early versions of Typetura, CSS custom properties were paired with a JavaScript interpreter. The JavaScript interpreter would look for a property like <code>--font-size</code> with a list of keyframe and value pairs. These keyframe and value pairs are rendered into the <code>font-size</code> property. While the early syntax was easy to author it was limited in ability. The JavaScript parser had to look for specific properties on specific elements. This means anything outside the scope of the parser would be ignored. Typetura needed to be more flexible than it was.
        </p>
        <p>
          CSS already has keyframes. Mapping them to something other than time was the trick. Combining a browser width value and animation delay, Typetura now works with any property on any selector. The new Typetura also has the added benefit of working with values other than browser width such as scroll depth, cursor position, and device orientation. Entire layouts can flow through keyframes as opposed to being divided into breakpoints.
        </p>
        <p>
          This CSS is the cornerstone of Typetura and keyframe-based fluid design:<br>
          <code>animation:var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused;</code><br>
          This single line of CSS allows Typetura to apply the correct keyframe settings at a specific place. All the JavaScript does is write the width as a CSS variable and package the static CSS assets.
        </p>
        <p>
          New ideas are worth little without effective ways to communicate their benefits. Design software is constructed around fixed art boards, but there needs to be a way for designers to communicate how designs transition between sizes. Typetura is not just a technology, but a tool. Typetura is a tool that enables designers to work with a fluid canvas. With a patent-pending interface, designers can set type at any size. These transitions between sizes can be adjusted and communicated to development teams without the need to write code. If you do need the code, the CSS is there for you to use.
        </p>
      </section>
    </article>
    <footer>
      <a class="footer-typetura" href="https://typetura.com">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M256.3,123h42.1l-14.2,64h62.7l-6.4,42.9h-66.5l-23.2,97.4l1.3,2.6l64-18l6.4,5.6
          c-16.3,32.6-58.8,66.1-85.8,66.1c-12.4,0-49.8-20.2-48.9-25.3l23.2-124.5L173,226l4.3-23.2l48.1-21L256.3,123z"/>
        </svg>
        typetura.com
      </a>
      <a href="https://codepen.io/scottkellum/pen/yZppGd" class="footer-nextpart">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <polyline class="a6679ea1-9a17-403e-b2f3-7212a8437001" points="6 2 14 10 6 18"/>
        </svg>
        Part 2 Coming Soon
        <h1>Getting started with Typetura.com</h1>
      </a>
    </footer>
  </body>
</html>
              
            
!

CSS

              
                @charset "UTF-8";

/*
DON’T STEAL FONTS
You can buy Foreday from DSType here
https://www.dstype.com/variable-fonts

It’s a good font that is totally worth every penny.
*/
@font-face {
  font-family: 'Foreday';
  src: url('https://cdn.glitch.com/ee1da64b-efec-4ea2-b15d-6d2259c7e664%2FForedayGX.woff2?1548900928012') format('woff2'), url('ForedayGX.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Foreday';
  src: url('https://cdn.glitch.com/ee1da64b-efec-4ea2-b15d-6d2259c7e664%2FForedayItalicGX.woff2?1548900928039') format('woff2'), url('ForedayItalicGX.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

body {
  --color: #04BAAC;
  --color-2: #FF8564;
  --text: rgb(23, 24, 24);
  --link: rgb(11, 85, 79);
  --bkg: #fff;
  --bkg-alt: rgb(242, 245, 245);
  --tt-ease: linear;
  --tt-key: body;
  --tt-max: 1600;
  --tt-bind: var(--viewportwidth);
  max-width: 100vw;
  overflow-x: hidden;

  margin: 0;
  padding: 0;

  font-family: 'Foreday', system-ui, sans-serif;
  font-variation-settings: "wght" 80, "SERI" 3;
  font-size: 20px;
  line-height: 1.7;
}

* {
  --tt-key: none;
  animation: var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused;
  font-weight: normal;
}

code {
  background-color: rgb(235, 249, 247);
  color: rgb(0, 77, 71);
  border-radius: 3px;
  padding: .25em .4em;
  font-size: .9em;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

.flexwrap {
  display: flex;
  justify-content: space-around;
}

nav {
  position: fixed;
  top: 1.6rem;
  right: 2rem;
  transition: opacity .5s ease;
  z-index: 9;
  color: var(--color);
}
.partbar {
  position: relative;
  height: 2px;
  background-color: currentColor;
  margin-bottom: 2px;
  width: 12px;
  box-shadow: 0 0 0 2px var(--bkg);
}
.partbar.active {
  width: 18px;
}
.navparts {
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s ease;
}
nav.active {
  color: #fff;
}
nav.active .partbar {
  box-shadow: none;
}
nav.active .navparts {
  visibility: visible;
  opacity: 1;
}

.navparts a {
  display: block;
  margin: 3em 0;
  transform: translateY(100%);
  opacity: 0;
  transition: none;
}
nav.active .navparts a {
  transform: none;
  opacity: 1;
  transition: all .5s ease;
}
nav.active .navparts a:nth-child(2) { transition-delay: .1s }
nav.active .navparts a:nth-child(3) { transition-delay: .2s }
nav.active .navparts a:nth-child(4) { transition-delay: .3s }
nav.active .navparts a:nth-child(5) { transition-delay: .4s }

.navtoggle {
  position: fixed;
  z-index: 9;
}
.navtoggle_label {
  opacity: 0;
  position: absolute;
  left: 2rem;
  top: 0;
  line-height: 1.1;
  color: currentColor;
  white-space: nowrap;
}
a:-moz-focusring .navtoggle_label,
a:focus-visible .navtoggle_label {
  opacity: 1;
}

.navparts {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color);
  color: var(--bkg);
  padding: 3vw;
  overflow: auto;
}

nav a {
  color: inherit;
  display: block;
  max-width: 800px;
}
nav.active a {
  color: inherit;
  text-decoration: inherit;
  color: rgba(255, 255, 255, 0.5);
}
nav.active a:link {
  opacity: 1;
  color: #fff;
}
nav .part {
  text-transform: uppercase;
  display: block;
  font-variation-settings: "wght" 80, "SERI" 10;
  line-height: 1;
  letter-spacing: .2em;
}
nav .title {
  font-variation-settings: "wght" 160, "SERI" 1;
  font-size: 4em;
  line-height: 1;
  font-style: italic;
  --tt-key: navtitle;
}

article a {
  color: inherit;
  text-decoration: none;
  transition: all .3s ease;
  background-image: linear-gradient(transparent,transparent 47%,var(--color-2) 47%, var(--color-2) 95%, transparent 95%);
  background-size: 1px 200%;
}
article a:hover {
  background-position-y: 25%;
  color: #000;
}

#filters {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
}

article {
  padding: 5%;
}
.lede {
  font-size: 1.1em;
}
.byline {
  grid-area: byline;
  font-style: italic;
  font-variation-settings: "wght" 60, "SERI" 1;
  position: relative;
  color: rgba(0,0,0,.6);
  --tt-key: byline;
  font-size: .9rem;
}
.hed { grid-area: hed; }
.article {
  grid-area: article;
  max-width: 34em;
  margin: auto;
  position: relative;
}
.width-value {
  grid-row-start: 4;
  grid-column-start: 1;
  grid-column-end: 3;
  line-height: 1;
  margin-top: -.5em;
  margin-right: 6vw;
  opacity: .3;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  display: none;
  font-size: 12px;
}
.meta {
  grid-area: meta;
  font-size: 6rem;
  line-height: 1;
  margin: 0 0 2rem 0;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  color: #222;
  --tt-key: meta;
  justify-self: center;
  display: flex;
  align-items: center;
  mix-blend-mode: multiply;
}
.date {
  font-size: 1rem;
  margin: 0 0 0 1em;
  line-height: inherit;
  text-transform: uppercase;
  letter-spacing: .2em;
  opacity: .5;
  transition: opacity .5s;
}
.date:hover {
  opacity: 1;
}
.logo {
  display: inline-block;
}
.logo:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background: var(--color);
  border-radius: 50%;
  z-index: -1;
  transform: scale(8);
}
.logo svg {
  fill: #fff;
  width: 1em;
  height: 1em;
  display: block;
}

h1 {
  font-variation-settings: "wght" 100, "SERI" 1;
  font-style: normal;
  line-height: 1;
  color: var(--color);
  font-size: 4rem;
  margin: 1em 0 .1em;
  --tt-key: h1;
}
.hed {
  font-variation-settings: "wght" 170, "SERI" 1;
  --tt-key: hed;
  font-size: 7.5rem;
  mix-blend-mode: multiply;
  max-width: 14em;
  margin: 0 0 .2em 0;
}

h2 {
  font-variation-settings: "wght" 60, "SERI" 10;
  font-size: 2rem;
  line-height: 1;
  font-style: italic;
  transition: font-variation-settings 1s ease;
  margin: 0;
  --tt-key: h1;
}
h2:hover {
  font-variation-settings: "wght" 180, "SERI" 1;
}

footer {
  display: flex;
  align-items: stretch;
  margin-top: 10vw;
  overflow: hidden;
  padding-top: 1rem;
}

.footer-typetura svg {
  fill: currentColor;
  width: 30%;
  display: block;
  margin: auto;
}

footer a {
  font-variation-settings: "wght" 100, "SERI" 1;
  color: var(--color);
  transition: all .5s ease;
  flex: 1;
  box-sizing: border-box;
  text-decoration: none;
  padding: 5vw 3vw calc(5vw + 1rem);
  transform: translateY(1rem);
}
footer a:hover {
  background-color: var(--color);
  color: var(--bkg);
  transform: none;
  z-index: 1;
}

.footer-nextpart {
  background-color: var(--bkg-alt);
  letter-spacing: .2em;
  text-transform: uppercase;
  position: relative;
  padding-right: 9vw
}
.footer-nextpart svg {
  stroke: var(--bkg-alt);
  stroke-miterlimit: 10;
  stroke-width: 1px;
  position: absolute;
  width: 6vw;
  height: 6vw;
  right: 3vw;
  top: 50%;
  transition: all .5s ease-out;
  transform: translateY(-50%) translateX(-6vw);
  fill: none;
  opacity: 0;
}
.footer-nextpart:hover svg {
  transform: translateY(-50%);
  opacity: 1;
}
.footer-nextpart h1 {
  color: inherit;
  margin: 0;
  --tt-key: nextparth1;
  text-transform: none;
  letter-spacing: 0;
}

.footer-typetura {
  text-align: center;
  font-style: italic;
  max-width: calc(20vw + 1em);
  display: none;
}


/* figures */

figure {
  max-width: 400px;
  margin: 2rem auto;
  padding: 0;
  position: relative;
  text-align: center;
}
.fluidpage,
.fluidtype {
  font-size: 10px;
  width: 50%;
  background-color: var(--bkg-alt);
  padding: .4em;
  height: 140px;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}
.fluidpage {
  animation: fluidpage 10s alternate infinite ease-in-out;
}
.fluidtype {
  animation: fluidtype 10s alternate infinite ease-in-out;
}
.img {
  width: 50%;
  height: 0;
  margin: 0 .3em .3em 0;
  padding: 0 0 50%;
  float: left;
  background-color: var(--color);
}
.word {
  display: inline-block;
  background-color: var(--color);
  width: 4em;
  height: 1em;
}
.word:nth-child(3n-1) {
  width: 1em;
}
.word:nth-child(5n-2) {
  width: 2em;
}
.word:nth-child(7n-4) {
  width: 3em;
}
.word:nth-child(11n-6) {
  width: 6em;
}

.variable-a {
  font-style: italic;
}
figure:hover .variable-a {
  animation: variable-a 5s infinite;
}

figcaption {
  clear: both;
  font-size: .8rem;
  font-style: italic;
  font-variation-settings: "wght" 90, "SERI" 10;
  line-height: 1.2;
  margin: .8em 0 0;
  opacity: .8;
}

.detail {
  position: absolute;
}

.detail.ellipsis {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-2);
  left: -4em;
  transform: translateY(calc(var(--scrolly) * .05px - var(--top) * .05px));
  box-shadow: 0 1.5rem 0 var(--color-2), 0 3rem 0 var(--color-2);
}

.detail.spot {
  width: 4em;
  height: 4em;
  border-radius: 50%;
  right: 0;
  background: var(--bkg-alt);
  z-index: -1;
  transform: scale(5) translateX(10%) translateY(calc(var(--scrolly) * .03px - var(--top) * .03px));
  display: none;
}

/* Breakpoints */

@media (min-width: 260px) {
  .logo:after {
    transform: scale(10) rotate(20deg);
    filter: url(#fluid);
  }
  .safari .logo:after {
    filter: none;
  }
}
@media (max-width: 300px) {
  .date {
    display: none;
  }
}
@media (min-width:700px) {
  body {
    border-left: .5vw solid var(--color-2);
  }
  nav {
    top: 1rem;
    left: calc(.5vw + 1rem);
  }
  .navparts {
    padding-left: calc(20vw + 1em);
  }
  article {
    display: grid;
    padding: 1em;
    grid-template-areas: 
      "meta lede"
      "meta byline"
      "hed hed"
      "hed hed"
      "article article";
    grid-template-columns: 20vw auto;
    grid-template-rows: auto auto 1fr 1fr auto;
  }
  .lede {
    grid-area: lede;
    max-width: 40em;
    --tt-key: lede;
    padding: 6em 4vw 4vw 4vw;
    position: relative;
  }
  .lede:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 4em;
    top: -1em;
    left: 4vw;
    background-color: var(--bkg-alt);
    mix-blend-mode: multiply;
  }
  .lede p:first-child {
    margin-top: 0;
  }
  .bkg {
    background-color: var(--bkg-alt);
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    z-index: -1;

    position: relative;
    display: block;
    top: 0;
    left: 0;
  }
  .bkg:after,
  .footer-nextpart:after {
    content: '';
    width: 2vw;
    height: 2vw;
    background-color: var(--color-2);
    position: absolute;
    bottom: -1vw;
    right: 1vw;
    border-radius: 50%;
    mix-blend-mode: multiply;
  }
  .footer-nextpart:after {
    top: -1vw;
    right: calc(1vw + 1rem);
  }
  .width-value {
    display: block;
    text-align: right;
  }
  .meta {
    color: #777;
    margin: .5em 0 0 0;
    writing-mode: vertical-lr;
    transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.03px));
  }
  .date {
    margin: 1em 0 0;
  }
  .logo {
    position: relative;
  }
  .logo:after {
    transform: rotate(20deg);
  }
  .hed {
    margin: .3em 1em .3em 1rem;
    transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.033px));
  }
  .detail.spot {
    display: block;
  }
  .footer-typetura {
    display: block;
  }
  .footer-nextpart svg {
    stroke-width: .5px;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .byline {
    padding-left: 4vw;
  }
}
@media (min-width: 1000px) {
  article {
    grid-template-areas: 
    "margin meta lede"
    "margin meta byline"
    "margin hed hed"
    "margin hed hed"
    "margin article article";
  grid-template-columns: 20vw 20vw auto;
  grid-template-rows: auto auto 1fr 1fr auto;
  }
  .lede {
    padding: 6em 4vw 0 0;
  }
  .lede:before {
    left: 0;
  }
  .bkg {
    grid-column-start: 2;
    grid-column-end: 4;
  }
  .article {
    margin: 0;
  }
  .width-value {
    text-align: left;
  }
  .meta {
    transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.03px)) translateX(-50%);
    justify-self: left;
  }
  .hed {
    margin: .3em 1em .3em -8vw;
  }
}

/* Keyframes */

@keyframes body {
  0% {
    font-size: 8px;
    line-height: 1.3;
    font-variation-settings: "wght" 80, "SERI" 10;
  }
  20% {
    font-size: 16px;
    line-height: 1.6;
  }
}
@keyframes navtitle {
  0% {
    font-size: 1.1rem;
  }
}
@keyframes lede {
  0% {
    padding-top: 2em;
  }
}
@keyframes byline {
  0% {
    font-size: .6rem;
  }
  20% {
    font-size: .9rem;
  }
}
@keyframes meta {
  0% {
    font-size: 1rem;
    line-height: 1rem;
  }
}
@keyframes h1 {
  0% {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--text);
    font-variation-settings: "wght" 150, "SERI" 6;
  }
  40% {
    color: var(--color);
  }
  70% {
    font-size: 4rem;
  }
}
@keyframes hed {
  0% {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--text);
    font-variation-settings: "wght" 140, "SERI" 5;
  }
  45% {
    font-size: 4rem;
    color: var(--color);
  }
  55% {
    font-size: 4rem;
    font-variation-settings: "wght" 160, "SERI" 1;
  }
}
@keyframes h2 {
  0% {
    font-size: 1.1rem;
    line-height: 1.2;
  }
}
@keyframes nextparth1 {
  0% {
    font-size: 1.4rem;
  }
}

@keyframes fluidpage {
  to {
    width: 30%;
  }
}
@keyframes fluidtype {
  to {
    width: 30%;
    font-size: 6px;
    line-height: 1.5;
  }
}
@keyframes variable-a {
  0%,
  100% {
    font-variation-settings: "wght" 60, "SERI" 1;
  }
  25% {
    font-variation-settings: "wght" 180, "SERI" 1;
  }
  50% {
    font-variation-settings: "wght" 180, "SERI" 10;
  }
  75% {
    font-variation-settings: "wght" 60, "SERI" 10;
  }
}
              
            
!

JS

              
                (function(){

  var momentumRoot;
  var momentumEls;

  // Page and element location and dimentions
  function momentumInit() {
      momentumRoot.setProperty('--viewportwidth',window.innerWidth);
      momentumRoot.setProperty('--viewportheight',window.innerHeight);

      var widthValue = document.getElementById('widthValue');
      widthValue.innerHTML = window.innerWidth + 'px';
      for (i = 0; i < momentumEls.length; i++) {
          var e = momentumEls[i];
          e.style.setProperty('--height',e.offsetHeight);
          e.style.setProperty('--top',e.offsetTop);
      }
  };

  // When the DOM is loaded
  document.addEventListener( 'DOMContentLoaded', function () {
      momentumRoot = document.body.style;
      momentumEls = document.querySelectorAll('.momentumcss');
      filter();

      // Initialize variables
      momentumRoot.setProperty('--scrolly',window.scrollY);

      // Scroll events
      window.addEventListener('scroll',momentumScroll,false);
      function momentumScroll() {
          momentumRoot.setProperty('--scrolly',window.scrollY);
      }

      momentumInit();
  }, false );

  // When the page has fully loaded
  window.onload = function(){
      momentumInit();
  };
  window.addEventListener('resize',momentumInit);
})();


function navtoggle() {
    document.getElementById('nav').classList.toggle('active');
}


function filter() {
    const ua = navigator.userAgent;
    var safari = false;
    console.log(ua);
    if (navigator.userAgent.indexOf("Safari") !== -1) {
        safari = true;
    }
    if (navigator.userAgent.indexOf("Chrome") !== -1) {
        safari = false;
    }
    if (safari) {
        window.onload = function(){
            const style = document.createElement('style');
            style.innerHTML = '*{animation:none}';
            document.head.appendChild(style);
            setTimeout(() => {
              document.head.removeChild(style);
            }, 1);
        };
        document.body.classList.add('safari');
    }
}
              
            
!
999px

Console