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 by Jonathan Davis
If you’re using the LESS CSS preprocessor, this mixin will automatically generate code that will nicely scale down text-based on-screen resolution.
Driving that VW by Hakan Kösekadam
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!
Single Line Text With a Better Vue by Joshua Kleckner
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.
Responsive With Flair by Blake Bowen
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.
Staying Within the Lines by David Conner
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.
Controlling Your Properties by Dannie Vinther
calc function to automatically resize text.
Responsive Text Slider by Priscila Cunha
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.
Fitting In by Emil Devantie Brockdorff
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.
Smooth and Sassy by Mike
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.
Character Counts by Tommy Hodgins
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.
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.
- Set Your Text in Motion with These Dazzling Effects
- 10 Code Snippets for Creating Stunning Text Masking Effects
- 8 Fantastic Examples of Variable Fonts in Action
- 10 Free CSS Snippets for Creating Responsive Pricing Tables
- 10 Popular Web Typography Frameworks & Libraries
- 10 Stunning Examples of Text Distortion Effects in Web Design
- Optimizing Typography in Responsive Web Design
- 8 CSS Snippets for Creating Unique Horizontal Rules & Dividers