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	The keyframes name (string)	no	none
--tt-max	Pixel width at which the animation ends (unitless number)	yes	1600
--tt-ease	Animation easing function	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.

Defining contextsComponent styles