Rock Mobile Docs
App Factory
  • Welcome 👋
  • 📱Getting Started
    • Building Your First App
      • Creating An App
      • App Configuration
      • Adding Content
      • Deploying Your App
    • Lexicon
  • 🧱Essentials
    • Animations
    • Blocks
      • CMS
        • Content
        • Content Channel Item View
        • Content Collection View
        • Daily Challenge Entry
        • Hero
        • Lava Item List
        • Login
          • Using Auth0
          • Using Entra
        • Profile Details
        • Register
        • Structured Content View
        • Workflow Entry
      • Check-in
        • Check-in
      • Communication
        • Chat View
        • Communication Entry
        • Communication List Subscribe
        • Communication View
        • SMS Conversation List
        • SMS Conversation
      • Connection
        • Add Connection Request
        • Connection Type List
        • Connection Opportunity List
        • Connection Request List
        • Connection Request Detail
      • Core
        • Attribute Values
        • Notes
        • Search
        • Smart Search
        • Quick Note
        • My Notes
      • CRM
        • Group Members
        • Person Profile
      • Events
        • Live Experience Occurrences
        • Live Experience
        • Calendar Event Item Occurrence View
        • Calendar Event List
        • Calendar View
        • Event Item Occurrence List By Audience Lava
      • Finance
        • Giving
        • Scheduled Transaction List
        • Transaction Detail
        • Transaction List
      • Groups
        • Group Attendance Entry
        • Group Edit
        • Group Finder
        • Group Member Edit
        • Group Member List
        • Group Member View
        • Group Registration
        • Group View
        • Schedule Preference
        • Schedule Sign Up
        • Schedule Toolbox
        • Schedule Unavailability
      • Prayer
        • Answer To Prayer
        • My Prayer Requests
        • Prayer Card View
        • Prayer Request Details
        • Prayer Session
        • Prayer Session Setup
      • Reminders
        • Reminder Edit
        • Reminder List
        • Reminder Dashboard
      • Security
        • Onboard Person
    • Codex
      • Application Strategy
      • XAML Styling
      • Resources
      • Documentation
    • Commands
      • Communication Commands
      • Navigation Commands
      • Media Commands
      • Utility Commands
    • Controls
      • Behaviors
        • Event To Command Behavior
        • Touch Behavior
      • Content Controls
        • Activity Indicator
        • Application Info
        • Avatar
        • Bible Audio
        • Bible Browser
        • Bible Reader
        • Campus Context Picker
          • Camera Code Reader
        • Cards
          • Block Card
          • Contained Card
          • Inline Card
          • Elements of a Card
          • Masks
          • Styling Cards With CSS
        • Context Menu
        • Countdown
        • Cover Sheet
        • Divider
        • Expander
        • Field Container
        • Flip View
        • Following Icon
        • Geo Boundary View
        • Gradient Label
        • HTML
        • Icon
        • Icon Button
        • Image
        • Interaction
        • Items Collection
        • Login Status
        • Login Status Photo
        • Lottie View
        • Markdown
        • Media Player
          • Legacy
        • Notification Box
        • Paragraph Text
        • QR Code
        • Ratio View
        • Redirect
        • Responsive Column
        • Responsive Layout
        • Scroll View
        • Segment Picker
        • Styled Border
        • Styled View
        • Tag
        • Toggle Button
        • Web View
      • Developer Controls
        • Execute Command
        • Bible Book And Chapter Picker
        • Command Reference
        • Field Stack
        • Media Cast Button
        • Media Progress Bar
        • Parameter
        • Scan Code
        • Validator
        • Volume Control
        • Zone
      • Effects
        • Blur Effect
        • Safe Area Padding Effect
      • Form Fields
        • Attribute Value Editor
        • Address
        • Campus Picker
        • Check Box
        • Check Box List
        • Currency Box
        • Date Picker
        • Email Box
        • Literal
        • Marital Status Picker
        • Multi Picker
        • Number Box
        • Phone Number Box
        • Picker
        • Text Box
        • Text Editor
      • XAML Extensions
        • Boolean Value Converter
        • From Json
        • Inverse Boolean Converter
        • Nullable Guid Converter
        • On Device Platform
        • On Device Type
        • Palette Color
        • Seconds To Time String Converter
    • Field Types
    • Lava
      • Context in Lava
    • Performance
    • Tips and Tricks
      • Custom Site Attributes
      • Migrating to .NET MAUI (V6)
      • Page Anchors
    • Troubleshooting
    • Advanced Topics
      • Dynamic Content
      • Deep Linking
      • Proximity Attendance
  • 🎨Styling
    • Introduction
    • Style Guide
      • Walkthrough
      • Colors
      • Typography
      • Utilities
      • Shell Components
      • Migrating
    • Legacy
      • Colors
      • Borders
        • Border Color
        • Border Radius
        • Border Width
      • Text
        • Background Color
        • Text Size
        • Alignment
        • Color
        • Line Height
        • Weights & Styles
      • iOS Shadows
      • Styling Components
        • Tags
        • Bible
        • Button
        • Form Fields
        • Modals
      • Custom CSS
  • 👨‍💻Developers
    • Fundamentals
    • Core & Shell Dependencies
    • Custom Blocks
    • OS Version Requirements
  • 🏭App Factory
    • Overview
    • Android Keystore
    • App Store Product Page
    • Developer Accounts
    • Image Resources
    • In-App Giving
    • Publishing Requirements
    • Push Notifications
    • Rock Logins
    • Shell Update Requirements
Powered by GitBook

Resources

  • Release Notes
  • Community Chat
  • Ask Chip

Documentation

  • Rock Manuals
  • Lava

⚙️ Powered by Rock RMS

On this page
  • Named Sizes
  • Body Text
  • Generic Scaling
  • Heading Sizes
Export as PDF
  1. Styling
  2. Legacy
  3. Text

Text Size

Last updated 10 months ago

Applies to: , , , , , , , ,

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.

Class

iOS

Android

.text

16

14

.text-xs

11

10

.text-sm

13

14

.text-md

16

17

.text-lg

20

22

.text-body

17

16

.text-title

28

24

.text-subtitle

22

16

.text-caption

12

12

These classes correspond to 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.

Class

iOS

Android

.body

16

14

.body-micro

11

10

.body-small

13

14

.body-large

20

22

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.

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.

Class

Property

.h1

27

.h2

20

.h3

18

.h4

16

.h5

14

.h6

14

For further clarity on this CSS function within the Rock Mobile Shell, please visit

🎨
Button
DatePicker
Editor
Entry
Label
Picker
SearchBar
TimePicker
Span
Named Font Sizes
Shell CSS Functions