--- schema_version: "1" id: cc87b81d251c207c96fcc5ba154ec6b1d22d87f3f458c509402d2f395e7a7712 title: Typography and Fonts collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/genai/agentforce-mobile-sdk/references/ios/typography-and-fonts-ios.md canonical_url: https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/typography-and-fonts-ios.html source_site: developer.salesforce.com content_type: documentation content_hash: ce823c101272ac91b7d359ae15a01636e3a71aa40656e148848ae290e8300a6b products: - Agentforce Mobile SDK - Agentforce and Einstein Generative AI --- # Typography and Fonts Comprehensive typography system for iOS Agentforce components with multiple scales, weights, and semantic usage patterns. ## Overview The `AgentforceTheme.Fonts` protocol provides a sophisticated typography system designed for conversational AI interfaces. The system includes multiple font scales, weights, and semantic usage patterns optimized for readability and hierarchy. ## Font Scale System The typography system provides multiple text scales and weights for creating clear information hierarchy. ### Body Text Styles Base text styles for content and conversational text: | Property | Type | Description | | ----------------------- | ---- | ------------------------------- | | `bodyScaleBaseRegular` | Font | Base body text, regular weight | | `bodyScaleBaseSemibold` | Font | Base body text, semibold weight | | `bodyScaleBaseBold` | Font | Base body text, bold weight | ### Scaled Body Text Larger text styles for emphasis and improved readability: | Property | Type | Description | | -------------------- | ---- | -------------------------------------- | | `bodyScale1Regular` | Font | Larger body text, regular weight | | `bodyScale1Semibold` | Font | Larger body text, semibold weight | | `bodyScale1Bold` | Font | Larger body text, bold weight | | `bodyScale2Regular` | Font | Even larger body text, regular weight | | `bodyScale2Semibold` | Font | Even larger body text, semibold weight | | `bodyScale2Bold` | Font | Even larger body text, bold weight | ### Smaller Text Styles Compact text for secondary information and captions: | Property | Type | Description | | ----------------------- | ---- | --------------------------------------- | | `bodyScaleNeg1Regular` | Font | Smaller body text, regular weight | | `bodyScaleNeg1Semibold` | Font | Smaller body text, semibold weight | | `bodyScaleNeg1Bold` | Font | Smaller body text, bold weight | | `bodyScaleNeg2Regular` | Font | Even smaller body text, regular weight | | `bodyScaleNeg2Semibold` | Font | Even smaller body text, semibold weight | | `bodyScaleNeg2Bold` | Font | Even smaller body text, bold weight | ### Title Text Styles Heading styles for interface hierarchy: | Property | Type | Description | | ---------------------- | ---- | ---------------------------------- | | `titlesScale3Regular` | Font | Medium titles, regular weight | | `titlesScale3Semibold` | Font | Medium titles, semibold weight | | `titlesScale4Regular` | Font | Large titles, regular weight | | `titlesScale5Regular` | Font | Extra large titles, regular weight | | `titlesScale6Regular` | Font | Largest titles, regular weight | ### Display Text Styles Large format text for hero content and branding: | Property | Type | Description | | -------------------- | ---- | ---------------------------------- | | `displayScale7Light` | Font | Large display text, light weight | | `displayScale8Light` | Font | Largest display text, light weight | ## Usage Patterns Common implementation patterns for applying typography in different interface contexts. ### Conversation Interface Typography ```swift struct ConversationView: View { var body: some View { VStack(alignment: .leading, spacing: 16) { // Conversation title Text("Chat with AI Assistant") .font(AgentforceTheme.Fonts.titlesScale4Regular) .foregroundColor(AgentforceTheme.Colors.onSurface1) // Message content Text("How can I help you today?") .font(AgentforceTheme.Fonts.bodyScaleBaseRegular) .foregroundColor(AgentforceTheme.Colors.onSurface2) // Timestamp Text("2:30 PM") .font(AgentforceTheme.Fonts.bodyScaleNeg1Regular) .foregroundColor(AgentforceTheme.Colors.onSurface3) } } } ``` ### Hierarchical Content ```swift struct WelcomeScreen: View { var body: some View { VStack(spacing: 24) { // Hero title Text("Welcome to Agentforce") .font(AgentforceTheme.Fonts.displayScale7Light) .multilineTextAlignment(.center) // Subtitle Text("AI-Powered Conversations") .font(AgentforceTheme.Fonts.titlesScale3Semibold) // Description Text("Experience intelligent conversations with our advanced AI assistant designed to help you accomplish your goals efficiently.") .font(AgentforceTheme.Fonts.bodyScale1Regular) .multilineTextAlignment(.center) // Call to action Button("Get Started") { // Action } .font(AgentforceTheme.Fonts.bodyScaleBaseSemibold) } .padding() } } ``` ### Form and Input Typography ```swift struct InputForm: View { @State private var inputText = "" var body: some View { VStack(alignment: .leading, spacing: 8) { // Field label Text("Your Message") .font(AgentforceTheme.Fonts.bodyScaleBaseSemibold) .foregroundColor(AgentforceTheme.Colors.onSurface1) // Input field TextField("Type your message here...", text: $inputText) .font(AgentforceTheme.Fonts.bodyScaleBaseRegular) .padding() .background(AgentforceTheme.Colors.surfaceContainer1) // Helper text Text("Press Enter to send") .font(AgentforceTheme.Fonts.bodyScaleNeg1Regular) .foregroundColor(AgentforceTheme.Colors.onSurface3) } } } ``` ### Status and Feedback Typography ```swift struct StatusMessage: View { let type: MessageType let text: String var body: some View { HStack { statusIcon Text(text) .font(fontForType(type)) .foregroundColor(colorForType(type)) } } private func fontForType(_ type: MessageType) -> Font { switch type { case .error: return AgentforceTheme.Fonts.bodyScaleBaseSemibold case .success: return AgentforceTheme.Fonts.bodyScaleBaseRegular case .info: return AgentforceTheme.Fonts.bodyScaleNeg1Regular } } } ``` ## Typography Best Practices Guidelines for effective typography implementation and accessibility. ### Hierarchy Guidelines 1. **Display Text**: Use for hero content and primary branding 2. **Title Text**: Use for section headers and primary navigation 3. **Body Text**: Use for content, messages, and descriptions 4. **Small Text**: Use for metadata, timestamps, and secondary information ### Weight Usage - **Light**: For large display text and elegant headers - **Regular**: For body content and standard text - **Semibold**: For emphasis and important labels - **Bold**: For strong emphasis and critical information ### Accessibility Considerations - All font sizes meet minimum accessibility requirements - Text scales appropriately with system accessibility settings - Sufficient contrast maintained across all text styles - Consider user's Dynamic Type preferences For custom font implementation examples, see the [iOS SDK Developer Guide](/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-ios.html#typography-customization). ## See Also - Typography is the only supported customization option for Agentforce Mobile SDK theming - [AgentforceClient](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-client-ios.md) - Client configuration with theming support