Texts & TypographyFree ComponentiOS 16.0+Xcode 15+

Text System Default Variants

Showcase of standard San Francisco system font weights and designs.

Download in Compot App Browse all Texts & Typography

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies

textSystemDefaultVariant.swift

HStack(spacing: 16) {
    VStack(alignment: .trailing) {
        Text("Default")
            .font(.system(size: 14, weight: .medium, design: .default))
        Text("Upright")
            .font(.system(size: 14, weight: .medium, design: .default))
            .padding(.bottom, 4)
        VStack(alignment: .trailing, spacing: 4) {
            Text("Text")
                .font(.system(size: 17, weight: .ultraLight, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .thin, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .light, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .regular, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .medium, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .semibold, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .bold, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .heavy, design: .default))
            Text("Text")
                .font(.system(size: 17, weight: .black, design: .default))
        }
    }
    VStack(alignment: .trailing) {
        Text("Default")
            .font(.system(size: 14, weight: .medium, design: .default))
        Text("Italic")
            .font(.system(size: 14, weight: .medium, design: .default))
            .padding(.bottom, 4)
        VStack(alignment: .trailing, spacing: 4) {
            Text("Text")
                .font(.system(size: 17, weight: .ultraLight, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .thin, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .light, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .regular, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .medium, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .semibold, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .bold, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .heavy, design: .default))
                .italic()
            Text("Text")
                .font(.system(size: 17, weight: .black, design: .default))
                .italic()
        }
    }
}