My previous article listed all of the fonts that are common to both Windows XP and MacOS X. This time I’ll look at how both platforms display the standard fonts in FileMaker Pro.
Does Experience match reality?
If you’d asked me before I’d actually tested it, I would have said, Arial is shorter on mac than windows, but they’re pretty close in length. Verdana is very different in lengths, but closer in heights.
To test this, I’ve setup a file with some basic text in a block, one copy for each of the fonts I outlined previously and then resized it to fit in both windows and mac at 11 pt and 12 pt.
First, text height. This was the one that bugged me the most, I think because I develop on a mac, and I just know that Arial is bigger on Windows and when you see 11pt Arial in windows that has been created and resized on a mac, the bottom of characters like “y” are slightly cut off. I get picky about text height, for example, I size my portals to the same height as the text in it, so when you edit the text, it all looks neat. This all breaks if you have different font heights on different platforms.
So are any of our 11 fonts the same height at 12 pt? Yes, one of them. Arial Black… Not exactly my favorite choice for on screen display. Well what about 11pt? Yes, and the situation improves, we have 3 fonts that are the same, Arial Black, Comic Sans and Verdana.
At 12 pt, everything else is bigger on windows, and Trebuchet MS is 4 pixels bigger! At 11 pt, with the rest of the fonts there is still a difference of 1-2 pixels for most of them. The complete stats :
| Name | 11pt Mac | 11pt Win | 12pt Mac | 12pt Win |
|---|---|---|---|---|
| Arial | 15 | 16 | 16 | 17 |
| Arial Black | 17 | 17 | 19 | 19 |
| Comic Sans | 17 | 17 | 18 | 19 |
| Courier New | 14 | 16 | 16 | 17 |
| Georgia | 14 | 16 | 16 | 17 |
| Impact | 15 | 17 | 17 | 18 |
| Times New Roman | 15 | 16 | 16 | 18 |
| Trebuchet MS | 14 | 18 | 16 | 20 |
| Verdana MS | 15 | 15 | 17 | 16 |
The most frustrating part of this is that the differences, of mostly 1 pixel in height, are cumulative. Meaning that a 1 pixel height difference will add up, and text with 3 lines will have 3 pixels different. So although these fonts might be able to work on short text like field labels, in long text blocks they’re going to be significantly larger or smaller depending on the choice of fonts and sizes.
What about text length? The short version is that no font is the same on both platforms. What’s worse is that every different text block is going to have different lengths.
Every character in a “monospaced” font such as courier new, is the same length, and conversely with every other font each character is a different length. So “iii” is much shorter than “www” in pixels. But each character in each font is different again in windows vs mac. So that means that some text will be longer, some shorter, it just depends on which characters you chose, and how many of them are used.
When I first set this test up, I had the text “This is some text.” and I used that as my comparison point. Then I thought I should probably cover a larger set of characters, and changed it to “The quick brown fox jumps over the lazy dog.” What I’ve actually done is probably to average out the differences in individual character lengths. The percentage difference in length for the text changed for all of the fonts, but in different ways. I think to get any real handle on the differences you’d need to re-run the test for each of the characters in the basic alphabet and compare again. That would take a while, and I haven’t done it this time.
The complete stats :
| Name | 11pt Mac | 11pt Win | 12pt Mac | 12pt Win |
|---|---|---|---|---|
| Arial | 224 | 224 | 244 | 245 |
| Arial Black | 276 | 273 | 300 | 299 |
| Comic Sans | 235 | 234 | 256 | 250 |
| Courier New | 293 | 311 | 320 | 311 |
| Georgia | 222 | 263 | 242 | 264 |
| Impact | 201 | 209 | 219 | 215 |
| Times New Roman | 207 | 215 | 225 | 225 |
| Trebuchet MS | 229 | 230 | 250 | 257 |
| Verdana MS | 257 | 266 | 280 | 289 |
However, if you take the data at face value as being indicative for all different text contents, then Arial is the clear winner here, although compared to say Georgia, Verdana didn’t fare that badly.
The other interesting stat from that list is that you’ll fit more actual characters into a fixed block with Arial than you will with Verdana.
Other Options
Well if you’re running in an environment where you have control over the platform, you may be able to add to your options. If you’re selling a end-user product you’ve probably got less choice. There are a lot of applications that install additional fonts that are available for all applications on the same computer. For example, Microsoft Office.
If you’re in an environment where MS Office is installed on all the machines you’re running FileMaker on (which is quite common in a corporate environment, but harder to control elsewhere) your options for fonts that exist on both platforms expands quite a bit. The range of font options goes from 11 to over 50, just by installing MS Office. I picked 2 of those fonts, and re-ran our tests on font height :
| Name | 11pt Mac | 11pt Win | 12pt Mac | 12pt Win |
|---|---|---|---|---|
| Century Gothic | 15 | 18 | 17 | 19 |
| Tahoma | 15 | 15 | 16 | 16 |
Why those 2? Again, I was looking for a sans-serif font for field and layout text use, so it needed to be simple and easy to read on screen. A lot of the 40+ fonts are quite fancy, and not really suited.
This gives us one interesting point : Tahoma (like Verdana) is the same height on both mac and win, but in the case of Tahoma, it’s the same at both 11 and 12pt, and in fact all the way up to 36pt. At 48pt and above it’s one pixel bigger on windows. But what about lengths :
| Name | 11pt Mac | 11pt Win | 12pt Mac | 12pt Win |
|---|---|---|---|---|
| Century Gothic | 243 | 246 | 264 | 265 |
| Tahoma | 226 | 222 | 246 | 256 |
So Tahoma is no better than verdana when it comes to length.
Display of short text
There was one significant difference between the platforms when rendering text. In almost all cases text on the mac would be shorter in both height and width compared to windows.
However on both platforms, text that was in a block that wasn’t long enough to fit would still display properly in browse mode, even though you could see the fault in layout mode.
Text that wasn’t tall enough however was just cut off, and displayed poorly. It seems the font rendering engine can cope by expanding text to fit horizontally, but not vertically.
Conclusion
In short, it depends on your target platform and development environment and display styles.
If you’re developing on Windows, it’s probably not going to make too much difference unless you’re picky about text block height, such as in situations where it makes visual difference, like having text that fills portal rows. Almost every font you choose will still display all of the intended text on the Mac. You can make up for the height differences by adjusting where the text is aligned in the text block, and sizing the text block appropriately.
However because of the differences in the way text blocks draw, if you’re developing on a Mac, you might be better off choosing a font that is the same height on both platforms, and that way avoid the issue altogether. If that is the case stick to Verdana at 11 pt, or take the option of Tahoma if you have it. If not, and you are happy to size your text blocks appropriately, Arial makes a good choice as the length is much more similar, and you will have a more accurate idea of the length required on both platforms.
If I had to pick a winner, it would be 11pt Verdana For larger pt sizes, choose Arial so you know how much room it will take up, and make sure to confirm on windows. For long text blocks of multiple lines that wrap, it’s not going to make much difference, you’re going to need to check and confirm on both platforms, and you should probably take advantage of options like sliding objects to clean the end result.
Regardless of what you choose, you’re going to need to test on both platforms and resize where appropriate.
Also anyone with Typography knowledge will realise I’ve just brushed the surface. I don’t intend to go into DPI or rendering issues, just to tabulate the end result data. The why’s and how’s are probably best left to others with more knowledge on the matter than myself.
What I would like to see in FileMaker down the track is the ability to include fonts with a solution, in much the same way that plugins are currently made available. Or a more accurate rendering engine, much like CSS where you can specify actual pixel heights, that the OS renders for you. But maybe all of this will be a moot point down the track as the OS starts to do Resolution Independance. And what that means for FileMaker is anyone’s guess, except for the fact that the tools we’ve got now will need to be smarter to keep up with the advancing options available.
Maybe this information helped you to evaluate other options, or possibly to reinforce existing ideas. Either way I hope it was useful. Feel free to leave a comment.
I have also got the files that I created to test this, if anyone would like a copy contact us, and I’ll email them.