Elevating Products & Processes with Fluid Type Systems

Typography is a small but mighty beast to conquer in a website project. Compared to the eye-catching colors and dynamic visuals on a website, typography can seem like a negligible part of the end product. Arguably the opposite is true, however. 

For your audience and users, typography does the heavy lifting of communicating your message and value. Internally, crafting and implementing typography can be a time-consuming and irksome process. Maybe most importantly, text is prone to accessibility issues if you’re not careful and thorough.

Getting your typography right is essential to your website. But getting it right while saving time and budget (as we try to do at Proven)? To my knowledge, that didn’t seem possible.

That is, until I discovered Fluid Type Systems. 

What is a Fluid Type System?

The Fluid Type System is an approach to typography that applies three concepts: rems, type scales, and clamping. Individually, each of these are powerful in their own right. Working together, however, they create something much greater than the sum of its parts.

Rems

Rems are an alternative to pixels in terms of sizing text on web pages. Visually, you may not notice a difference when using rems or pixels. But in the backend, rems turn your static text into flexible elements which can now resize based on browser settings and user preferences.

Type Scales

Inspired by musical scales, type scales are mathematical ratios that are proven to be pleasing to the eye. Rather than choosing arbitrary values for every text style, you select a scale that works for the product you’re creating. The sizes generated are distinct, balanced, and can be customized to any product or website context.

Clamping

In traditional web design, we would define font sizes for each breakpoint we designed for. This led to some edge cases displaying fonts a little too large or small. Clamping allows you to instead set a maximum and minimum font size for a given text style. Between those limits, the font will resize in proportion to the width of the device size, creating a more dynamic display that suits all breakpoints.

The Benefits of the Fluid Type System

When you combine all three concepts together — rems, type scales, and clamping — magic happens. Processes simplify, timelines shorten, and quality increases.

Faster Design

By using type scales, designers no longer spend hours agonizing over the font sizes they use. Should the H1 be larger or smaller? What size should it be on mobile? What about the breakpoints in between? With a Fluid Type System, these questions are either easier to answer or are no longer relevant.

Faster Development

Developer handover is now systematized and simplified when it comes to typography. All font-size values are guaranteed to be delivered for implementation, and using clamping reduces the number of lines of code necessary to create a fully responsive site.

Accessibility

Thinking and implementing in rems instead of pixels ensures that user preferences are respected and reflected on our websites, baking accessibility best practices into our processes and products. Users with visual impairments can customize their browsers to display fonts at larger sizes for easier viewing.

Responsive

Designing for multiple breakpoints is time consuming. It can extend timelines or, at a higher risk, be left out of the design process all together. Clamping completely removes the complexity and time sink of responsive design in regards to typography, allowing timelines to shorten and designers to focus their attention on other visual elements.

Visual Impact

Rather than sacrificing quality for speed of development, the end product is elevated with a visual practice that has tried-and-true results. Your website typography looks great not on just one or two breakpoints and device sizes, but all of them.

Better Products, Faster Execution

Here at Proven, we sweat the details. We analyze our processes, optimize for efficiencies, and do our best to make every moment count. We are always on the lookout for ways to improve quality and efficacy, and Fluid Type Systems are a true sweet spot in the world of web design. There are no downsides, and everyone wins: designers and developers, internal teams and client stakeholders. 

By taking three concepts and putting them into practice, you can reduce costs, shorten timelines, and still produce products of the highest quality and caliber.