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:

Scaled Body Text

Larger text styles for emphasis and improved readability:

Smaller Text Styles

Compact text for secondary information and captions:

Title Text Styles

Heading styles for interface hierarchy:

Display Text Styles

Large format text for hero content and branding:

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