Responsive typography has grown increasingly important as the variability in screen sizes increases. But traditional responsive design techniques have their limits, leading more people to implement fluid typography on their websites.
In this post, we examine fluid typography, how it works, and how it’s being implemented in WordPress.
What is Fluid Typography?
Fluid typography is a responsive typography technique where the text scales automatically with the screen size. As the screen size increases, the typographic values such as font size, line height, and letter spacing increase. Similarly, the values decrease when the screen size gets smaller.
Fluid Typography vs. Traditional Responsive Typography
Traditionally designers utilize breakpoints to determine font size. For example, a website might utilize three breakpoints: mobile, tablet, and desktop. Breakpoints aren’t determined by the device type but instead by the browser width.
The problem with this approach is that screen sizes vary widely across devices. So screen sizes in between or close to the breakpoints can often present challenges in design. For example, a wide tablet screen that’s almost desktop width could end up with typography that looks too small.
To address these challenges, designers could implement more breakpoints, but that just leads to more complex code that is difficult to maintain.
How Fluid Typography Works
Fluid typography starts with a minimum value and increases it as the screen width gets larger, until it reaches a set maximum value. Think of the values like the speed limits on a freeway. You have to maintain a minimum speed of 45 mph. The upper limit is 65 mph, and you pick your speed based on the flow of traffic.
CSS Clamp Function
Fluid typography utilizes the CSS clamp function to achieve auto-scaling. The clamp function needs three values: a minimum, a preferred, and a maximum. The preferred value is a calculated number. The function decides what the preferred value needs to be relative to the screen size while keeping it between the minimum and maximum.
A clamp statement looks like this:
clamp(Minimum, Preferred, Maximum);
Let’s look at how that works with font size:
clamp(1.5rem, 2vw + 1rem, 2.25rem);
Notice we’re using rem values for the minimum and maximum values. Rem values are more accessible. If someone zooms their browser to increase text size, the fluid typography should adjust accordingly and better than if you had specified the values in pixels.
The preferred value is a calculation. The “vw” stands for viewport, so 2vw is 2% of the viewport width.
With a root font size of 16px and a viewport width of 800px, our preferred text size is 32 pixels or 2 rem.
800px x .02 = 16 pixels (or 1 rem)
1 rem + 1 rem = 2 rem (or 32 pixels)
Don’t worry. You don’t have to do the math. The CSS function takes care of it for you.
You also don’t have to break out your algebra skills when writing your stylesheets. Consider using a tool like the Modern fluid typography editor to build the clamp statement for you.
The chart in the tool is a great visual for seeing how the preferred value changes between the minimum and maximum values.
Considerations When Using Fluid Typography
Fluid typography is not without flaws. Some designers claim it’s more trouble than it’s worth to set up since you can achieve similar results with more traditional methods. Keep these considerations in mind when deciding if and how to use it.
When to Use Fluid Typography
Fluid typography is excellent for headings and display text. The giant text treatments that are as much a design element as they are copy, are the perfect use case for fluid typography. You want the size and visual impact of the text to match the size of the screen.
When Not to Use Fluid Typography
On the flip side, fluid typography doesn’t work as well if the difference between the minimum and maximum values isn’t that large. Text elements like body copy, tags, author names, and post dates are probably pretty standard across screen sizes. You can handle them with traditional CSS instead of implementing the clamp function.
Always Set a Fallback Value
Remember, any time you use fluid typography, always include a fallback value in case the browser doesn’t support the clamp function. All modern browsers support the clamp function, but a fallback value gives extra security in case there’s still a stubborn Internet Explorer holdout.
Fluid Typography in WordPress
Fluid typography support was added in Gutenberg 13.8 and was included in WordPress 6.1. The fluid typography feature unlocks the ability for theme authors to define scalable font sizes in their theme.json file.
Implementing fluid typography on WordPress is easiest at the theme level. If you build your own theme, download the Gutenberg plugin and start testing. If creating your own theme or writing a fluid typography stylesheet is a bit beyond your technical skills, don’t worry. Just as more themes are embracing blocks and Full Site Editing, you can expect fluid typography to be a part of new theme releases.
Build and Test New Sites and Typography Styles in WordPress
Web designers and developers need a space to test new ideas and designs, like fluid typography. At Pressable, we understand. That’s why we offer all of our clients staging sites. Create as many as you need so you can test out building a new theme or try the latest beta features in WordPress.
Getting started is simple. Just pick a managed WordPress hosting plan, and then you’ll have a site within a couple of clicks.
Nox Dineen-Porter
Nox possesses a unique blend of industry and academic expertise, seamlessly integrating her knowledge of communication, software development, and research. Her journey with WordPress began in 2003, first as an avid blogger and later as a skilled software developer. Her fascination with WordPress led her to join the Pressable support team, where she effectively combines her passion for technology with her love of problem-solving and her deep understanding of user behavior. As a PhD candidate, Nox is poised to make a significant impact on the field, bringing together her expertise in research, communications, and software development to provide context and clarity about health science and devices to the public. When she's not at her computer she enjoys hiking, running, yoga, and street photography.
