Website Design Blog. Evoart

Do you find yourself sick of Arial, Verdana, Georgia and the other limited fonts you can use for actual text (not graphics) on your web pages? Only being able to use about six fonts (all of which are pretty boring) for actual text that can be read by search engines on your websites can be extremely limiting. Fear not my friend! Read on and I’ll show you how you can bring Arial and even Times New Roman to life with some nifty CSS styling.

Before we begin Im not claiming to reveal anything unbelievable in this article. Up until a few months ago I had never though about using CSS to control anything other than the size, colour and font family of my text. Hopefully this might open some peoples eyes a little. This post is aimed at someone who is just starting out on their CSS adventure, but it could also educate more advanced users. Ok, enough with covering my own back. Lets get going!

Using the ‘Letter-Spacing’ property

Now I never knew about this property until recently and now Im a huge fan. From these examples below you can see that you can make headings with default fonts look quite stylish. The examples all use the ‘letter-spacing’ CSS property to space the letters slightly closer together and they’re all in black. Now imagine what you could do with a dash of color in there. Once again the letter spacing CSS property gives us much greater control over our type. We wouldn’t have been able to dream of controlling gaps between letters in the early days. You have however got to be careful here (from an accessibility standpoint) not to space the letters so close that they’re unreadable.

Arial looking pretty hot!

Georgia looking good…

Trebuchet MS looking groovy…

The letter spacing CSS property (once you know about it) looks very simple;

letter-spacing: -2px;

Experiment with the value. It could be -1px or -10px. Don’t forget to try spacing letters further apart too — for example

letter-spacing: 8px;

Background colours and padding

This has to be one of my favourite styles right now and its so easy to do with a little CSS styling. Although completely unrelated to type on the web, Vodafone seem to be using this technique on all their leaflets and printed material lately. Basically we’re going to learn how to get our text looking like the example below. This technique is best used when your really looking to draw attention to a specific area of your copy — a headline, or a featured piece of work perhaps. It also works well when you drop your text over two lines and leave a small gap in between.

Background colour with padding

So how do we do it? Below you can see how;

.boldheadline {
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
background-color: #000;
color: #fff;
letter-spacing: -1px;
line-height: 150%;
font-size: 30px
}

Again everything is self explanatory, but I’ll explain a little anyway. The padding property is set to 8 pixels to give the type some space inside the black background colour and the letter spacing is -1 pixels to close the letters up. Its best to experiment, but the purpose of this article is to show you the level of control you can have over your fonts with a little bit of CSS.

CAPITALS SPACED OUT

As I mentioned before, don’t forget to try spacing letters further apart. From my experience this seems to work best when used in conjunction with captial letters.

Great for optimisation

If you’ve been designing and building sites for long, you’ll know that text for headings, rather than images, are able to give you a huge boost when it comes to optimisation. The fact that CSS gives us the ability to sort of ‘design’ our fonts, means we can make Arial, Verdana and the others look good. And apart from the actual font limitations, (here I mean the fact that we’re limited to about 6 on the web) enable them to hold their own alongside graphics made in Photoshop.

Closing thoughts

I hope this article has been of help to some people. If Im honest once I discovered the letter spacing property I haven’t looked back. I really enjoy getting the most out of my fonts for the web now, and with the ever present trend of big, bold, colourful fonts nows the time to do it! Please feel free to share with me your experiences and tips in the comments below.