SwiftUI Bootcamp: #1 Text

5 min readJul 30, 2024

Just a quick note: I’m focused solely on results and don’t want to drag things out. Here’s the code and its equivalent. Let’s move quickly. Open Xcode and try it yourself.

I will delve into every possible detail about Text here. However, we will have to leave some features of Text for the coming days. Rest assured, I will explain step by step what Text is in SwiftUI, its purpose, and philosophy in every detail.

Text aims to display a piece of text on the screen as a View. However, it has several features. We can customize Text. Let’s now look at all the details step by step on how to do this.

String Case

There are numerous topics here, all pertaining to Strings in the Swift language. I highly recommend reading “Swift Bootcamp: #3 String and Characters” In this article, you’ll find a section titled “String Version and Arrangement” Make sure to give it a read.

 Text("iOS Roadmap".lowercased())

Padding

Padding refers to the space between an element’s content and its border, used to create a buffer around the content. For example, padding is utilized to distance the text within a button from its edges. There are numerous ways to adjust padding. I will mention these as a BONUS at the end.

Text("iOS Roadmap".lowercased())
    .padding(12)

Line Limit

The lineLimit modifier constrains the number of lines displayed by a Text view, preventing it from expanding indefinitely. By setting a value, such as lineLimit(2), the text will truncate or wrap to fit within the specified number of lines, ensuring the layout remains compact and controlled.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)

Minimum Scale Factor

minimumScaleFactor is a modifier in SwiftUI that allows you to adjust the scaling of text when it doesn't fit within its available space. When you apply this modifier, the text will scale down (reduce its font size) until it fits or until it reaches the minimum scale factor you specify. This is particularly useful for ensuring that text remains visible and readable even when the available space is limited.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)

Multiline Text Alignment

multilineTextAlignment is a property in SwiftUI that determines the alignment of text within a multi-line text view, such as left, center, or right. It allows developers to control how text is aligned across multiple lines within a view, enhancing the readability and visual structure of the text content.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)

Font

The font modifier is used to specify the font style and size for text elements. It allows developers to customize the appearance of text by applying predefined font styles like .title, .headline, or specifying custom fonts and sizes to achieve the desired look and feel for the user interface.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)

Font Weight

The fontWeight modifier is used to adjust the thickness of the text. It allows developers to set the weight of a font, such as .light, .regular, .bold, etc., providing control over the visual emphasis and hierarchy of the text within the user interface.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)

Font Design

The fontDesign modifier is used to apply a specific design style to a font, such as .default, .monospaced, .rounded, or .serif. This modifier helps to give text a particular aesthetic and can be used to match the overall design theme of the application.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)

Baseline Offset

The baselineOffset modifier is used to adjust the vertical position of text relative to its baseline. By applying a positive or negative offset, developers can fine-tune the alignment of text within a view, which is useful for creating precise and visually appealing layouts.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)

Kerning

The kerning modifier is used to adjust the spacing between characters in a text. By specifying a positive or negative value, developers can increase or decrease the space between characters, which can enhance readability or achieve a specific visual style in the text layout.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)

Line Spacing

The lineSpacing modifier is used to set the space between lines of text within a multi-line text view. By specifying a value, developers can control the amount of space added between each line, improving readability and the overall appearance of the text.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)

Foreground Style

foregroundStyle is used to set the foreground color of a view. This includes text, shapes, and other elements where the color affects the "foreground" content. It can be applied to single colors, gradients, or other types of styles.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)
    .foregroundStyle(Color.red)

Background

background is used to set the background color or style for a view. This can be applied to any view to give it a colored or styled background.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)
    .foregroundStyle(Color.red)
    .background(Color.gray.opacity(0.5))

Style

Additionally, there are various text modifiers available, each with distinct features.

.bold makes the entire text bold.
.italic formats the entire text in italics.
.underline underlines the text. It also allows customization, enabling us to toggle it on and off and choose the color of the underline.
.strikethrough draws a line through the middle of the text and is also customizable.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)
    .foregroundStyle(Color.red)
    .background(Color.gray.opacity(0.5))
    .italic()

Margin

Margin is actually a well-accepted term in design. In SwiftUI, we will continue to use padding, but what we are doing is essentially margin.

Margin refers to the space between an element’s outer border and the surrounding elements. It is used to create space between elements or to distance an element from its neighbors.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)
    .foregroundStyle(Color.red)
    .background(Color.gray.opacity(0.5))
    .italic()
    .padding(24)

Overall Background Color

When writing declarative code, we often specify padding and margin separately, which can lead to the need to change the background color of the entire view rather than just the background of a Text component. This is a natural result of writing declarative code and is commonly encountered in modern frameworks like SwiftUI.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)
    .foregroundStyle(Color.red)
    .background(Color.gray.opacity(0.5))
    .italic()
    .padding(24)
    .background(Color.blue.opacity(0.3))

Border

A border is a visual element that outlines a component or view, providing a visible boundary around it. In SwiftUI, you can add a border to a view to enhance its appearance or to highlight it. A border typically consists of a color and a width.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)
    .foregroundStyle(Color.red)
    .background(Color.gray.opacity(0.5))
    .italic()
    .padding(24)
    .background(Color.blue.opacity(0.3))
    .border(Color.green, width: 2)

Frame

The .frame(width:height:) modifier is used to set the width and height of a view. This modifier adjusts the size of the view to the specified dimensions, controlling how the content appears within a defined space. For example, Text("Hello World").frame(width: 100, height: 50) places the "Hello World" text within a frame that is 100 points wide and 50 points high.

Text("iOS Roadmap".lowercased())
    .padding(12)
    .lineLimit(2)
    .minimumScaleFactor(0.5)
    .multilineTextAlignment(.leading)
    .font(.headline)
    .fontWeight(.semibold)
    .fontDesign(.monospaced)
    .baselineOffset(12)
    .kerning(6)
    .lineSpacing(12)
    .foregroundStyle(Color.red)
    .background(Color.gray.opacity(0.5))
    .italic()
    .padding(24)
    .background(Color.blue.opacity(0.3))
    .border(Color.green, width: 2)
    .frame(width: 200, height: 150)