Fluid typography and the creation of Typetura
The web is an inherently fluid platform. To design for it effectively, a fluid typographic system is necessary. Over the past decade fluid and responsive layouts have evolved significantly. However, the text that flows through them has not. While images and boxes shrink and expand relative to their context, text occupies a static volume. In his 2015 essay, ‘The Webs Grain’, Frank Chimero refers to this issue as “the primary visual challenge of responsive design”. Fluid typography answers this problem, and typetura answers fluid typography.
The transition from print to digital rocked the design industry. In print, page sizes, paper stock, and printing methods are carefully controlled, and the resulting artifact is shipped to the consumer of that media. In digital, the only thing that is sent to the consumer is a set of instructions that are later assembled by that consumer’s device. Before smartphones, web designers would keep track of popular screen sizes to craft pixel perfect websites to deliver. But this practice was a fool’s errand. Designers needed to ensure designs would show up correctly regardless of screen size, not a specific width. Ethan Marcotte presented a better vision for the web with responsive web design. This vision was of a single web, a web that adapted to every device that touched it.
Viewport units and the CSS
calc() function brought new opportunities. Mike Riethmuller developed a fluid typography formula combining these features, which Tim Brown later dubbed CSS Locks. This technique is more performant and gave a far more practical option for implementing fluid typography. Sass plugins helped abstract the complicated mathematics behind it, as I demonstrated in the Sass Modular Scale plugin. However, with all its advantages, CSS Locks hasn’t gone without criticism. Lea Verou noted that new CSS features would better serve this technique. And, In a new-ish problem, it also lacks the ability to interpolate variable font settings.
New fonts, new opportunities
Variable fonts were announced in In 2016 by John Hudson. Variable fonts contain information that allow them to dynamically change their style and appearance. This means one font file can contain every weight and every variation. The implication for fluid typesetting is that variable fonts can interpolate among these styles. This means that, as a website scales, the weight, optical size, and width of the letterforms can theoretically scale with it. Bringing this theory to practical usage, Andrew Johnson wrote a wonderful article on what font interpolation is and how it can be used, and Mandy Michael has numerous examples of how variable fonts add life to text.
Combining variable fonts and fluid typography is important. Different characteristics are brought out of type at different sizes. Finer, more delicate features can exist at large sizes, while blunt features and more open forms are easier to read at small sizes. This is referred to as optical sizing and has as long a history as type design itself. Metal type was only usable at the size it was cast, so optical size variations were built into the font. Until variable fonts, digital fonts lacked that control without loading an entirely different font.
Typetura was created to make fluid typography mainstream. To do this there were two problems to solve. First, develop an implementation that is feature rich and easy to implement with CSS. Second, create a design tool that designers can use to illustrate how they want fluid typography to look.
--font-size with a list of keyframe and value pairs. These keyframe and value pairs are rendered into the
CSS already has keyframes. Mapping them to something other than time was the trick. Combining a browser width value and animation delay, Typetura now works with any property on any selector. The new Typetura also has the added benefit of working with values other than browser width such as scroll depth, cursor position, and device orientation. Entire layouts can flow through keyframes as opposed to being divided into breakpoints.
This CSS is the cornerstone of Typetura and keyframe-based fluid design:
animation:var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused;
New ideas are worth little without effective ways to communicate their benefits. Design software is constructed around fixed art boards, but there needs to be a way for designers to communicate how designs transition between sizes. Typetura is not just a technology, but a tool. Typetura is a tool that enables designers to work with a fluid canvas. With a patent-pending interface, designers can set type at any size. These transitions between sizes can be adjusted and communicated to development teams without the need to write code. If you do need the code, the CSS is there for you to use.