font size scaling in Windows Store Universal App (W8.1 + WP8.1)

Question

How do i scale text in Windows Store Universal App (W8.1 + WP8.1)? Basically, the app should look the same regardless which device/resolution is used. The current situation is that layout (dynamic grid based layout) and images scale well except of the text (font size).

The text displayed looks nice for WVGA resolution (480 × 800) but is incredible small for 1080p resolution.

I already read a lot of stuff like Guidelines for scaling to pixel density or Guidelines for supporting multiple screen sizes

But i still don't know how to scale text to stay readable regardless of display resolution/DPI.

Of course i could write a class which uses the DisplayInformation.ResolutionScale property to convert the font size to an appropriated value.

example:

• FontSize 16 on WVGA with ScaleFactor 1x equals FontSize 16
• FontSize 16 on WXGA with ScaleFactor 1.6x equals FontSize 25,6
• FontSize 16 on 720p with ScaleFactor 1.5x equals FontSize 24
• FontSize 16 on 1080p with ScaleFactor 2.25x equals FontSize 36

But I'm uncertain if this will work for all scenarios. Is there a better way to do so? I thought such a common task could be performed with some build in functionality.

Disclaimer: this is (hopefully) not a "let me google this for you question" I found tons of pages which are about scaling but they all cover the layout or images. But I couldn't find anything about font size scaling. Please forgive me if I missed something.

---

Edit: I'm afraid, i failed to express the problem clearly: (WVGA on the left, 1080p on the right)

Answer 1

What I did for my Windows Store app was to bind the FontSize property to the page height and convert the value (you'd have to play a bit, until you find the right value for your case).

<TextBlock Grid.Row="0" Text="Some Text" 
FontSize="{Binding ElementName=pageRoot, Path=ActualHeight, 
Converter={StaticResource PageHeightConverter}, ConverterParameter='BodyFontSize'}" />

And here's my Converter class

    class PageHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        switch ((string)parameter)
        {
            case "HeroImage":
                return ((((double)value) * 2) / 3);
            case "TitleFontSize":
                return (int)((double)value / 40);
            case "BodyFontSize":
                return (int)((double)value / 60);
            default:
                return 0;
        }
    }
}

It's not perfect, but works pretty well until I find a perttier solution.