Typography

Leverage typography to ensure your design and content are presented consistently.

The Typography view is a flexible component designed to streamline the use of fonts across your SwiftUI application. It leverages a Theme provided through SwiftUI's environment to apply consistent font styles and colors. This approach offers an elegant solution to applying font styles without hardcoding font details throughout your app.

The Typography component adheres to the default Apple .system font, offering a curated selection of type sizes designed to harmonize and create a consistent layout. However, customization is straightforward with the provided theme component, allowing for easy adjustments to the font to better suit your specific design needs.

Overview

The Typography view allows for text presentation with two primary customization paths:

1. By TextStyle: Utilizes predefined styles from the Theme environment object. This method is beneficial for maintaining consistency and simplifying theme adjustments.
2. By Custom Font: Allows for explicit font specification, bypassing the theme's typography system. This method offers flexibility for exceptional cases where the predefined styles do not meet requirements.

Initialization

The Typography view can be initialized in one of two ways:

1. Using TextStyle: This initializer sets the text to be displayed and applies a font style defined by the TextStyle enum.

init(_ text: String, style: TextStyle = .body)

2. Using a Custom Font: This initializer sets the text to be displayed and applies a custom font directly.

init(_ text: String, font: Font)

Example

struct ContentView: View {
    var body: some View {
        VStack {
            Typography("Hello, world!", style: .title1)
            Typography("This is a custom font text.", font: .custom("Helvetica Neue", size: 16))
        }
    }
}

Preview

To preview the Typography view in Xcode's canvas: