Is There A Proper Way To Make Responsive Text?

I've oftentimes had designers give me responsive designs where the wording of an element changes based on the size of the screen. Desktop: Read more Mobile: Read Desktop: Download

Solution 1:

You could use media queries, pseudo classes and some ingenuity for this:

a[data-mobiletext] {
    background-color: #FC0;
}
@media screen and (max-width: 700px) {
    a[data-mobiletext] {
        background-color: #CF0;
    }
    a[data-mobiletext]span {
        display: none;
    }
    a[data-mobiletext]:after {
        content: attr(data-mobiletext);
    }
}

<ahref="/"data-mobiletext="Read"><span>Read more</span></a><ahref="/"data-mobiletext="Export"><span>Download PDF</span></a><ahref="/"data-mobiletext="Tap here"><span>Click here</span></a>

Click "Full Page" to view Desktop version.

Solution 2:

There are a couple of approaches I've used where clients have made similar requests (and not been talked out of it*):

1) Use Javascript to change the text based on screen width / device detection methods;

2) Set the default text as your preferred choice, and wrap it in a span or similar, use the text that you think is best on all devices (best for SEO / content / screen readers depending on priority) then use pseudo selectors e.g. :before with the content: '' property to set alternative text based on media queries. Hiding the default span/element as appropriate.

(*) I would say consider your content and see if you can find a universal label for these items is probably better practice though.