Typography

These modifiers shape how text is drawn. font, fontWeight, and fontDesign choose the typeface, weight, and variant. bold, italic, monospaced, strikethrough, and underline are convenience toggles for common styles and decorations. tracking and lineSpacing adjust spacing between letters and lines. textCase transforms case at render time. lineLimit and multilineTextAlignment control how text wraps and aligns across multiple lines.

font

Sets the font for text content in a component.

.font(value?: TextStyle | number | CustomFont)

TextStyle | number | CustomFont

The font to apply. Can be:

A semantic text style name (e.g., "title", "body", "caption") — see TextStyle
A number for a custom point size using the system font
A CustomFont for a custom font family with a specific size

Semantic text style

Text("Title").font("title")

Text("Small text").font("caption")

Custom point size

Text("Custom size").font(24)

Custom font family

Text("Custom font").font(
    CustomFont({ url: "https://example.com/Inter.ttf", family: "Inter", size: 16 })
)

Combined with weight and design

Text("Styled")
    .font("title2")
    .fontWeight("semibold")
    .fontDesign("rounded")

fontWeight

Sets the font weight for text content.

.fontWeight(weight: FontWeight)

FontWeight

required

The font weight to apply. See FontWeight for available values (e.g., "ultraLight", "thin", "light", "regular", "medium", "semibold", "bold", "heavy", "black").

Semibold text

Text("Heading")
    .fontWeight("semibold")

Light text

Text("Subtitle")
    .fontWeight("light")

Combined with font style

Text("Heavy Title")
    .font("largeTitle")
    .fontWeight("heavy")

fontDesign

Sets the font design variant for text content.

.fontDesign(design: FontDesign)

FontDesign

required

The font design variant. See FontDesign for available values (e.g., "default", "rounded", "monospaced", "serif").

Rounded design

Text("Friendly text")
    .fontDesign("rounded")

Monospaced design

Text("let x = 42")
    .fontDesign("monospaced")

Serif design

Text("Elegant heading")
    .font("title")
    .fontDesign("serif")

bold

Makes text bold.

.bold(isActive?: boolean)

boolean

default:"true"

Whether bold is applied. Pass false to explicitly disable bold. Defaults to true.

Make text bold

Text("Important")
    .bold()

Conditionally bold

Text(item.title)
    .bold(item.isUnread)

Combined with other text modifiers

Text("Headline")
    .bold()
    .italic()
    .foregroundStyle(Color("blue"))

italic

Makes text italic.

.italic(isActive?: boolean): Component

boolean

default:"true"

Whether italic is applied. Pass false to explicitly disable italic.

Basic italic text

Text("Emphasis").italic()

Conditionally italic

const body = () => {
    const [isQuote, setIsQuote] = useState(true)

    return Text("To be or not to be")
        .italic(isQuote)
}

Combined with other typography modifiers

Text("Bold Italic")
    .bold()
    .italic()
    .font("title2")

strikethrough

Adds a strikethrough line to text.

.strikethrough(isActive?: boolean): Component

boolean

default:"true"

Whether the strikethrough is visible. Defaults to true. Pass false to remove.

Basic strikethrough

Text("Completed task")
    .strikethrough()

Conditional strikethrough

const body = () => {
    const [done, setDone] = useState(false)
    return Text("Buy groceries")
        .strikethrough(done)
        .onTapGesture(() => setDone(!done))
}

Sale price display

VStack({ alignment: "leading" }, [
    Text("$49.99")
        .strikethrough()
        .foregroundStyle(Color("gray")),
    Text("$29.99")
        .foregroundStyle(Color("red"))
        .bold(),
])

underline

Adds an underline to text.

.underline(isActive?: boolean): Component

boolean

default:"true"

Whether the underline is visible. Defaults to true. Pass false to remove.

Basic underline

Text("Underlined text")
    .underline()

Conditional underline

const body = () => {
    const [active, setActive] = useState(false)
    return Text("Toggle underline")
        .underline(active)
        .onTapGesture(() => setActive(!active))
}

Link-style text

Text("Learn more")
    .underline()
    .foregroundStyle(Color("blue"))

monospaced

Uses a monospaced font variant for text.

.monospaced(isActive?: boolean): Component

boolean

default:"true"

Whether to use the monospaced variant. Pass false to explicitly disable.

Code-style text

Text("let x = 42").monospaced()

Tabular numbers Useful for aligning numbers in columns, since each digit takes the same width.

VStack([
    Text("$1,234.56").monospaced(),
    Text("$   99.00").monospaced(),
    Text("$    5.50").monospaced()
])

Conditionally monospaced

const body = () => {
    const [isCode, setIsCode] = useState(false)

    return Text("Hello World")
        .monospaced(isCode)
}

tracking

Adjusts letter spacing in text.

.tracking(amount: MilliEm): Component

MilliEm

required

The letter spacing to add between characters. MilliEm is an alias for number, and every renderer applies the value as a length: points on iOS, CSS pixels on web, and sp on Android. Use positive values to increase spacing or negative values to tighten.

tracking does not scale with the font size. For example, tracking(4) adds 4pt of spacing between each character on iOS, the same as CSS letter-spacing: 4px on web. Wide letter spacing

Text("SPACED")
    .tracking(4)

Tight letter spacing

Text("Tight")
    .tracking(-1)

Heading with tracking

Text("FEATURED")
    .font("caption")
    .fontWeight("semibold")
    .tracking(2)
    .foregroundStyle(Color("gray"))
    .textCase("uppercase")

lineSpacing

Adjusts spacing between lines of text.

.lineSpacing(spacing: number): Component

number

required

The spacing between lines, in points. Higher values increase the gap between lines.

Increasing line spacing

Text("Line one\nLine two\nLine three")
    .lineSpacing(8)

Readability for long-form text

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
    .lineSpacing(6)
    .font("body")
    .frame({ maxWidth: 300 })

textCase

Transforms the text case of a component.

.textCase(case: TextCase): Component

TextCase

required

The text transformation to apply: "uppercase" or "lowercase".

Uppercase

Text("hello world")
    .textCase("uppercase")

Lowercase

Text("LOUD TEXT")
    .textCase("lowercase")

Section headers

VStack({ alignment: "leading", spacing: 8 }, [
    Text("Featured")
        .textCase("uppercase")
        .font("caption")
        .foregroundStyle(Color("gray"))
        .tracking(1),
    Text("Today's top picks")
        .font("title2"),
])

lineLimit

Limits text to a maximum number of lines with truncation.

.lineLimit(lines?: number): Component

number

The maximum number of lines to display. Excess text is truncated with an ellipsis. Pass undefined or omit to remove any line limit.

When text exceeds the line limit, it is truncated with an ellipsis (...) at the end. Passing undefined or omitting the argument removes any previously set line limit, allowing unlimited lines. Single-line text

Text("This is a very long piece of text that will be truncated")
    .lineLimit(1)

Two-line description

Text("A longer description that may wrap to a second line but will truncate after that with an ellipsis at the end.")
    .lineLimit(2)

Combined with minimum scale factor Allow text to shrink before truncating.

Text("Shrink then truncate")
    .lineLimit(1)
    .minimumScaleFactor(0.5)

multilineTextAlignment

Sets horizontal text alignment within the component’s frame.

.multilineTextAlignment(alignment: TextAlignment): Component

TextAlignment

required

The horizontal alignment for multi-line text. One of "leading", "center", or "trailing".

This modifier only affects text that wraps to multiple lines. Single-line text alignment is controlled by the parent container’s alignment or the .frame() alignment. The default alignment is "leading". Center-aligned text

Text("This is a longer piece of text that will wrap to multiple lines and be centered.")
    .multilineTextAlignment("center")
    .frame({ maxWidth: 250 })

Trailing-aligned text

Text("Right-aligned text\non multiple lines")
    .multilineTextAlignment("trailing")

Combined with frame alignment

Text("Centered text in a full-width frame")
    .multilineTextAlignment("center")
    .frame({ maxWidth: Infinity, alignment: "center" })

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

font

fontWeight

fontDesign

bold

italic

strikethrough

underline

monospaced

tracking

lineSpacing

textCase

lineLimit

multilineTextAlignment

See also

​font

​fontWeight

​fontDesign

​bold

​italic

​strikethrough

​underline

​monospaced

​tracking

​lineSpacing

​textCase

​lineLimit

​multilineTextAlignment

​See also

font

fontWeight

fontDesign

bold

italic

strikethrough

underline

monospaced

tracking

lineSpacing

textCase

lineLimit

multilineTextAlignment

See also