Clear, Legible Font without Compromise April 27, 2018

Gyroscope uses safe web fonts for compatibility and performance reasons. By default, sans-serif fonts are used throughout the interface. This arrangement could have some usability issues when it comes to letters that look similar to one another.

For example, the lower case L and the upper case I:

Illinois 1234

Illin0is o1234

The first line is Arial, a sans-serif font. The second line is Georgia, a serif font. How about we use Georgia for the default font for the Gyroscope list view?

Georgia is not without its own problems. For example, the numbers are stylized in a way that breaks the visual flow. What's worse, is that the "o" in the above example is actually a number 0, and the "0" in front of "1234" is actually a lower case letter "o"!

Now we need a font that has a slashing 0, in addition to different looking L, I and 1. A popular programming font, Consolas, fits the bill:

Illin0is

Consolas, or any mono-space font, is not suitable for the general user interface because the letters take up too much space. Because there is no proper kerning, the interface looks, well, ugly.

Starting version 13.7, Gyroscope introduces a font-switch peek feature that solves this issue. By holding the "eye" icon in the status bar, critical sections such as the list view, input fields and section titles are temporarily switch over to the more legible, non-ambiguous mono-space font. Once the icon is released, the font switches to normal sans-serif font.

The switching behavior is customizable. Other font arrangements and sections can be specified by modifying two CSS files.

On a mobile phone, hold the blank space on the Back bar, or the list view title for 2 seconds, the font will switch. Release and hold again, the font switches back.

The peek-switch feature is not limited to just fonts. One can get creative and implements all sorts of alternative views. For example, momentarily revealing sensitive text, X-ray vision, or enabling high contrast overlay, etc.