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.

Responsive design works for layouts through percentages and media queries. However, to Chimero’s point, they don’t solve the typographic needs of a fluid medium. Images and boxes fluidly grow and collapse to fit the context. In his 2012 post ‘Molten leading (or, fluid line-height)’, Tim Brown proposed a solution. Brown’s solution involves scaling text and leading fluidly as a block of text changes in size. A few months later, Trent Walton expressed similar ideas, coining the term ‘fluid type’ in his post of the same name. The need for fluid typography was apparent. Ways to implement it started being developed initially in JavaScript: Mat Marquis released Molten Leading and Dave Rupert released FitText. While FitText caught on, these tools didn’t solve the problem of fluid typesetting at scale. They lack the ability to style within CSS and are limited to portions of a page. So designers heald off on implementing fluid type on their websites.

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.

Creating Typetura

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.

To ensure the implementation was easy to use and understand, Typetura needed a simple, declarative syntax in vanilla CSS. This means no complicated math or Sass tricks. In early versions of Typetura, CSS custom properties were paired with a JavaScript interpreter. The JavaScript interpreter would look for a property like --font-size with a list of keyframe and value pairs. These keyframe and value pairs are rendered into the font-size property. While the early syntax was easy to author it was limited in ability. The JavaScript parser had to look for specific properties on specific elements. This means anything outside the scope of the parser would be ignored. Typetura needed to be more flexible than it was.

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;
This single line of CSS allows Typetura to apply the correct keyframe settings at a specific place. All the JavaScript does is write the width as a CSS variable and package the static CSS assets.

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.