how does the browser font size decide the way our application is rendered

Question

We have a standard j2ee application written using jboss richfaces 3.3.x. we have several style classes to decide the size of the font family and size.

Some of the end users who use our application have their own font settings (in Mozilla under Tools-->Options-->Content-->Default Options-->Advanced. It has the checkbox "Allow pages to choose their own font, instead of my selections above".

Some have minimum font size set to None and some have it set at 18. In such cases the buttons get rendered bigger in size and it exceeds the button size resulting in a unusable UI.

Is this an issue with Firefox, we can't advice the customer to modify these settings. How are we supposed to handle these cases.

Answer 1

It's always possible that they will have different font settings. Different size, different faces (with different height/width/kerning). Browsers have their defaults. OS's have their defaults (Win vs. Linux vs. Mac, even Win XP vs. Win 7). Users can override them with their defaults...

It can be an issue even with desktop apps.

The only way is to design the app in such a way that it looks nice and is fully usable regardless of font face and size. UI and widgets should scale relative to font size.

Answer 2

For sure, it is not an issue with Firefox. I would rather say it is an issue with your application. You don't have to force customers to modify their browser settings just to use your application. Instead, you have to adapt. Gladly every well-known browser let specify the accessibility settings you cannot override, like the colors, fonts or font sizes.

The magic rule every person working with UI must keep in mind is that if you force your customers to adapt to your app, they would go away and buy another application, which respects them and instead of imposing something, adapts to their needs, takes in account their disabilities and matches their habits.

Remember some customers may have difficulties reading small text. If they change their settings to set text larger or to set the minimum font size, it's often because they just cannot read tiny text on a high resolution screen.

Now, what can you do to ensure your application displays correctly? The most obvious solution is to test it, to see what happens, and to adapt the design. Increase the font size. Run your app. If text overlaps buttons, you may want to increase the size of the buttons.