Implementing Custom System Font Sizes in SwiftUI: Methods and Best Practices

Overview of SwiftUI Font System

In SwiftUI development, font management is a core element of building user interfaces. Apple's San Francisco font system, as the standard font for iOS, macOS, and other platforms, provides excellent readability and design consistency. However, developers often encounter confusion when customizing font sizes, particularly when attempting to use specific font variant names.

Problem Analysis and Common Misconceptions

From the provided Q&A data, it can be seen that the developer initially attempted to set a font of specific size by creating a custom font extension:

extension Font {
    static var primaryButton: Font {
        return Font.custom("SFUIDisplay-Light", size: 21)
    }
}

The fundamental reason this approach failed lies in the accuracy of the font name. The San Francisco font system has multiple variants across different platforms and devices, such as SF Pro, SF Compact, etc., each with different weights (Regular, Light, Bold, etc.). Directly using guessed font names often leads to failure because the system may not be able to find the corresponding font resources.

Correct Method for Setting System Font Size

According to the guidance from the best answer, the standard method for setting system font size is using the .system(size:) modifier:

.font(.system(size: 60))

This method offers several advantages:

1. Cross-platform Consistency: Automatically uses the current platform's system font, ensuring consistent visual style across different devices
2. Dynamic Type Support: Compatible with the system's dynamic font scaling functionality, supporting accessibility settings
3. Simplified Configuration: No need to worry about specific font names, reducing configuration errors

Code Implementation and Best Practices

In actual development, it is recommended to adopt the following pattern for managing custom font sizes:

// Define font size constants
enum FontSize {
    static let largeTitle: CGFloat = 34
    static let title: CGFloat = 28
    static let body: CGFloat = 17
    static let caption: CGFloat = 12
}

// Use system font
Text("Hello, World!")
    .font(.system(size: FontSize.title))
    .foregroundColor(.primary)

Advanced Font Configuration Techniques

For scenarios requiring finer control, SwiftUI provides additional configuration options:

// Set system font with specific weight
.font(.system(size: 21, weight: .medium))

// Set font style and design
.font(.system(.body, design: .rounded))

// Combine with dynamic type
.font(.system(size: 21))
    .environment(\.sizeCategory, .accessibilityLarge)

Font Name Verification Method

If it is indeed necessary to use custom font names, available fonts can be verified through the following code:

for family in UIFont.familyNames {
    print("Family: \(family)")
    for name in UIFont.fontNames(forFamilyName: family) {
        print("  - \(name)")
    }
}

Performance and Compatibility Considerations

Using the .system(size:) method not only ensures correctness but also brings performance advantages:

• Memory Efficiency: Reuses system font instances, reducing memory usage
• Rendering Optimization: Leverages system-level font rendering optimizations
• Backward Compatibility: Ensures compatibility across different iOS versions

Conclusion

When setting custom font sizes in SwiftUI, prioritizing the use of the .system(size:) method is a proven best practice. This approach avoids the complexity of font names, ensures cross-platform consistency, and perfectly integrates with the system's dynamic type functionality. For most application scenarios, this method provides the simplest and most reliable solution.