Readable Font that is Web Safe

Question

In a web app I work with from time to time the issue of text readability has come up. The reason is that it involves passwords which will be read off of the web page or written down. One of my co-workers pointed out the Crystal font as one that is designed to be unambiguous ("l" and "1" aren't confused, "0" and "O", etc), but I'm pretty sure its not useful on the web. I realize that I will probably have to use a fallback strategy, but am looking for advice on what fonts are good for this purpose and specifically those fonts that users may have available. Also, links to resources on the topic would be great as well. Thanks!

Edit: People have suggested monospace as a readable web font. Can anyone provide additional info on possible fonts that users might have that may be better than monospace so that I can chain fonts together to get the best possible result?

Answer 1

A great start is font-family: monospace. These fonts are designed to be unambiguous.

If you're really desperate to get it exactly right, you can render a little image in your chosen font on the server, then send that.

Answer 2

If readability is the most important thing for the password and you are required to have a specific font you can draw the text on an image on the server using your specific font then serve it to the browser.

Answer 3

The generic monospace font will be somewhat good at this, but not perfect. iIl10oO

However, the best solution is to make sure that the passwords do not contain ambiguous characters.

Answer 4

As you describe it is intended for people at your work, there's possibly a bit more control on which browser they use. If this browser is modern enough, you can consider using @font-face to explicitly use the Crystal font in your interface.

You can read this article by Paul Irish to learn more about implementing @font-face.

Have a look at @font-face browser support to see which browsers support this feature yet.

Can anyone provide additional info on possible fonts that users might have that may be better than monospace so that I can chain fonts together to get the best possible result?

On Linux, I like Bitstream Vera Sans Mono (or its more extensive variant DejaVu Sans Mono), on Windows I think Consolas is great (but only if Cleartype is on). Mac users might be fond of Monaco. You could name them all in your font declaration, before mentioning the fallback option "monospace" (which probably is Courier New on Windows machines).

Answer 5

Try this font stack

font-family: "Lucida Console","Courier New",Monaco,"Nimbus Mono L",monospace;

• 99% of Windows has Lucida Console and courier new
• 91% of Mac has Courier New
• 31% of Linux has Nimbus Mono L

http://www.codestyle.org/servlets/FontStack?stack=Lucida%2BConsole%252CCourier%2BNew%252CMonaco%252CNimbus%2BMono%2BL&generic=monospace&x=5&y=8

Answer 6

I distributed serial keys before using Courier New and it was a bad idea. We regularly had calls about people who didn't read the key right.

We fixed the issue by using VerdanaMono, but Verdana is very similar (we wanted the keys to all take the same horizontal space). We also provided a list of possible characters so people could compare. (It looked like this : "The available characters are : ABCD... abcde... 1234...").