adobe stock icon Download 10 Free Photos & Assets From Adobe Stock Download Now

10 CSS Code Snippets That Demonstrate Responsive Text Techniques

on CSS & UI Design

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 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.