The Xamarin.Forms framework offers two options for specifying the font size of text to be displayed, e.g. within a Label: Either as fixed values (e.g. FontSize="14") or by using the common keywords specified in the Xamarin.Forms.NamedSize enumeration (e.g. FontSize="Small". The latter comes in handy when targeting multiple platforms (which is one of the key reasons for using Xamarin.Forms in the first place), since text size is automatically adjusted to the according target platform and device, without manually specifying different font sizes for different platforms.
Of course, the NamedSize approach can still be combined with other font-related settings, such as font family, font weight, or decorations. I’ve come across some interesting behavior using one of these combinations – but before going into detail, let’s set up a sample application to reproduce the issue!
Create a simple Xamarin.Forms app including one page, that simply displays four lines of text, which only differ by the FontSize and FontAttributes used:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App.Views.FontSizeTestPage"
Title="Font Size Test">
<StackLayout Padding="10">
<Label Text="This is a sample text"
FontAttributes="Bold"
FontSize="Small" />
<Label Text="This is a sample text"
FontSize="Small" />
<Label Text="This is a sample text"
FontAttributes="Bold"
FontSize="14" />
<Label Text="This is a sample text"
FontSize="14" />
</StackLayout>
</ContentPage>
Before looking at the result, let’s streamline our expectations of the output of this page: By looking at the code, you’d probably expect the first two and the last two lines of code respectively looking the same except for the font weight. If you know that the Small named font size usually is displayed as a pixel-size of 14 on the Android platform, you can in addition expect all four lines of text to share the same font size when running on Android.
Now, let’s start the app on the Android emulator or a real device and look at the output:
Interestingly, the first line that combines FontSize="Small" and FontAttributes="Bold" appears smaller than the other – it seems that, other than expected, Xamarin.Forms on Android renders the SmallFontAttributes, and smaller (probably 12) otherwise.
Now you might want to play around with the settings or run the app on other platforms, but let me tell you that I could not reproduce this issue on either the iOS or the UWP platform, neither with other named font sizes such as Medium or Large.
Of course, this might very well be a “feature” that was implemented on purpose to give bold texts in small size a more natural feeling. However, it still is important to have this in mind when designing pages – for example, do not mix bold and default labels in small font size on the same page, without expecting a visual glitch in text sizing!