Text sizing, symbols and icons

Consider the following XAML;

<TextBlock Text="W" />

; – displays the letter ‘W’ using the text semantics

<SymbolIcon Symbol="Accept" />

– displays the accept tick symbol

<FontIcon FontFamily="Candara" Glyph="& #x3A3;"/> 

– displays the sigma sign as an font icon

<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="& #xE001;"/>

– displays the accept tick again, but as a font icon from the MDL2 assets font family

<TextBlock FontFamily="Segoe MDL2 Assets" Text="& #xE001;" />

– displays the accept tick again but as a text element.

The above all basically do the same. They differ by the semantics, e.g. a screen reader can make different choices based on a text block vs. font icon. However, a not so obvious difference is how they react to the user changing the text size. The following image shows the above rendered with text set to largest and then back to normal text.


As you might be able to see, the TextBlock happily resizes the characters, be it a ‘W’ or the tick. The other mechanisms keep the original size. This is important if you want to create buttons in your app. Should your buttons resize with the text or not? Your choice of how you render the symbol/icon will decide the behaviour. IMO it becomes a question of resize vs. element semantics. ‘You make’s your choice’.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s