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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
Many essential life activities such as shopping, banking, and job searching rely on accessible websites. It’s important that websites are designed and organized to be accessible to all users. This includes visually impaired users who […]
Research shows that web users only read about 20% of the words on a web page. This means every word counts. If your blog articles aren’t engaging enough, readers won’t get the message. So how […]
If you’re planning to launch a new website, you should consider using WordPress. More websites run WordPress than any other content management system (CMS), with more than 60% of the top 100 top companies – […]