Digital marketing consultant

&

Writer

Testimonials • Results • Blog • Now • Hire me My book

Freelance

The right way to capitalise text with CSS

November 13, 2019

If you’ve ever sent a message with WhatsApp, MSN messenger, SMS, or any other digital medium, you’ll know THAT ALL CAPS MEANS YOU’RE SHOUTING!!!

On social media it’s a real quick way to look like an aggressive, unhinged idiot.

But in certain places, caps can look good.

Places like signposts:

Or in calls to action:

Or even to accentuate sections of copy:

Used sparingly and implemented properly, caps can be effective.

How to transform text in CSS

Here’s the thing though: it’s not just a case of hitting Caps Lock and typing away.

If you do that, your copy will get pulled through to Google like this:

It looks like your shouting, it looks unprofessional, and it’s easy to avoid.

All you need to do is set a simple CSS rule for any text you want to appear capitalised:

style=”text-transform:uppercase”

This tells a browser to render the text in upper case, while it remains lower case in the code. The code for the section of my site in the image above looks like this, for example:

Caps for the human reader, no caps for the search engines.

If you’re wondering whether capital letters affect SEO, the answer is no. But they do have a subtle impact on the tone of voice on your website.

Within specific stylistic parameters, they work.

In meta data, or used indiscriminately, it just looks like you’re shouting.