Cross-Platform Fonts Revisited: Arial vs. Verdana

[HazMatt]

I recently converted a FileMaker 6 solution to FileMaker 11. Every layout used the Arial font in various sizes and styles. I used the Arial Narrow font when needed; I never used FileMaker's "Condense" font style. I have always designed on the Mac and had been in the habit of "shrink-wrapping" the fonts to make the element as small as possible, paying little heed to what it would look like on Windows (the Mac snob in me, I guess).

The problem was, upon conversion, that the difference between the Mac and Windows version of the Arial font has appeared to grow to a greater level (i.e. white gaps above the characters), and this difference even caused some data to disappear entirely from a list view print. So, I decided to get to the bottom of it and investigate an alternative font. I'm not excited to convert all of my layouts (we're talking hundreds) to a different font, but I thought it was useful to determine the best cross-platform font for today's platforms.

The Mac version was developed on Mac OS X 10.6.8 and the Windows version is on Windows XP 32 bit, service pack 3. I may update this for Windows 7 eventually, but I didn't have a test platform on hand.

You can see from the animated GIF that Arial has some real problems with the differing heights of the text element, especially when it comes to the bold, narrow and condense versions. Arial Narrow 11 and 10 pt on Windows, for instance, is 3 pixels higher than the Mac version! It looks to me as though the designer of the Arial font for Windows has an extra pixel of white space along the top.

Verdana does a much better job in this respect, with height variations only on the 12 pt version.

Obviously there are other fonts out there, but I thought this illustration might be useful for others. If anyone has suggestions of other fonts or styles to compare, I may be interested in adding those to the illustration.

-Matt

[Fitch]

Nice job, thanks for posting this.

I think most of the time, Arial and Verdana are both pretty safe, as label and field widths are typically shorter than the 62 characters in your example, so the width discrepancy would be even smaller. I'm generally more concerned with the width than the height. FWIW, Arial 11/ 16 ht is my go-to font.

Goya did a nice write-up on fonts a few years ago.

[HazMatt]

Hah… I wish I found that page before I put in all the work! Oh well.

It was an interesting read, and I'll definitely be changing my development habits after this exercise.

[Vaughan]

That's one of the things with cross-platform development: a lot of things that are normally taken for granted, like fonts, have a lot of impact and are work to change after development begins.

Though I haven't done any myself, multiple language support is another difficult area. Apparently German in particular causes problems due to very long words.

[RodSierra]

As Vaughn aludes to make sure you test a wide range of languages before you commit to a font. For Asian type, we find that Tahoma is a good choice, both cross platform non western character sets.