CSS Text-Transform

I’ve finally encountered a situation where the CSS text-transform property is of some value.

The footer on this blog contains a link back to the main blog page, and the text in that link is displayed in the Caesar Dressing font from Google Fonts via the WP Google Fonts WordPress plugin.

As you can see, the Caesar Dressing font renders all letters in the blog title in capitals, except for the letter “i”. That’s 18 upper-case letters, and 1 lower-case letter alone and orphaned in the word “public”. (Or rather, “PUBLiC”)

screenshot of text with Caesar Dressing font (with ugly lowercase 'i')

One solution might be to change the blog title in the dashboard to all-caps, but this might look strange on the search engine results.

My preferred solution is to change the blog title via the text-transform property in CSS. After setting the value to uppercase, this is the result:

screenshot of text with Caesar Dressing font (with uppercase 'i' after CSS text-transform)

Much better.

This entry was posted in HTML & CSS, WordPress, WordPress - Installation. Bookmark the permalink.