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

TextSystemDefaultVariants.swift

import SwiftUI

struct TextSystemDefaultVariants: View {
    var body: some View {
        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()
                }
            }
        }
    }
}

#Preview {
    TextSystemDefaultVariants()
}