Or perhaps that should read – Arial Font – No – Wider. Our ever sharp-eyed readers may notice a subtle change in the appearance of the SMM online properties, in other words the website and the blogs. It is perhaps a long overdue change and indeed many others may wish to adopt this change so we offer a few words of explanation. Graphic designers will find nothing new here but this is a case where a little knowledge can be helpful.
This is hardly a new topic since back in December 2001 Mark Simonson wrote an excellent article on The Scourge of Arial.
Arial is everywhere. If you don’t know what it is, you don’t use a modern personal computer. Arial is a font that is familiar to anyone who uses Microsoft products, whether on a PC or a Mac. It has spread like a virus through the typographic landscape and illustrates the pervasiveness of Microsoft’s influence in the world.
Arial’s ubiquity is not due to its beauty. It’s actually rather homely. Not that homeliness is necessarily a bad thing for a typeface. With typefaces, character and history are just as important. Arial, however, has a rather dubious history and not much character. In fact, Arial is little more than a shameless impostor.
He then goes on to lay out the history of how Arial evolved from a font much used in print media, Helvetica.
Throughout the latter half of the twentieth century, one of the most popular typefaces in the western world was Helvetica. It was developed by the Haas Foundry of Switzerland in the 1950s. Later, Haas merged with Linotype and Helvetica was heavily promoted. More weights were added and it really began to catch on.
An icon of the Swiss school of typography, Helvetica swept through the design world in the ’60s and became synonymous with modern, progressive, cosmopolitan attitudes. With its friendly, cheerful appearance and clean lines, it was universally embraced for a time by both the corporate and design worlds as a nearly perfect typeface to be used for anything and everything. “When in doubt, use Helvetica” was a common rule.
Arial is an example of a font without serifs. Serifs are those small projections that are added to letters in a font like Times Roman, which is a standard font used in MS Word. They look fine in print but do not work particularly well on a computer screen. Arial is just one example of a sans-serif font and there are now many others.
If Arial is so popular why would anyone wish to change. One reason is to stand out from the crowd. The other reason is that Arial can have a slightly cramped look and others spread out the letters a little more. This helps readability particularly with smaller letters.
Our choice is Verdana, which is now a very popular font. In consequence, the CSS style sheets now start off with the following lines of code:
font-family: verdana, arial, sans-serif;
The font-family line means that verdana is used if available. If not, then arial is used if available. If not then whatever sans-serif font is available is used. No surprises there.
The font-size: 0.9em; introduces a very important point. It could equally have been written as font-size: 90%; If a font-size is not specified, then each browser uses whatever it has designated as the default size for that font. Here are the default sizes for Arial and Verdana in Firefox and in this case Internet Explorer looks very similar.
In short, Verdana is slightly bigger. To have approximately the same height for Verdana as appears with Arial the font-size must be set at 90%. Here is how that appears:
The letters are spread out a little more, which gives improved visibility. This is more apparent at smaller character sizes. This is shown in the following comparison where both are half the size of the previous version.
The other spacing consideration is the distance between the lines and this is governed by line-height. More and more people seem to be moving to line-height set at 140% or 1.4em. The difference is illustrated in the following image:
As you will see, setting line-height at 100% reduces the default spacing which is equivalent to a line-height of 120%. That is now our standard – Verdana with a line-height of 140%. We hope you find that more legible and welcome your comments on any thoughts you may have on this subject.
Just for balance, I should mention the very fine article by Sander Baumann entitled, Font Series: Arial is everywhere. It has some very fine examples of large signs in Arial that are really very striking.