FileMaker Fonts for cross-platform development

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

https://goya.com.au/blog/fonts-and-filemaker-continued

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:

  1. Development on macOS (Layout Mode)
  2. macOS Browse Mode
  3. 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?

3 Likes

It's always been my understanding that Tahoma (and, I'm less certain but still think so, Verdana too) was designed to render uniformly on both Mac and Windows at the same point size. I just stick with those and don't have to worry about it. FileMaker isn't really an appropriate platform for getting more concerned with typography that that. On the rare occasions it really matters and Tahoma just won't do, I'll use an image, but I can't recall the last time that happened.

1 Like

Here is some analysis that we did (a while ago) showing which point sizes of Verdana were best (easiest to use) for developing on macOS and having it show without clipping on Windows.

2 Likes

This FileMaker Fonts for cross-platform development idea is related ↴

https://community.claris.com/en/s/idea/0873w000001DaLfAAK/detail

Fee free to vote it up!

3 Likes

great suggestions @tonywhitelive. I voted!

1 Like

It's an interesting idea, but I wish Claris would simply figure out how to fulfill the 10+ year old requests to embed whatever font we wanted into a solution, so we wouldn't have to be locked into a single font...

https://community.claris.com/en/s/idea/0870H000000fySfQAI/detail

https://community.claris.com/en/s/idea/0870H000000fz10QAA/detail

https://community.claris.com/en/s/idea/0870H000000fycUQAQ/detail

https://community.claris.com/en/s/question/0D50H00006ezZeTSAU/embeded-fonts-in-file

https://community.claris.com/en/s/question/0D50H00006h8vODSAY/embedding-fonts-in-a-standalone-solution

1 Like

thank you for the "round up".

that just brought an issue back to my mind that is related to fonts in Webdirect where font support is even worse. You cannot embed webfonts, a matter which could be solved with some simple lines of html and/or JS or an updated CSS. We tried to "hack" the central Vaadin CSS on the FMS hosting the solution but didn't get it really persistent (yet).

What a loss of time to get customers CI integrated. For some clients a real show-stopper