Text Boxes: Balancing first impression with usability

Question

I recently read Joel Spolsky's article Designing for People Who Have Better Things To Do With Their Lives, Part Two, and was intrigued by this:

... You may have noticed that almost every edit box on the Macintosh uses a fat, wide, bold font called Chicago which looks kind of ugly and distresses graphic designers to no end. Graphic designers (unlike UI designers) have been taught that thin, variable spaced fonts are more gracious, look better, and are easier to read ...

... When you need to edit text, monospace has a major advantage over variable spaced fonts: it's easier to see and select narrow letters like "l" and "i"...

While monospaced fonts are easier to select, that don't look elegant on UI. First impression is a virtue. So I tried to see if we could bring the best of both worlds: A textbox that displays in Sans Serif, but changes to Monospaced when selected.

I would like to know what you think of this:

• It's annoying. Keep to a fixed font.
• It looks good in both UI and UX.
• Other?

Answer 1

I think this is a great effort and a challenging problem to solve, but I think this solution may be annoying (to use your words). Here's why:

When I go to click to highlight a letter or section of text the cursor jumps to a different section.

PS. That's a cool article even if its 14 years old!

Answer 2

Don't do this because what you see is not what you get.

If I click a point on the text where I want to start typing, I end up typing in the wrong place when the font changes. Similarly, if I hover my cursor over a letter and start dragging, the text expands and I end up selecting the wrong letters.

While you could do a bunch of coding to translate the cursor position after the change, the user's eyes have to scan to the right since you moved their target and you've added a cognitive burden to what should be an effortless process.

Additionally, isn't a user's first impression likely to be based on empty input fields? In which case they will see the monospaced font first and develop opinions on that before it turns into sans serif.

In my years of observing users I don't recall ever seeing someone need to select only a part of a word from an input field. Typically the whole field is selected, or at least whole words. If character precision is required for your users you might want to consider increasing the letter-spacing rather than changing the font face. That way you can have a nice sans serif font while giving users extra room to maneuver a cursor between characters.

Answer 3

I posted the question so that there is a live, working reference in the Internet. After doing it my first impression was that it's annoying and should be considered bad practice.

For the problem of selecting text with narrow letters, I think the answer is to use bigger fonts. Bigger, more plump fonts seems to be the fashion in this age of touch apps anyway.

• Keep to one font. Your UI must be consistent.
• Sans serif fonts look best for screens. Use them. Serifs like Times New Roman look great on paper, but not so nice on screens.
• Found a beautiful font? Great. But most of your users have not installed that font. Use a font that is ubiquitous. Segoe UI, Tahoma, Ubuntu are some nice ubiquitous fonts for computer platforms.
• This is the age of touch apps. Joel Spolsky's argument about inaccuracy of mouse usage applies tenfold for touch apps. Make your font size reasonably large so that users don't find themselves having fat fingers.