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.