Component styles
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;
}
}
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;
}
}
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.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;
}
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;
}
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
@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;
}
Keyframes always overwrite element styles, even when using an
!important
flag. You can overwrite styles by assigning them new keyframes or removing the 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;
}
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;
}
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.
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.
We are here to help! Get the most out of your typographic components by partnering with us.