Creating your own typographic system
Typetura gives you control over your text styling without any breakpoints. It does this by storing information about how text styles should respond to their layout context in CSS Keyframes. In this section of the documentation we will be focusing on both context and styles, and how they are used in unison to create robust intrinsic typographic systems.
Before diving in, there are a few CSS custom properties we will be using. These properties pass information into the core Typetura property, connecting everything to make it all work.
Property
Accepted values
Inherits
Default value
--tt-key
no
none
--tt-max
Pixel width at which the animation ends
(unitless number)
yes
1600
--tt-ease
yes
linear
--tt-bind
Position of the animation
(unitless number)
yes
Auto-generated
This table will start to make more sense as you use Typetura. You can come back to it as a reference point as you encounter these properties elsewhere in the documentation.
Last modified 1yr ago
Copy link