Community archive

Ask something
Discussion Locked

Font sizes in input fields

0 helpful
1 reply

by nmccullough

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.
Hey guys, I am currently designing a UI for a web app, and we are wanting to set a maximum length for the fields, and be able to display the entire text string in all the fields. The problem comes in when a user enters Capital letters or uses a 'w'instead of 'l'. we are not using monospaced fonts, so its a little more difficult to use the space effeciently. I need to know how to make all the characters fit in an input field without scrolling, but also make it in a legible font. We are usingTahoma, Arial right now. any help would be appreciated.

1 reply

by j.wallace

Hi there,

Different browsers display things differently - especially form fields. You'll want to know what browsers your users will use and test accordingly.

I have IE 5.5 here and set a text input field to 80 characters. I set the font using CSS to 9px sans-serif (which isn't readable by everyone) and was able to fit 56 numbers.

Then I tried various sizes of monospace. Exact fit, every time. If you stay with a font with proportional spacing, you cannot be sure what they type will fit in the field unless you make the field rather long.

But, here's some useful code for your testing.

You could also declare the style globally, such as in the head...

CSS is the way to go for this. If it's important for the size to be a constant, change x-small to 13px - which are equivalent on my screen.

I recommendusability testing - pick a few older users and see if 13px works for them.

Another alternative to Courier New is Andale Mono, available from the Microsoft Web site.

Hoping this helps,
Rick

This discussion is closed to new replies.