Ten years ago this month, Web Dev Notes published Stewart Rosenberger’s “Dynamic Text Replacement.” Stewart lamented text styling as a “dull headache of web design” with “only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML.” To help ease these pains, Stewart presented a technique for styling typography by dynamically replacing text with an image.
I began working on the web five years after Stewart’s article was published, right around the time when web fonts were gaining popularity. It was an exciting time, with a slew of new typefaces, foundries, and new techniques for styling text with CSS3 cropping up frequently. It seemed—for a moment—that we could finally “control” typography in a way that we never could before.
I was recently looking at the state of default system fonts and realized that we’re never going to have as much control over typography as we want. But that’s ok.
Instead, I’ve been seeing more nuanced discussions about typography, focused on striking a balance between having beautiful typography without taking a huge performance hit. I appreciate that as an industry we’re dedicated to creating the best experiences possible, regardless of device or connection speed.
It’s easy to get carried away with web fonts, and slow our sites down significantly as a result. While we may no longer need to use dynamic image replacement, the deliberate approach Stewart advocated is worth revisiting:
“Sticking with the traditional typefaces is smart for body text, but when it comes to our headings—short, attention-grabbing blocks of text—it would be nice to have some choice in the matter.”
In another five years, we’ll have completely different techniques and a host of other considerations. If we are thoughtful and deliberate with our (type) decisions, we’ll be able to evolve much more easily.
The trick of replacing text with images is still popular on some major websites that always want their brand to be shown in a very particular way. I’m reminded of the Apple’s website which thankfully uses alt tags, but still relies on images for almost all text. I don’t think some companies like Apple are comfortable with the idea that someone with an obscure or old browser will visit the website and see fallback typefaces that don’t match the brand perfectly. They need to realise that part of the magic of the web is that not everything needs to be perfect and that it is up to the user how they want to define their experience. If I want to use Opera Mini then I have my reasons and I don’t need things to look just like they would if I used the newest version of Firefox.
I remember very clearly reading the original article all those years ago. Thank you for the trip down memory lane and for a very thoughtful follow up.
Thank you so much for this detailed and extremely helpful article.