Fluid typesetting solutions have been trending towards bringing keyframe functionality to CSS. Other fluid typesetting techniques, like CSS Locks and previous incarnations of Typetura.js, effectively function as keyframes for width. Mina Markham discusses this on Shop Talk Show “Here’s how the design lives in this one moment, and here’s how it lives in this particular moment, and you have got to figure out what happens in between the two”. Typetura.js allows you to control exactly how designs change from moment to moment through CSS keyframes. This means more control over typography, or any transitionable CSS property.

Typetura.js does this with this line of CSS, allowing animations to be remapped to values other than time.

Typetura.js binds this animation to viewport width by default, but it can be bound to element width, cursor position, scroll depth, device orientation, ambient volume, or any value of your choosing by changing the `--tt-bind` variable. An upper limit can be defined with `--tt-max`. Building on this you can easily create typographic systems that respond fluidly to not just to width, but any environment variable.

Simply powerful

Typetura can do many things, but that is because the CSS it’s built on can do many things. Using Typetura is straightforward.

After including Typetura.js in your project, Typetura starts with fallback CSS. These should be your large screen styles.

h1 {
  font-size: 5rem;
}

Next, create keyframes and associate them with your element.

h1 {
  font-size: 5rem;
  --tt-key: h1;
}
@keyframes h1 {
  0% {
    font-size: 1rem;
  }
}

With those styles in place, you have the beginnings of a fluid type system. You can build on top of this in any number of ways using the custom properties within Typetura.

Typetura.js keyframes range from 0px through 1600px by default. The 100% keyframe is set at a width of 1600px, but this can be adjusted by changing the --tt-max property to a new limit. This limit must be unitless, as does any javascript-driven value. For example, if you want the last keyframe to fall on 1000px you write --tt-max: 1000. This value is inherited by all child elements.

You can modify the progression of changes with Typetura using the --tt-ease property. If you wish to make text larger more quickly at smaller screen sizes, then you can add --tt-ease: ease-out to that element. This is functionally the same as the animation timing function, aside from the inheritance behavior.

A word on browser support and performance: Typetura builds on principles of progressive enhancement. If your browser doesn’t support Typetura, the fallback is already baked into your code as the final keyframe. As of early 2019, Typetura.js is supported in all major browsers except for Edge. Microsoft will likely ship a new version of Edge that fully supports Typetura.js by the end of 2019.

Within supportive browsers, Safari currently presents two issues. In the first, em and ex units self compound in Safari animations. Until that bug is fixed, avoid using those units. In the second, pure CSS Typetura solutions will encounter a bug where rem units are calculated incorrectly on initial load, but Typetura.js delays the render of the animation until load to prevent this bug.

Typetura performs as well as static typography. This is because the animations that drive it are paused. Once rendered, there are no more repaints or recalculations.

Beyond fluid type

Combining the technical details with the earlier discussed principles, you can see that Typetura’s two core concepts are keyframes and binding. These concepts don’t need to be for typography or bound to viewport width. Instead, try using Typetura.js for color, shape, and size. Try using Typetura’s fluid keyframes instead of media queries for breakpoints. This will result in your website flowing from one point to another, even if you decide to use fixed values. Keyframes can also transition between different types of units, like pixels and percents giving you the benefits of pixel perfection that can transition to percentage based flexibility. Your designs no longer need to snap to each breakpoint; they can now flow between keyframes.

Keyframe animation is about interpolation, and Typetura.js gives you unprecedented control over that interpolation. Using the Typetura.js bind variable, the possibilities open up: bind an animation to events on the page like a progress bar; use cursor position or scroll depth to make elements on the page react to your actions. Or, you can just set the value yourself to blend a property like mixing a color. Fluid typesetting is one use case, but that’s just the tip of the iceberg.