Texts & TypographyFree ComponentiOS 16.0+Xcode 15+

Text System Serif Variants

Showcase of New York serif typography for editorial and reading experiences.

Download in Compot App Browse all Texts & Typography

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies

textSystemSerifVariant.swift

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