A front end training site published a rundown of five CSS properties that help text look better on a web page, covering things like filling letters with an image or gradient, and getting text to sit properly in the middle of a box. CSS is the code that controls how a site looks.
On the face of it, that is a developer's concern, not yours. But there is one thing worth knowing, because it comes up constantly in real projects.
When a business owner wants a headline to look a particular way (letters filled with a photo of the desert, a gradient sweep, something that matches the printed sign out front), the old shortcut was to have a designer make it in Photoshop and drop it in as an image. That works visually and causes three quiet problems. Google reads text, not pictures of text, so the words in that image are invisible for search. Screen readers used by customers with sight difficulties skip it too, unless someone remembers to write a description. And every time you want to change the wording, you are back to the designer instead of editing it yourself.
The properties in this article do the same job with live text. The words stay real words that can be selected, read aloud, indexed and edited in your content manager, while still looking designed.
The other half of the piece deals with vertical alignment, which is the reason text sometimes sits slightly too high or low inside a button or a coloured band. If that has ever bugged you on your own site, it is a small fix, not a rebuild.
A word of caution. Image filled and gradient text is for large headlines only. Used on paragraphs it becomes genuinely hard to read, especially on a phone in bright Arizona sunlight, and contrast gets unpredictable.
What to do: nothing urgent. If any headline on your site is currently a picture of words, put it on the list to be converted to real text next time your developer is in there. Ask whether it can be done with CSS rather than a new graphic.
Reported by:
