Developer Docs - Mobile Docs - Typography

Understand how fonts and sizes are determined and utilizing in Rock Mobile.

Fonts

The default font family for iOS is SF Pro Display and the default for Android is Roboto. They are very similar in appearance, meaning you can style them identically without much visual differentiation.

Each platform has the option to specify additional weights through named font families.

Android

The following system fonts can be referenced in CSS and XAML and will not affect iOS:

.font-weight-medium { font-family: sans-serif-medium; }

Fonts in .NET MAUI - .NET MAUI

iOS

The following system fonts can be referenced in CSS and XAML:

.font-weight-semi-bold { font-family: .SFUI-SemiBold; }

Cross-Platform

Because each OS has a unique reference for similar outputs, you might consider using the OnPlatform class to set a value for each.

Customize UI appearance based on the platform and device idiom - .NET MAUI

/* Option 3 - CSS */
.ios .font-weight-medium { font-family: .SFUI-SemiBold; }
.android .font-weight-medium { font-family: sans-serif-medium; }

Read more about Targeting Platforms with CSS.

Sizes

There are numerous, pre-defined helper classes to help easily determine proven and tested font sizes in your application. These classes are based on the Apple Human Interface Guidelines.

These classes are only used to determine the size of text in Rock Mobile. To learn more about setting the color of your text, take a look at our colors documentation.