Arial Font No Longer

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:

body{
       font-family: verdana, arial, sans-serif;
       font-size: 0.9em;

}

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.

font default sizes

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:

verdana font 90%

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.

verdana font 45%

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:

verdana font line height

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.

Update
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.

18 thoughts on “Arial Font No Longer”

  1. Yeah, it’s good to see all web 2.0 startups starting with Verdana or other similar fonts, rather than Times New Roman or simply Arial.

    I use line-height 150%, is 140% better in your opinion?

  2. I’ve been using Verdana for the longest time on Websites (I think 1998 or so) – now I’ll have to find a new font… ; >

  3. i am just concern about the site which are using Arial. I like the jokes “Arial is everywhere. If you don’t know what it is, you don’t use a ‘modern’ personal computer.” 😀

  4. Shaon, I agree with your sentiments. I wrote this because I accepted themes from others that did not pick up on this obvious point. Then I found the information on default sizes and line heights was not sufficiently visible on the Web. Hopefully this will bring it to more people’s attention.

  5. I’ve always found Arial easy to read and most surveys I’ve read rate it high for readability but I use Verdana quite extensively as it is also easy to read and immediately sets my sites apart from the ubiquitous Arial sites.

  6. Good for you for making the switch! I find it less tireing on the eyes when a site uses something other than Arial.

    I’ve been hoping that more websites will adopt another font besides Arial. The only problem would be if sites all switched to the same font.

  7. I would say, Arial font is used where the font size is bigger and want the netizans to read the webpage. Arial font is really good to read on.

    Considering Verdana, it looks very professional when in small size. I hope the beauty of this font is used by many web designers in their websites (Web designing websites)

  8. I have to admin, I’m a huge Arial user. I think just about all of my Word documents, and possibly even my site is in Arial right now. Verdana looks nicer though, and someone has recently suggested I change fonts, so I may just give that a try.

    ~ Kristi

  9. Arial seems to be overused so I end up using graphics instead of text many times. However I use Trebuchet MS for sites text.

  10. Thanks for the information on Verdana font. I am hearing about it only now. I have been using Ariel a lot and a switch is necessary.

  11. I learned a lot today about fonts, thanks to you! I found the serif tidbits to be the most interesting. Sans-serif actually means something to me now.

  12. I agree with Mike. Ariel is ok, but I avoid Time New Romans.
    Good things about using Verdana and the other new fonts are that these text fonts do stick out.

  13. I personally am delighted to have the wider Verdana, it is much easier on my eyes. Some letters though are as good as Verdana, but it seems universally accepted so I’ll go with the flow!

Comments are closed.