Recently I have been trying to add tabs to my application. When designing the Zoom tab, I find that when focusing on other elements of the screen it appears to look like eoon to the unfocused eye. This is a really important feature and it is quite distracting to see this optical illusion.

Should I try a different font? Should I use a different size? Different color scheme? I could do images instead but I would rather do text.

enter image description here


It's not easy to find a solution without seeing the content with which has to face the button. Here are some suggestions:

  • Use capital letters, lower case letters are always more illegible
  • Try a vertical alignment, it's easier to confuse an m with an upper case E than a Z
  • In a vertical alignment, use a monospaced font, in this case all the letters will have the same height and width
  • Try a font with a square structure
  • Slab fonts are more legible than sans serif fonts

enter image description here

  • 1
    Small note: In your sketch, I would increase the (vertical) letter spacing slightly (probably just one pixel) to avoid the letters merging at a quick glance.
    – Wrzlprmft
    Jun 21 '19 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.