Font scaling/rendering issues when using Fuse Preview on Mac

Bug Reports
1

Hi, I’m having an issue with the Fuse Preview tool for Mac.
It seems that the scaling or text rendering is a bit off. It looks good on the device, but when I use the preview tool, it looks pretty off.

The font shown in the screenshot is Rooney Bold. Unfortunately, this is a premium font and I can’t share it here, but it might be available on some GitHub repo. Attached is Somatic Rounded, a similar font that also shows some of the same issues, but not as strongly.

Reference image, look at “Venus” in particular

Reference image
DiBngJ4vCPb4-image-1515771117149.jpg851×592

Code for reproducing this

<App>
    <Font ux:Global="SomaticRounded" File="Somatic-Rounded.otf" />
    <Font ux:Global="RooneyBold" File="rooney_sans_bold.ttf" />

    <Rectangle Padding="30" Height="100%" Width="100%" Color="#26C485">
        <StackPanel Alignment="Center">
            <Text Color="#fff" Font="RooneyBold" FontSize="24" Margin="30,40" TextWrapping="Wrap" TextAlignment="Center" Alignment="Center">
                These are three planets in our solar system
            </Text>
            <Button Margin="10" MinHeight="60">
                <Text Value="Jupiter" FontSize="16" Font="RooneyBold" Color="#000" Alignment="Center" TextAlignment="Center" />
                <Rectangle CornerRadius="40" Layer="Background" Color="#fff" />
            </Button>
            <Button Margin="10" MinHeight="60">
                <Text Value="Venus" FontSize="16" Font="RooneyBold" Color="#000" Alignment="Center" TextAlignment="Center" />
                <Rectangle CornerRadius="40" Layer="Background" Color="#fff" />
            </Button>
            <Button Margin="10" MinHeight="60">
                <Text Value="Mars" FontSize="16" Font="RooneyBold" Color="#000" Alignment="Center" TextAlignment="Center" />
                <Rectangle CornerRadius="40" Layer="Background" Color="#fff" />
            </Button>
        </StackPanel>
    </Rectangle>
</App>

This might not seem like a huge issue, but it’s annoying to not be able to trust the preview tool when designing and laying out type.

2

This looks like just a quirk with this particular font triggering larger rendering differences than with other fonts. On device Fuse uses the native text renderer, while in preview it uses FreeType, and they don’t behave identically. This is basically the same problems as fonts not looking the same on different browsers or OSes.

The important thing is that it looks good on device. You should always use device preview for testing when this type of cosmetics is important. There is no way we can accurately emulate the native text renderers of the devices when displaying on windows and mac (without running a full OS emulator).

3

Ah, okay. Makes sense. I’m just used to working with the iOS simulator, and for text rendering, that’s pretty accurate. Hope that evolution pushes it to be more and more similar to the live thing :slight_smile: