We do most of our FileMaker development on the macOS platform. Very often we deploy to customers who have Windows users. We have to decide what font face & size combinations will enable us to be productive developers, while providing screens that look good both on macOS and Windows.
One issue that we have to address is that fonts render differently on Windows versus Mac. If we examine font faces at various sizes, we discover that often the height on macOS is different than the height on Windows. Additionally, the width of a line of text on Windows is usually wider than the same line on the macOS platform.
A good 2 article series to read for background on this is here
Text has what we refer to as a natural height. For example, Verdana 11 has a natural height of 15 (referred to as 11 on 15).
There are a number of font face & size combinations that have the same height on both macOS and Windows. We gravitate towards working with these combinations because it makes cross-platform development easier and more reliable.
What about the width? We like “layout text” where the boulding boxes are snug around as this helps keep the layout looking tidy. How will the text render on Windows, won't it be clipped? The answer that we've seen consistently over the years is it depends…
A text label on macOS CAN automatically expand on Windows provided it has not been resized. If it has been resized, there will be a subtle change (as revealed by the fmXML see below) that will prevent the text from auto-expanding.
Here is a (not a work of art) visual. Showing:
- Development on macOS (Layout Mode)
- macOS Browse Mode
- Windows Browse Mode
As you can see above, the top of label of #3 shows the text auto-expanding to the left on Windows. This means that we do not have to exert the effort to resize text labels and estimate how much size we will need. This feature is useful and likely was built that way intentionally by our friends at Claris FileMaker.
To recap, we almost always develop on macOS, keep our bounding boxes snug, align the text as needed and leave some room to expand. We let FileMaker auto-size text when it renders on Windows. As long as we are careful and check our work by viewing the layout on Windows, we end up producing good looking layouts without working harder then we need to.
For those who like a deep dive, here is the fmXML behind 2 text labels, where the only difference is that one of the fields was resized and the other was not. It appears that FileMaker tracks whether text has been resized (by setting some flags) and renders the text differently based on those flags.
We are interested to hear if others are using this technique to make XPLAT development easier and more reliable.
Are you using this technique?
Is it working for you too?
What are your favorite XPLAT font face & size combinations?