10 Examples of Responsive Text Techniques
When designing a responsive website, we often spend most of our time ensuring that items such as 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 found on CodePen 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.
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!
Single Line Text With a Better Vue
There are times when, because you’re a designer, you really want 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
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
The ability to maintain consistent vertical spacing throughout multiple devices is a seriously good 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
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.
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.
Fitting In
While we previously looked at an example that kept text on the same line across screen sizes, this one differs in that 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
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
What if you want to make your text responsive based upon a number of 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, there are a number of different approaches you can take to implementing 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 simply works.
The newer CSS specifications like element queries and custom properties give us an even 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.
The post 10 Examples of Responsive Text Techniques appeared first on Speckyboy Web Design Magazine.