Fonts, Weight & Color
Style text with font, fontWeight, and foregroundStyle.
Fonts, Weight & Color is a free SwiftUI Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Styling Starts Here
A plain Text view shows words, but real apps style them. In this lesson you will set font, weight, and color to make text feel intentional. 🎨
The font Modifier
The font modifier picks a text style. Apple ships semantic sizes like title, headline, and body that adapt to the user automatically.
Text("Welcome")
.font(.title)Semantic Font Styles
Prefer semantic styles over fixed point sizes. Names like .largeTitle and .caption scale with the device and the user accessibility settings.
Text("Big").font(.largeTitle)
Text("Small").font(.caption)Custom Point Sizes
Need an exact size? Pass .system(size:) with a number. It is handy for logos, but semantic styles are better for body text.
Text("Logo")
.font(.system(size: 40))Adding Weight
The fontWeight modifier sets how thick the strokes look. Try .bold for emphasis or .light for a softer, airier feel.
Text("Strong")
.fontWeight(.bold)Weight Inside font
You can also bake the weight right into the font call. This keeps related styling in one tidy place.
Text("Heavy")
.font(.title.weight(.heavy))Coloring Text
Use foregroundStyle to color text. Pass a Color like .red or a brand color, and the words pick up that tint instantly.
Text("Alert")
.foregroundStyle(.red)Semantic Colors
Reach for semantic colors like .primary and .secondary. They adapt to light and dark mode so your text stays readable everywhere.
Text("Hint")
.foregroundStyle(.secondary)Italic and Bold Shortcuts
SwiftUI offers quick toggles: .bold() and .italic(). They read cleanly and skip the longer modifier names.
Text("Note")
.bold()
.italic()Chaining Modifiers
Modifiers stack top to bottom. Combine font, weight, and color on one Text to shape its full look in a single chain.
Text("Title")
.font(.title)
.bold()
.foregroundStyle(.blue)Order Can Matter
Most text modifiers commute, but order matters once layout enters. Keep styling first, then add padding or background later.
Quick Check
Which modifier sets the text color?
Lesson Recap
You styled text with font, fontWeight, and foregroundStyle. Lean on semantic styles and colors so your UI adapts beautifully. ✨
Frequently asked questions
Is the “Fonts, Weight & Color” lesson free?
Yes — the full text of “Fonts, Weight & Color” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Fonts, Weight & Color”?
Style text with font, fontWeight, and foregroundStyle. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Fonts, Weight & Color” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Fonts, Weight & Color
- Multiline Text & Alignment
- Loading Images from Assets
- Using SF Symbols