HMI Design - Picking the Right Font

What is the perfect font to use when developing HMI screens?  Like many things in screen design, there isn't a one-size-fits-all answer.  

 Various font options of the word 'Conveyor' in FactoryTalk View Studio.

Various font options of the word 'Conveyor' in FactoryTalk View Studio.

In the above picture, there are 3 or 4 fonts that are obviously difficult to read, but the rest of the fonts are harder to differentiate.  When evaluating font type for an application, it is important to understand two concepts: serifs and x-height.

Serif vs. Sans Serif Fonts

What is a serif anyway?  Serifs are the fancy strokes that extend off letters.  Serifs appear on both upper and lower case letters. Each font type will have a distinctive style that makes the family identifiable. Font styles that lack the strokes at the end of letters are referred to as sans serif. 

serif-vs-sans-serif.png

Serif fonts should be avoided on HMI screens.  Even on modern high resolution displays, small serif characters are harder to read than the equivalent sans serif characters because of their more complex shapes.

Font X-Height

The x-height of a font is literally the height of the lower case 'x' in the font family.  In the below picture, the green lines represent the x-height of the Arial font.  X-height is essentially the difference between lower and upper case letters.

 X-Height of Arial vs. Times New Roman

X-Height of Arial vs. Times New Roman

This height is especially important on HMI screens where screen real estate is limited.  By selecting a font with a taller x-height, the text appears bigger even though it is the same point size.  This provides more readability without taking up more screen real estate. 

 Same point size but different x-heights.

Same point size but different x-heights.

Of course, it is possible to go too far.  In the below picture, 'h' and 'n' become harder to differentiate as the x-height increases.

X-height_n_and_h_example.JPG

In summary, x-height is an excellent font characteristic that when understood and used appropriately, can help text appear more clear in smaller spaces.

A Good Font: Arial

Arial is a sans serif font with a large x-height that was designed to be easily read on monitors.  Arial is what I use on 95% of my screens.  In the below example, Arial is the most crisp and easily read.  This is especially apparent in the conveyor speed sections.

 Same conveyor control blocks with different fonts.

Same conveyor control blocks with different fonts.

It is worth noting that Arial does have limitations.  A major one being the lack of differentiation between the lower case 'L' and upper case 'i'. The number '1' can also be hard to differentiate.  It is important to be aware of this when designing screens with the Arial font. 

Summary

While it would be nice to say, "use the _________ font on all HMI screens", it is not realistic and therefore important to understand what makes fonts different.  In many cases, Arial is a font that will work well. But, depending on screen real estate, font point size and text being written, the screen designer must make an educated decision.