Working with Fonts

In the last few days I worked on my template database again. I use it as a storage place and work of reference of ideas, features, and solutions I developed with FileMaker. It includes a basic collection of custom functions, default scripts for trigger management, and design samples.

Designing a good looking layout is a challenge in itself. But when you try to use the same layout in both worlds, Mac OS and MS Windows, raises the challenge quite a bit. Main problems are the font. There are only few fonts available in both systems. But having the same name does not make it the same font. Text formatted in the same font might have different width and height – resulting in really ugly layouts.

There are different ways to redress these problems:

• Oversize all labels and fields
• Use conditional formatting
• Use hidden tab controls for each operating system
• Create separate layouts for each operating system

Often, you will use a mixture of different solutions. But to master these challenges you should know a little bit about the fonts in Mac OS and MS Windows.

Available Fonts

MS Windows and Mac OS offer quite a collection of fonts. Unfortunately, in this large group of fonts are only few available in both operating systems.

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Symbol
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings

Not all fonts are a good choice for great layout design. Comic Sans MS does not look very professional. And when you prefer small font sizes in your layout, you should avoid serif fonts like Georgia or Times New Roman. Arial Black and Impact are very bold. and should not be selected as default font for fields and labels. Their heaviness would make it difficult to read the record. But perhaps used as layout titles or section headlines these fonts could create the right impact (hence the name of the font).

Symbol and Webdings with their symbolic characters cannot be used for fields either. Perhaps single characters might be useful for labels (e. g. the summary sign ∑ or the dot •). Courier New is a mono-spaced font; each character has the same width. In some cases it makes sense to use a mono-spaced font, but often it is not the preferred choice as a default font for fields.

Group fonts by their scope of application:

First choice (Sans Serif Font)

Useful for fields, labels, and headlines.

• Arial
• Trebuchet MS
• Verdana

Second Choice (Serif Font)

Could be used for fields, labels, and headlines. Use Georgia and Times New Roman with a size greater 12 pt for better readability.

• Courier New (mono-spaced font)
• Georgia
• Times New Roman

Special Uses

Not good for fields and labels,

• Arial Black, Impact (good for title or headlines)
• Symbol, Webdings (single characters in labels or as design elements)

Not the Same

These fonts might have the same name in both operating systems, but that does not mean, the look exactly the same. As a general rule, fonts will look different in the other operating system. They might run wider or shorter, their height might be different, or the position of the baseline is has shifted.

For comparison, I took screen pictures from the same font settings in both operating systems. The first sample is always from Mac OS, the second from MS Windows XP.

Size matters

These samples show, that the same font has a different width in both worlds, even the mono-spaced font Courier New. Only Times New Roman looks like it has identical spacing. But this will change with font sizes larger than 12 pt.

Unfortunately there is no specific rule like fonts will run wider in MS Windows. For example, Arial in size 10, 12, and 14 pt is smaller in Mac OS, but in size 13 and 16 pt Mac OS renders the wider text. Also the height is often different in both systems. It might be only one or two pixel, but that is enough to cut descenders.

And, as if the size problem is not enough trouble, there is also an issue with the baseline. It might shift up to two pixel, enough to make a perfect Mac OS layout look awkward in MS Windows.

See the following table with text width for different text sizes and shifted baseline. I examined the text “The quick brown fox jumps over the lazy dog”, formatted in different fonts and sizes.

FileMaker Font Size: MacOS <-> MS Windows

Width of the text "The quick brown fox jumps over the lazy dog", measured in pixel. It also tells how much the baseline shifts in MS Window.

Font	OS	10 pt		12 pt		13 pt		14 pt		16 pt
Arial	Mac OS	200 × 13		240 × 16		260 × 17		280 × 18		319 × 20
	MS Windows	212 × 15	+1	242 × 17	+1	259 × 18	+1	282 × 18	0	305 × 21	+1
Trebuchet MS	Mac OS	204 × 13		245 × 16		265 × 17		285 × 18		326 × 21
	MS Windows	203 × 17	+2	253 × 20	+2	266 × 20	+2	288 × 20	+1	329 × 24	+2
Verdana	Mac OS	230 × 14		275 × 17		298 × 18		321 × 19		366 × 21
	MS Windows	254 × 14	0	285 × 16	0	301 × 18	0	324 × 19	0	372 × 20	0
Courier New	Mac OS	261 × 13		312 × 16		338 × 17		364 × 18		415 × 20
	MS Windows	261 × 14	+1	304 × 17	+2	347 × 18	+1	347 × 19	+1	433 × 20	+1
Georgia	Mac OS	199 × 13		239 × 16		258 × 17		278 × 18		317 × 21
	MS Windows	216 × 15	+1	260 × 17	+1	279 × 18	+1	283 × 19	+1	319 × 20	0
Times New Roman	Mac OS	186 × 14		222 × 16		241 × 17		258 × 18		295 × 20
	MS Windows	187 × 14	+1	222 × 18	+1	242 × 18	0	263 × 19	+1	276 × 22	+1
Arial Black	Mac OS	247 × 16		296 × 19		320 × 20		345 × 21		394 × 25
	MS Windows	252 × 16	0	295 × 19	0	324 × 20	0	342 × 21	0	398 × 25	0
Impact	Mac OS	182 × 14		218 × 17		236 × 18		253 × 19		289 × 21
	MS Windows	182 × 16	+2	213 × 18	+1	239 × 19	+1	244 × 20	+1	285 × 22	+1

Choosing a Font

The numbers from the table will limit the number of good fonts. I like the font Trebuchet MS, but the shifting baseline will create a lot of trouble when designing layouts for both operating systems. After all, it looks like there are only 2 – 3 fonts left:

1. Verdana
2. Arial
3. Times New Roman

In most cases my choice will be Verdana. The baseline does not shift. In size 13 pt the width is very similar. Text formatted in this font is easy to read, but it runs a little bit wide.
Arial is a narrower font, and it would be my second choice, if space is a problem. In size 12 – 14 pt the width is very similar. But in my opinion, Arial is a boring font.
In third place comes Times New Roman. It is a serif font (I prefer sans serif) and it is small compared to Arial or Verdana, making it much harder to read on a monitor. Sizes 10 – 14 pt have very similar width. But there is also a baseline shift.

All three fonts look best in size 13 pt. The width is almost identical and the baseline shift is 0 for Verdana and Times New Roman.

Other Solutions

You do not have to use the same font for both operating systems. There are different tricks how you can work around it.

Conditional Formatting

You can apply a conditional format to all labels and fields. This allows you to change the font for the other operating system. The following condition would change the format in MS Windows:
Get( SystemPlatform ) = -2

Unfortunately you can only change the font and the size of the font, but not the dimension of the field. So you have to take care, that the other font will fit perfectly into the available field.

Separate Layouts

Another solution are separate layouts. You have to design everything twice. Once for Mac OS and the second time for MS Windows. This allows you to dig into all the special fonts and features you get with each operating system.

You have to make sure to open the right layout. You can do this with a special script. The script parameter is the name of the layout (e. g. “Address”). Assuming you name the layouts “Address (Mac)” and “Address (Win)”, then the script evaluates the current system platform and redirects to the proper layout:
Go to Layout [Get( ScriptParameter ) & If( Get( SystemPlatform ) = -2; " (Win)"; " (Mac)" )]

Hidden Tab Controls

Using different layouts is not always the best idea. But there is a different solution. You can use an invisible tab control. The tab control has two tabs without (!) tab names, but with object names “Mac” and “Win”. Lines and fill for the object is set to invisible. The font size is set to 1 pt and tab width is set to fixed width of 0 px in the Tab Control Setup. The tab control starts in the top left corner of the layout and is as wide and high as the required layout.

Now you can assign a OnLayoutEnter trigger script to the layout. The script has a single line:
Go to Object [If( Get( SystemPlatform ) = -2; "Win"; "Mac" )]

Another Trick for Developers

FileMaker has the annoying habit to resize a label (a simple text object) whenever you change a font attribute for this object. For example, when you change the font color, the text boundaries will minimize again. This makes it difficult to design for different operating systems.

This is my solution for that problem. First, let FileMaker show the text boundaries all the time. You do that in the menu View > Show > Text Boundaries. Second, for each label define a left indent of 1 px. If the left and right indent is not equal 0, FileMaker will not adjust the text boundaries for that object anymore.

With these settings you can make the boundaries a few pixel bigger to adjust for a slightly larger rendering in the other operating system.