NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

How to style text views with fonts, colors, line spacing, and more

Paul Hudson    @twostraws   

Updated for Xcode 14.2

Not only do text views give us a predictably wide range of control in terms of how they look, they are also designed to work seamlessly alongside core Apple technologies such as Dynamic Type.

By default a Text view has a “Body” Dynamic Type style, but you can select from other sizes and weights by calling .font() on it like this:

Text("This is an extremely long text string that will never fit even the widest of phones without wrapping")
    .font(.largeTitle)
    .frame(width: 300)

Download this as an Xcode project

A very long sentence wrapped across multiple lines.

We can control the color of text using the .foregroundColor() modifier, like this:

Text("The best laid plans")
    .foregroundColor(.red)

Download this as an Xcode project

The words “The best laid plans” in red text

For more complex text coloring, e.g. using a gradient, you should use foregroundStyle() like this:

Text("The best laid plans")
    .foregroundStyle(.blue.gradient)

Download this as an Xcode project

You can also set the background color, but that uses .background() because it’s possible to use more advanced backgrounds than just a flat color. Anyway, to give our layout a yellow background color we would add this:

Text("The best laid plans")
    .padding()    
    .background(.yellow)
    .foregroundColor(.white)
    .font(.headline)

Download this as an Xcode project

The words “The best laid plans” in white text over a rectangular dark yellow background

Tip: You might wonder why foregroundColor() has color in the name, whereas background() does not. This is because SwiftUI lets us recolor text however we want, but it must always be a simple color, whereas you can place any kind of view in the background – a color, yes, but also a shape, some other text, and more.

There are even more options. For example, we can adjust the line spacing in our text. The default value is 0, which means there is no extra line spacing applied, but you can also specify position values to add extra spacing between lines:

Text("This is an extremely long text string that will never fit even the widest of phones without wrapping")
    .font(.largeTitle)
    .lineSpacing(50)
    .frame(width: 300)

Download this as an Xcode project

A very long sentence with multiple widely spaced lines.

You can also use the fontDesign() modifier to adjust only the style of the font without also adjusting its size, like this:

Text("Hello, world!")
    .fontDesign(.serif)

Download this as an Xcode project

Or use the fontWidth() modifier to compress or expand the font, like this:

Text("Hello, world!")
    .fontWidth(.condensed)

Download this as an Xcode project

Note: You will find that fontWidth() only works with fonts that have been designed to support it. If your font hasn’t been designed with font width in mind, you’ll just get the default width.

Hacking with Swift is sponsored by Essential Developer

SPONSORED From March 20th to 26th, you can join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer!

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Similar solutions…

BUY OUR BOOKS
Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.6/5

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.