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:

PropertyTypeDescription
bodyScaleBaseRegularFontBase body text, regular weight
bodyScaleBaseSemiboldFontBase body text, semibold weight
bodyScaleBaseBoldFontBase body text, bold weight

Scaled Body Text 

Larger text styles for emphasis and improved readability:

PropertyTypeDescription
bodyScale1RegularFontLarger body text, regular weight
bodyScale1SemiboldFontLarger body text, semibold weight
bodyScale1BoldFontLarger body text, bold weight
bodyScale2RegularFontEven larger body text, regular weight
bodyScale2SemiboldFontEven larger body text, semibold weight
bodyScale2BoldFontEven larger body text, bold weight

Smaller Text Styles 

Compact text for secondary information and captions:

PropertyTypeDescription
bodyScaleNeg1RegularFontSmaller body text, regular weight
bodyScaleNeg1SemiboldFontSmaller body text, semibold weight
bodyScaleNeg1BoldFontSmaller body text, bold weight
bodyScaleNeg2RegularFontEven smaller body text, regular weight
bodyScaleNeg2SemiboldFontEven smaller body text, semibold weight
bodyScaleNeg2BoldFontEven smaller body text, bold weight

Title Text Styles 

Heading styles for interface hierarchy:

PropertyTypeDescription
titlesScale3RegularFontMedium titles, regular weight
titlesScale3SemiboldFontMedium titles, semibold weight
titlesScale4RegularFontLarge titles, regular weight
titlesScale5RegularFontExtra large titles, regular weight
titlesScale6RegularFontLargest titles, regular weight

Display Text Styles 

Large format text for hero content and branding:

PropertyTypeDescription
displayScale7LightFontLarge display text, light weight
displayScale8LightFontLargest display text, light weight

Usage Patterns 

Common implementation patterns for applying typography in different interface contexts.

Conversation Interface Typography 

 
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 

 
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 

 
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 

 
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.

See Also 
  • Typography is the only supported customization option for Agentforce Mobile SDK theming
  • AgentforceClient - Client configuration with theming support