Sometimes all it takes is one character to turn a plain piece of text into a great one. And that one character is the ampersand.
Here in South Africa think of the iconic Mail&Guardian brand, for example. Take away the & and you have nothing special.
Not all ampersands are made equal though. Very often you find a font you like for a project and it’s only later,when you finally need an ampersand, that you discover a character that looks like it fell off a truck on the way to a scrap dealer’s yard.It’s hideous and completely out of proportion with the rest of your chosen font.
In the world of print it’s relatively straight forward to style the ampersand using a different font.
In the world of web type, fortunately, it’s also becoming relatively easy to do the same, so long as you have a great selection of ampersands to choose from, such as these:
Which is where the Open Source Ampersands project comes in handy. As its name suggests Open Source Ampersands is a collection of freely available open source ampersand characters. Each of the ampersands is provided as a single character in a number of different formats and also includes an example of the font in use.
If you know your way around CSS stylesheets then it’s pretty simple to add any of the fonts to your site. If you’re new to CSS and fonts then open the demo file in a text editor, copy the section marked into your own HTML file, and then add <span class=”openamp”>&</span> to each instance of your ampersand. It’s a simple but clever idea.
If you’re interested in learning more about using fonts on your web pages then it’s worth reading some of these: Use the best available ampersand (the article that inspired Open Source Ampersands), CSS @ ten and How to use custom fonts. These are just a few of many sites that will help you on your way to using better fonts on your website.
Do you know of any other great font resources? Email me or post them in the comments and I’ll try and give them some coverage.