Monday, 28 October 2013

Font Sizes and Display Resolution

When designing a GUI application in Gen, the controls are positioned using a pixel based co-ordinate system that specifies the position and size of the controls. In addition, fonts are specified using point sizes. A point is 1/72 inches, so for example 12 pt text is 1/6 inch high. In the 'normal or 100%' resolution on Windows desktop, the screen resolution is 96DPI (dots per inch), so 12 pt text is 16px (pixels) high.

If the user changes the screen resolution to say 120 DPI (125%), then the same 12pt text is now 20px high. However the remainder of the window design is still specified in pixels, and this can cause problems with the positioning of the text within the controls.

In the example below, notice the change in the window between 96 and 120DPI.



Window with system resolution set to 96 DPI

Window with system resolution set to 120 DPI

To support the change in DPI, the designer would need to ensure that text fields and literals are wide enough to accommodate all of the text and avoid wrapping. Web Browsers also allow the user to change the zoom factor for an application.

For Rapide Browser and Mobile applications, Rapide uses pixel based font heights rather than point based, with the conversion from points to pixels based on 96DPI. This means that a UI design that looks correct in 96DPI will scale correctly irrespective of the DPI setting or browser zoom level. 

Rapide Desktop applications still use a point based font size to ensure that fonts are scaled if the user requires a higher DPI setting.

No comments: