Texts & TypographyFree ComponentiOS 16.0+Xcode 15+

Text System Monospace Variants

Showcase of SF Mono typography for code, data, and numeric readouts.

Download in Compot App Browse all Texts & Typography

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies

textSystemMonoVariant.swift

HStack(spacing: 16) {
            VStack(alignment: .trailing) {
                Text("Mono")
                    .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: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .thin, design: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .light, design: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .regular, design: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .medium, design: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .semibold, design: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .bold, design: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .heavy, design: .monospaced))
                    Text("Text")
                        .font(.system(size: 17, weight: .black, design: .monospaced))
                }
            }
            VStack(alignment: .trailing) {
                Text("Mono")
                    .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: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .thin, design: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .light, design: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .regular, design: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .medium, design: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .semibold, design: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .bold, design: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .heavy, design: .monospaced))
                        .italic()
                    Text("Text")
                        .font(.system(size: 17, weight: .black, design: .monospaced))
                        .italic()
                }
            }
        }