Component styles

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
1
@keyframes headline {
2
    0% {
3
        font-size: 1rem;
4
    }
5
    100% {
6
        font-size: 4rem;
7
    }
8
}
Copied!
​Edit on CodePen​
You can add as many keyframes as you want, using any animatable CSS property.
CSS
1
@keyframes headline {
2
    0% {
3
        transform: rotate(2deg);
4
        font-size: 1rem;
5
        line-height: 1.1;
6
        font-weight: 670;
7
    }
8
    20% {
9
        color: #3250a8;
10
    }
11
    50% {
12
        font-weight: 320;
13
    }
14
    100% {
15
        transform: rotate(-5deg);
16
        color: #1f58ff;
17
        font-size: 4rem;
18
        line-height: 1;
19
        font-weight: 130;
20
    }
21
}
Copied!
​Edit on CodePen​
Add as many keyframes as you wish. It is recommended that you use both a 0% and 100% keyframe. If you do not use 0% and 100% keyframes, those will default to your element styles.
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
1
@keyframes headline {
2
    0% {
3
        font-size: 1rem;
4
    }
5
    100% {
6
        font-size: 4rem;
7
    }
8
}
9
​
10
.headline {
11
    --tt-key: headline;
12
    font-size: 2.4rem;
13
}
Copied!
​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
1
@keyframes headline {
2
    0% {
3
        font-size: 1rem;
4
    }
5
    100% {
6
        font-size: 4rem;
7
    }
8
}
9
​
10
.headline {
11
    --tt-key: headline;
12
    --tt-max: 960;
13
    font-size: 2.4rem;
14
}
Copied!
​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.
Linear interpolation vs a custom easing curve of cubic-bezier(.5,.15,.5,1)
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
1
@keyframes headline {
2
    0% {
3
        font-size: 1rem;
4
    }
5
    100% {
6
        font-size: 4rem;
7
    }
8
}
9
​
10
.headline {
11
    --tt-key: headline;
12
    --tt-ease: cubic-bezier(.5,.15,.5,1);
13
    font-size: 2.4rem;
14
}
Copied!
​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
1
@keyframes headline {
2
    0% {
3
        font-size: 1rem;
4
    }
5
    100% {
6
        font-size: 4rem;
7
    }
8
}
9
​
10
.headline {
11
    --tt-key: headline;
12
    font-size: 2.4rem;
13
}
14
.headline.alt {
15
    --tt-key: none;
16
    font-size: 1.4rem;
17
}
Copied!
​Edit on CodePen​
Assigning new Typetura keyframes
Point --tt-key to a new set of keyframes you created.
CSS
1
@keyframes headline {
2
    0% {
3
        font-size: 1rem;
4
    }
5
    100% {
6
        font-size: 4rem;
7
    }
8
}
9
.headline {
10
    --tt-key: headline;
11
    font-size: 2.4rem;
12
}
13
​
14
@keyframes headline-alt {
15
    0% {
16
        font-size: 0.9rem;
17
    }
18
    100% {
19
        font-size: 2.2rem;
20
    }
21
}
22
.headline.alt {
23
    --tt-key: headline-alt;
24
    font-size: 1.2rem;
25
}
Copied!
​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.
Best practices
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.
Using our keyframe editor
Getting help and support creating new components
We are here to help! Get the most out of your typographic components by partnering with us.
Support and services
​

Creating with Typetura - Previous

Defining contexts

Next - Creating with Typetura

Best practices

Last modified 2yr ago

Copy link

Contents

Writing Typetura keyframes

Applying Typetura keyframes to an element

Changing the maximum width

Transition easing

Overwriting styles

Removing Typetura keyframes

Assigning new Typetura keyframes

Best practices

Our Keyframe editor

Getting help and support creating new components