Skip to main content

Font and screen size

1 reply [Last post]
Joined: 2008-10-29

Hello, I writting table UI element and I have text element that can have up to 2 characters. I wonder if the percental element width is better than width based on content width calculated via Font.getStringWidth().

If we design for smallest screen possible, the width of string "1234567890" may be around 50 pixels and take 40% of screen width (for 128x96 screens). When displayed on screen with 640px width, the same element will take 290 px space, but the "1234567890" will take not more that 200px using the default font. Thus presious 90px are wasted.
If we design for the big enough screen and hard-code it's percentage, the string may just not fit in the dedicated space.

I'm looking forward to your comments and ideas!
Thank you!

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Joined: 2003-06-15

I think you have a typo. You said you "have a text element that can have up to 2 characters." Just 2 characters?!

Since you are talking about having your UI on both small and large screens the concern that you might waste space on the larger screen is really not an issue, assuming you want to keep the screens looking relatively similar. If you try to fit to the larger screen the smaller will have to scroll, while if you fit to the smaller the larger will look mis-proportioned. A little waste is going to be expected, and at less than 1/7th the screen size it should not be overly noticeable by anyone other than a manager who is only specifically looking at the field size. (the real world users wont notice)

Word of caution the Font.getStringWidth() does not always return good values. If you have a word such as "will" and the word "work" while both 4 letters and while you may see similar widths reported, based on the font you should have much different results if using monospaced verses helvetica. If you are taking user input you can determine the right size of each character, if you are loading this in from a data stream you may want to not waste as much time processing so take an average character width and use it to size.