Writing Typetura keyframes

Typetura styles are stored in CSS keyframes. Keyframe 0% is equal to a context with of 0px and keyframe 100% is equal to a context width of 1600px. Styles within each keyframe can be written as if you were styling an element.

CSS
@keyframes headline {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 4rem;
    }
}

​Edit on CodePen​

You can add as many keyframes as you want, using any animatable CSS property.

CSS
@keyframes headline {
    0% {
        transform: rotate(2deg);
        font-size: 1rem;
        line-height: 1.1;
        font-weight: 670;
    }
    20% {
        color: #3250a8;
    }
    50% {
        font-weight: 320;
    }
    100% {
        transform: rotate(-5deg);
        color: #1f58ff;
        font-size: 4rem;
        line-height: 1;
        font-weight: 130;
    }
}

​Edit on CodePen​

Applying Typetura keyframes to an element

Now that we have our basic keyframes set up, they need to be attached to an element with the --tt-key property. These will overwrite any other layout styles so you should treat this as progressive enhancement.

CSS
@keyframes headline {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 4rem;
    }
}
​
.headline {
    --tt-key: headline;
    font-size: 2.4rem;
}

​Edit on CodePen​

Changing the maximum width

If 1600px is not the maximum width you want to style for, you can change it with --tt-max. For example, if you want the keyframe 100% to be located at 960px, then write --tt-max: 960; on your context.

CSS
@keyframes headline {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 4rem;
    }
}
​
.headline {
    --tt-key: headline;
    --tt-max: 960;
    font-size: 2.4rem;
}

​Edit on CodePen​

Transition easing

By default, Typetura uses linear easing. This means the transitions are directly proportional to the context changing. However, there are times when you want the transitions to happen slower or faster during portions of the element scaling. Easing functions enable this to happen. Apply custom easing using the --tt-ease property.

These custom easing curves enable you to have more control over how text scales across context changes, and can reduce the number of keyframes you need.

CSS
@keyframes headline {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 4rem;
    }
}
​
.headline {
    --tt-key: headline;
    --tt-ease: cubic-bezier(.5,.15,.5,1);
    font-size: 2.4rem;
}

​Edit on CodePen​

Overwriting styles

Keyframes always overwrite element styles, even when using an !important flag. You can overwrite styles by assigning them new keyframes or removing the keyframes.

Removing Typetura keyframes

If you want to remove keyframes attached to a selector, use --tt-key: none;.

CSS
@keyframes headline {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 4rem;
    }
}
​
.headline {
    --tt-key: headline;
    font-size: 2.4rem;
}
.headline.alt {
    --tt-key: none;
    font-size: 1.4rem;
}

​Edit on CodePen​

Assigning new Typetura keyframes

Point --tt-key to a new set of keyframes you created.

CSS
@keyframes headline {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 4rem;
    }
}
.headline {
    --tt-key: headline;
    font-size: 2.4rem;
}
​
@keyframes headline-alt {
    0% {
        font-size: 0.9rem;
    }
    100% {
        font-size: 2.2rem;
    }
}
.headline.alt {
    --tt-key: headline-alt;
    font-size: 1.2rem;
}

​Edit on CodePen​

Best practices

At this point you know the basics of Typetura. If you want to get deeper into the best practices for applying this technology, go to the link below.

Our Keyframe editor

If you want a way to visualize the styles you are producing, you can check out our keyframe editor. It allows you to quickly and visually build intrinsic typographic systems.

Getting help and support creating new components

We are here to help! Get the most out of your typographic components by partnering with us.

​