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

1struct ConversationView: View {
2    var body: some View {
3        VStack(alignment: .leading, spacing: 16) {
4            // Conversation title
5            Text("Chat with AI Assistant")
6                .font(AgentforceTheme.Fonts.titlesScale4Regular)
7                .foregroundColor(AgentforceTheme.Colors.onSurface1)
8
9            // Message content
10            Text("How can I help you today?")
11                .font(AgentforceTheme.Fonts.bodyScaleBaseRegular)
12                .foregroundColor(AgentforceTheme.Colors.onSurface2)
13
14            // Timestamp
15            Text("2:30 PM")
16                .font(AgentforceTheme.Fonts.bodyScaleNeg1Regular)
17                .foregroundColor(AgentforceTheme.Colors.onSurface3)
18        }
19    }
20}

Hierarchical Content

1struct WelcomeScreen: View {
2    var body: some View {
3        VStack(spacing: 24) {
4            // Hero title
5            Text("Welcome to Agentforce")
6                .font(AgentforceTheme.Fonts.displayScale7Light)
7                .multilineTextAlignment(.center)
8
9            // Subtitle
10            Text("AI-Powered Conversations")
11                .font(AgentforceTheme.Fonts.titlesScale3Semibold)
12
13            // Description
14            Text("Experience intelligent conversations with our advanced AI assistant designed to help you accomplish your goals efficiently.")
15                .font(AgentforceTheme.Fonts.bodyScale1Regular)
16                .multilineTextAlignment(.center)
17
18            // Call to action
19            Button("Get Started") {
20                // Action
21            }
22            .font(AgentforceTheme.Fonts.bodyScaleBaseSemibold)
23        }
24        .padding()
25    }
26}

Form and Input Typography

1struct InputForm: View {
2    @State private var inputText = ""
3
4    var body: some View {
5        VStack(alignment: .leading, spacing: 8) {
6            // Field label
7            Text("Your Message")
8                .font(AgentforceTheme.Fonts.bodyScaleBaseSemibold)
9                .foregroundColor(AgentforceTheme.Colors.onSurface1)
10
11            // Input field
12            TextField("Type your message here...", text: $inputText)
13                .font(AgentforceTheme.Fonts.bodyScaleBaseRegular)
14                .padding()
15                .background(AgentforceTheme.Colors.surfaceContainer1)
16
17            // Helper text
18            Text("Press Enter to send")
19                .font(AgentforceTheme.Fonts.bodyScaleNeg1Regular)
20                .foregroundColor(AgentforceTheme.Colors.onSurface3)
21        }
22    }
23}

Status and Feedback Typography

1struct StatusMessage: View {
2    let type: MessageType
3    let text: String
4
5    var body: some View {
6        HStack {
7            statusIcon
8
9            Text(text)
10                .font(fontForType(type))
11                .foregroundColor(colorForType(type))
12        }
13    }
14
15    private func fontForType(_ type: MessageType) -> Font {
16        switch type {
17        case .error:
18            return AgentforceTheme.Fonts.bodyScaleBaseSemibold
19        case .success:
20            return AgentforceTheme.Fonts.bodyScaleBaseRegular
21        case .info:
22            return AgentforceTheme.Fonts.bodyScaleNeg1Regular
23        }
24    }
25}

Typography Best Practices

Guidelines for effective typography implementation and accessibility.

Hierarchy Guidelines

Display Text: Use for hero content and primary branding
Title Text: Use for section headers and primary navigation
Body Text: Use for content, messages, and descriptions
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.