web application interface optimisation - fonts / tips ?

Question

Hola stackoverflow,

I'm building an interface with a lot of info on the screen.. dozens of inputs, with accompanying labels. as a result of the volume of info the fonts have necessarily become pretty small.

but I'd like this to be as readable and usable as possible.. is there a really nice font that's both readable and compact, that works well in a browser (specifically in this case, IE7) ?

anyone have any other tips to sort this out? is there some specific combination of pixel/em size and font, or some other CSS voodoo that can help me out?

this is an intranet app so we actually can be pretty specific.

any suggestions appreciated, thanks.

Answer 1

Do you keep accessibility in mind? Isn't it possible to redesign the interface so that less information is shown and people with less than 20/20 vision can easily read your pages?

Typically, sans serif fonts are more readable when used with small sizes. If you want to use a monospaced font, I personally quite like Vista's 'consolas' font.

Answer 2

According to this post from 2006: http://www.kathymarks.com/archives/2006/11/best_fonts_for_the_web_1.html

Tahoma could be winner:

"Tahoma (Windows). Tahoma was designed especially for legibility on the screen. It's preloaded on Windows systems. Similar in style to Verdana, it is narrower and more condensed"

Answer 3

To have it resized cross browser, use ems. Set your font-size on body element to be 62.5% to make sizing ems clearer. 1.2em = 12px.

Arial is pretty good font. So is Helvetica.