.kerning()
Published Mar 5, 2023
Contribute to Docs
The .kerning()
modifier adjusts the spacing size between text characters in a view.
Syntax
Text("This text will have kerning applied.")
.kerning(amount)
The .kerning()
modifier offsets text character spacing by the amount
(in points) and is applied to all text in the text view. The amount
parameter is a float value. A positive value will increase the spacing size and a negative value will decrease it. A value of 0
will set the default text character spacing.
Example
The following example creates some kerned text:
import SwiftUIstruct KerningView: View {var body: some View {VStack {Text("SQUASHED TEXT").kerning(-5)Text("NORMAL TEXT").kerning(0)Text("STRETCHED TEXT").kerning(5)}.font(.largeTitle)}}
In the above example, the .kerning()
modifier is called on three text views, contained in a VStack
:
- In the first, the kerning value is set to
-5
, decreasing the spacing between the characters by-5
points. - In the second, the kerning value is set to
0
, applying the default spacing and so the text will not be affected. - In the third, the kerning value is set to
5
, increasing the spacing between the characters by5
points.
This will display:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn SwiftUI on Codecademy
- Skill path
Build iOS Apps with SwiftUI
Learn how to build iOS applications with Swift and SwiftUI and publish them to Apples' App Store.Includes 7 CoursesWith CertificateBeginner Friendly13 hours - Free course
Learn Swift
A powerful programming language developed by Apple for iOS, macOS, and more.Beginner Friendly12 hours