Skip to content
Typetura Docs

Typetura.css

Let’s get started with Typetura.css! The most responsive way to style text on your website.
Get started Hire us

Typetura is a CSS library that allows you to create dynamic and responsive type with ease. Far more powerful and dynamic than calc() and clamp(), you can interpolate things like color and weight, scale text with an easing curve, and have more control over where design changes happen. The intuitive syntax allows you to specify specific breakpoints while allowing you to interpolate any property or value.

v4 has numerous changes, including removal of all JavaScript (CSS only), a new license (MIT), and a few changes to the API.

Typetura should be used as progressive enhancement. View browser support.

What is Typetura?

We started this project after running into limitations with clamp(). Typetura is an approach to responsive typography that binds CSS keyframes to widths. This has numerous advantages over previous responsive typography techniques.

  • Interpolation on a curve: clamp() and calc() only interpolate values linearly. While text might scale, the nuances of how it scales can’t be well controlled. Interpolating on a curve is particularly valuable when scaling text on your document’s root, allowing it to get quite small for tiny screens like watches, then scaling it up quickly to a more reasonable size on other screens. Headlines tend to look better on and ease-in-out or ease-in curve, where the hierarchy can get more pronounced as screen real estate becomes available.
  • Defining start and end positions: Online calculators for clamp() are useful because they do the tedious math of breakpoint calculation for you. You don’t need to do this breakpoint calculation with Typetura.css. Set values for --from and --to directly. This also avoids issues of breakpoint drift that clamp() experiences if a user changes their preferred font size in the browser.
  • Interpolate anything: Interpolate color, font weight, unitless line height, and anything else. Use the units and CSS variables you already have in your design system. Unlike calc() and clamp(), you can interpolate anything.
  • Familiar syntax: Typetura uses CSS keyframe animations. If you have ever written a CSS animation, you will feel right at home using Typetura. No math or complex functions, it just works.

The core of this approach to typography led to the creation of the company, Typetura, where we develop typographic tools and create beautiful websites for people.

Next steps