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.