Text Size
Applies to: Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span
Several utility classes have been created to help you size your text. Apple and Google both have styling standards for various types of text in your application. We've provided a set of classes for their UI patterns as well as a general set if you prefer to go your own way.
Regardless of how you proceed, it's recommended to consider the font scaling set by the user in their device settings. For those that are hard of sight, they may increase the overall font size to easily read the content. Setting a fixed font size in XAML or CSS won't respect the scale setting, so things could look a bit wonky or be difficult to read with scaling enabled.
Named Sizes
The following classes allow you to size your text the way that Apple and Google intended. Using these classes will also allow your app to respect an individual's settings to scale the fonts larger or smaller on their device.
These classes correspond to Named Font Sizes in Xamarin Forms, which you can set directly via CSS if you desire. Your CSS definition might look like: .custom-label {font-size: large;}
Body Text
The classes below should be used with labels that represent paragraphs. They have a proper line height as well as a margin at the bottom to separate paragraphs. These classes will respect an individual's request to make the text larger.
Generic Scaling
In the case where you want to go with custom sizes, but still want to respect the font scaling setting, you can use this syntax in CSS: .class {font-size: ?shell-font-scale(#);}
The font size number set in the parenthesis will determine how large the font is at 100% resolution.
For further clarity on this CSS function within the Rock Mobile Shell, please visit Shell CSS Functions
Heading Sizes
Not to add yet another sizing pattern, but we've added utility classes for headings. These are helpful when using content that is being converted from HTML or Markdown. You can easily override these sizes in your own CSS. Note that these do not respect scale by default.
Last updated