How Typetura works

Typetura binds an element context to a location along a CSS keyframe animation. Typetura requires a small amount of JavaScript to identify contexts, and that information is then passed to CSS via a custom property to be rendered by Typetura’s CSS.

The JavaScript part

Typetura’s JavaScript identifies contexts. These contexts can be configured in various ways to target elements. The width of each of these elements is identified, and then added to the element as a CSS custom property. For example, if the width of a targeted element is 533px, then it will have the context of --tt-bind: 533. While Typetura identifies element width, you can pass values from anything into --tt-bind to manipulate Typetura like viewer distance, ambient light, cursor position, etc.

The CSS part

This property that the JavaScript has assigned doesn’t make things happen. To bring CSS keyframes together with these contexts an animation property is needed. The Typetura animation property looks like this:

CSS

animation:
    var(--tt-key)
    1s
    var(--tt-ease)
    1
    calc(-1s * var(--tt-bind) / var(--tt-max))
    both
    paused;

This property takes your keyframes, and associates them with the element context. The animation is paused at a point on the animation timeline defined by the context.

Leveraging the native CSS animation API provides the power Typetura needs to transform your typography, or any other CSS property, across contexts you define. There is no longer a need for breakpoints, complex CSS locks math, or numerous styles for different components. Instead all this information is held inside your keyframes, and adapts to your contexts.

pageCreating your own typographic system