It is important to specify the dimension that you are trying to optimize. Do you want to reduce the size horizontally (shorter lines) or vertically? If you want to optimize the horizontal width, you must search for a condensed font. Arial Narrow and Helvetica Condensed are two obvious options, but I do not find them very readable and their appearance is cheap.
For sans-serif similar to Arial / Helvetica, but narrower, see:
Myriad Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive and the new Adobe Pro Source font.
In a comparison that I made with numbers, I found that Myriad Pro, Source Pro Free, Segoe UI and Tahoma were the best in terms of readability with a minimum width of 9px-11px. Note that these fonts handle sizes very differently. It is therefore often necessary to incorporate a size gap to allow a fair comparison.
Lato can work as well. Asana uses Proxima Nova, which is very open and readable in small sizes, but does not look great in a larger size as they use it.
Here is the comparison I made with everything at 10px. However, it is best to play like this yourself, because changing the font size often has a nonlinear effect on these small sizes.
Others have mentioned Verdana. Verdana is very readable in small sizes, but it does not optimize the width at all. That said, a large readable character in small sizes optimizes height rather than width. This may be what you're looking for, but on the web where it's more natural to scroll vertically than scroll horizontally, this is usually not the case.
Personally, I prefer Arial on the screen. If I look for a less neutral aspect or if I need to optimize the width, I can look at Source Sans Pro or Segoe UI.