locked
Windows 8.1 Universal app font scaling with changing display resolution

    Question

  • My app UI scales great between different screen resolutions except for the font sizes which don't scale at all. So for example, when I set the font size that looks correct at 768x1366 and display the app at 1080x1920 the UI rescales but all the text ends up small. The same effect applies to devices such as the Windows Phone 8. I've tried using Theme font size values and changed to Segoe UI font but there's no difference. I could write an iValueConverter to change the fontsize based on display resolution but that would be a clumsy method for doing something that surely should be taken care of by the framework?

    For the moment I've resorted to an iValueConverter for the FontSize that uses the following logic:

    (FontSize that looks Ok at 1366x768 resolution) / (Screen Width at 1366x768 resolution) x (Screen Width at Runtime) =>

     var newFontSize = (int)Math.Round((oldFontSize / 1366.0) * screenWidth, 0);

    I'm using VS with the design view resolution or 1366x768. Running the App on my Laptop at 1920x1080 resolution the fonts where fine using the iValueConverter to enlarge them.   Today, I found that on testing the app on a friends PC with a resolution somewhere between 1366x768 and 1920x1080 the fonts where much too large.  So it seems, either my logic needs to be more complicated to take account of different scaling at other display resolutions or the iValueConverter approach is not the correct one!

    Has anyone an answer as to how font scaling can be controlled?

    Monday, December 15, 2014 4:39 PM

Answers

  • How about using ResolutionScale ?

    for more information, see:

    Guidelines for scaling to pixel density
    Guidelines for supporting multiple screen sizes


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Monday, December 15, 2014 4:50 PM
  • Generally you don't need to worry about this. The font will scale appropriately with the user's DPI setting. Setting different fonts based on the number of pixels will give poor results if the screens are actually different sizes: the user will probably want larger font sizes on a high DPI 8" 1080p screen than on a low DPI 24" 1080p screen, and the fonts will naturally scale based on the user's DPI settings.

    This is what the articles Bill linked are about. Please read and understand them.

    If you're trying to add your own size compensation on top of that then there isn't anything built in. You're going against the system design, so you'll have to write your own code. I would probably approach this by filling a ThemeDictionary with styles setting various fonts I want to use and then modify the styles to fit my current needs.

    You'll also need to decide how you want to pick the font sizes. Apps don't have access to the screen size, only to their own window size. Picking based on the app's window will give odd behaviour if the user changes the window's size. The height currently more stable than the width, but can change as the user rotates a tablet. The height can be arbitrarily sized in the Windows 10 Technical Preview.

    Saturday, December 20, 2014 3:21 AM
    Owner

All replies

  • How about using ResolutionScale ?

    for more information, see:

    Guidelines for scaling to pixel density
    Guidelines for supporting multiple screen sizes


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Monday, December 15, 2014 4:50 PM
  • How does ResolutionScale help with varying font sizes between differing screen resolutions?

    Monday, December 15, 2014 5:32 PM
  • Generally you don't need to worry about this. The font will scale appropriately with the user's DPI setting. Setting different fonts based on the number of pixels will give poor results if the screens are actually different sizes: the user will probably want larger font sizes on a high DPI 8" 1080p screen than on a low DPI 24" 1080p screen, and the fonts will naturally scale based on the user's DPI settings.

    This is what the articles Bill linked are about. Please read and understand them.

    If you're trying to add your own size compensation on top of that then there isn't anything built in. You're going against the system design, so you'll have to write your own code. I would probably approach this by filling a ThemeDictionary with styles setting various fonts I want to use and then modify the styles to fit my current needs.

    You'll also need to decide how you want to pick the font sizes. Apps don't have access to the screen size, only to their own window size. Picking based on the app's window will give odd behaviour if the user changes the window's size. The height currently more stable than the width, but can change as the user rotates a tablet. The height can be arbitrarily sized in the Windows 10 Technical Preview.

    Saturday, December 20, 2014 3:21 AM
    Owner