The ampersand, being an abbreviation for “and”, is not a really commonly-featured character. Featured meaning it doesn’t get much attention so far as fonts and display go.
But there has been a recent rise in tribute to the humble & on the web.
Use the Best Available Ampersand
It all started with Dan’s latest article, about using the best-looking ampersand you can get in headers and page titles. A suggestion is put forth to wrap ampersands in a <span> tag with a class of “amp”, and style that, to get the ampersands to have a unique appearance and stand out from surrounding text. Finally, some charts are displayed comparing the appearance of ampersands from different fonts on Windows and Mac operating systems. Some are pretty regular, and some look exotic
In the comments, Jeremy Keith suggests that an <abbr> tag could be used instead of the <span>, which I like as it holds more meaning than the generic <span> tag.
The ampersands of Linux
Mark points out the absence of Linux fonts in Dan’s post, and provides his own chart of common Linux fonts. These ampersands tend to be normal-looking, and not of the fancy variety.
Ampersands With Attitude
With great timing, Smashing Magazine puts out an article that showcases ampersands from various font families. Some more good comparison material. And these fonts are free to download!
Automatic “Awesompersands”
Having read Dan’s article and the comments, I thought that a great way to get the ampersand styles applied quickly would be to use some JavaScript to automate the task. Patrick must have been reading my mind, as he posted some code to achieve that very end. Oh well, saves me the trouble, I can just use what he shared - and you can too!
Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows
A related resource I just found, this site shows side-by-side comparisons of fonts that are commonly installed on Windows, Mac, and Linux systems. This will be a useful resource during web design processes for determining which fonts are likely to be available on user’s computers.
The Elements of Typographic Style Applied to the Web
Yet another resource I just found, the site discusses techniques for harnessing type on websites. Worth a read - it is like an online book.
These links are all great reading, and are worthy of bookmarking for future reference. I’ve already done so!




No Comments
There are no comments yet...Why not be the first?