Introduction to Typetura
Typetura is an intrinsic typography technology that makes breakpoints obsolete. It enables you to design with more flexibility, while dramatically reducing code.
Typetura is different from other typesetting methods. Instead of creating a ruleset for every new space where type exists in your layout, Typetura measures and understands those different spaces, and ensures your type adapts perfectly every time. This reduces your code by up to 90%, saving you time designing and developing. For example, if your website is using Typetura, your hero, article links, and trending articles, will use a single headline style that adapts to each of these areas in your layout.
Feature | Typetura | |||
Responsive to viewport | ✅ | ✅ | ✅ | ✅ |
Fluidly responsive | ✅ | ✅ | ✅ | 🚫 |
Responsive to elements | ✅ | ✅ | 🚫 ¹ | 🚫 ¹ |
Authoring in CSS | ✅ | 🚫 | ✅ | ✅ |
Interpolation easing | ✅ | 🚫 | 🚫 | 🚫 |
Adjust variable fonts | ✅ | *️⃣ ² | 🚫 | ✅ |
Works with any unit | ✅ | 🚫 | 🚫 | ✅ |
Respects browser font size adjustment (for accessibility) | ✅ | *️⃣ ³ | ⚠️ ⁴ | ✅ |
Requires JS | Yes ⁵ | Yes | No | No |
¹ This will be supported with the introduction of element queries and corresponding units.
² Textblock supports weight variations.
³ Textblock supports this, FlowType does not.
⁴ Shifts can occur that misalign the interpolation with breakpoints.
⁵ This JS is similar to a CSS feature polyfill. Just 2.82 KB before gzip and 1.47 KB after gzip for version 2.0.0.
Typography is a huge part of your projects. It changes for every device and layout you design, creating lots of extra work that takes away from your time art directing posts, designing landing pages, and creating design systems. Our typographic packages provide simple text components that adapt to your project needs, so you can turn jobs around quickly and efficiently.
Typetura brings the power of intrinsic web design to the typography on your website. This enables your text styles to look better in more places, reducing your typographic styles by up to 90% and saving your teams 20% of their day. Now you can spend more time developing your product and flexing your design muscles, and less time worrying about styling.
