Using Typetura
Typetura packages
Creating with Typetura
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!
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!
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!
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!
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!
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!
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!
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.
​
Last modified 1yr ago