When designing a responsive website, we often spend most of our time ensuring that layouts and images work properly on smaller screens. But typography really should be at the top of our minds, as well. Ensuring that text both looks great and is optimized for readability on any device is a key component to great design.
While CSS media queries can help us adjust text to the needs of mobile devices, there are other exciting ways that developers are taking up this challenge. Let’s have a look through some of the more interesting techniques for utilizing responsive text.
Responsive LESS Mixin
If you’re using the LESS CSS preprocessor, this mixin will automatically generate code that will nicely scale down text-based on-screen resolution.
See the Pen Responsive Text Mixin by Jonathan Davis
Driving that VW
I’ve been using CSS for quite awhile, but I never knew about the units for sizing elements according to their viewport. In this example, the vw unit is used to automatically size text according to the viewport’s width. And it’s actually supported (at least partially), all the way back to IE 11. Color me surprised!
See the Pen A responsive text by Hakan Kösekadam
Single Line Text With a Better Vue
There are times when, because you’re a designer, you really want the text to stay on a single line – regardless of screen size. You’ll find several options for this type of functionality, including this example that uses Vue.js.
See the Pen vue-responsive-text by Joshua Kleckner
Responsive With Flair
Here’s an example that isn’t so much about the size of the text but rather rearranging it in a fun and attractive way. Changing the viewport size sets off an animation as the text conforms to the new container size.
See the Pen Responsive text animations by Blake Bowen
Staying Within the Lines
The ability to maintain consistent vertical spacing throughout multiple devices is an excellent thing for UX. The example below uses a SASS mixin to do just that, with a notepaper background to prove the point.
See the Pen Responsive Text by David Conner
Controlling Your Properties
CSS custom properties (aka “variables”) are the latest “must-have” feature that is making its way into our development toolbox. They work similar to a variable in PHP or JavaScript, as they can be called anytime and save you from a ton of repetition. Here’s an example that uses variables, along with the CSS calc function to automatically resize text.
See the Pen Responsive fonts with CSS Variables by Dannie Vinther
Responsive Text Slider
A text-based slider is so nice because it’s an incredibly lightweight way to call attention to content. This responsive example uses pure CSS along with Bootstrap to create something attractive and functional.
See the Pen Responsive text slider with Bootstrap by Priscila Cunha
Fitting In
While we previously looked at an example that kept text on the same line across screen sizes, this one differs because it will move items to a new line when necessary. However, it will still ensure that text maintains a consistent size. So it’s a bit of the best of both worlds.
See the Pen Responsive Text (Auto-scale text) by Emil Devantie Brockdorff
Smooth and Sassy
We’ve already looked at a LESS mixin, so we have to give Sass some love as well. This one provides a very smooth transition in text size as the viewport changes.
See the Pen Responsive Text Mixin by mike
Character Counts
What if you want to make your text responsive based upon several characters in a line? Here’s an example that uses CSS element queries to make it happen. This provides a nice intro to the power of an up-and-coming feature in CSS.
See the Pen Responsive Text Length by Tommy Hodgins
Taking Better Control of Text
As we’ve found, you can take several different approaches to implement responsive text into your design. What’s nice is that so many methods are essentially automatic – meaning that you don’t have to worry about making your own calculations for smaller screens. It saves time and works.
The newer CSS specifications like element queries and custom properties give us finer control over how our text and design elements behave. Our text is becoming the benefactor of these advancements and will result in a more readable mobile web.
Related Topics
Top