How to Stylize Your Text in Swift UI!
When constructing your UI, more often than not you will want to need to stylize your Text objects in order to achieve the look you are going for within your application. Swift UI makes stylizing your fonts extremely easy! We will cover some of the different modifications you can easily use to create beautiful looking Text objects within your Swift UI application!
Font Types:
One of the first things that you may want to do when styling your fonts in Swift UI is to choose the type of font that you want. There are multiple different styles for fonts and some of the most commonly used ones are: title, headline, subheadline, body, callout, caption and footnote.
An example of each of these are listed below:
struct SomeView: View {
var body: some View {
VStack {
Text("Title").font(.title)
Text("Headline").font(.headline)
Text("Subheadline").font(.subheadline)
Text("Body").font(.body)
Text("Callout").font(.callout)
Text("Caption").font(.caption)
Text("Footnote").font(.footnote)
}
}
}
As you can see from the image above, this is a quick and easy way to start to style your fonts with Swift UI!
Further Font Customizations:
After you have picked the type of font you want to use for your Text object, you can then take it a step further to really customize the look of the font itself. For example, if you want to change the size of the font, you can do so using the following syntax:
struct SomeView: View {
var body: some View {
Text("Changing Font Size is Easy!").font(.system(size:90)
}
}You can also specify the weight of the font that to meet your design goals. This is similar to the previous syntax although we will use fontWeight instead. see the example below for usage details:
struct SomeView: View {
var body: some View {
Text("This is a bold font now!").fontWeight(.bold)
}
}The different font weights you can utilize in Swift UI include: black, bold, heavy, light, medium, regular, semibold, thin, and ultraLight. An example of each of these font weights is listed below:
struct SomeView: View {
var body: some View {
VStack {
Text("Black Font").fontWeight(.black)
Text("Bold Font").fontWeight(.bold)
Text("Heavy Font").fontWeight(.heavy)
Text("Light Font").fontWeight(.light)
Text("Medium Font").fontWeight(.medium)
Text("Semibold Font").fontWeight(.semibold)
Text("Thin Font").fontWeight(.thin)
Text("UltraLight Font").fontWeight(.ultraLight)
}
}
}
Now that we have set the size, weight, and type of font, we can then choose the color of the font. This is completed by using forgroundColor and then setting the color that you choose. An example of this can be viewed below:
struct SomeView: View {
var body: some View {
Text("Red Text").font(.title).bold().foregroundColor(.red)
}
}
Conclusion:
As you can see, it is very easy to quickly stylize your Text objects within your Swift UI application to give you app a unique look and feel. You can combine all of the things we discussed today to get exactly the font style that you are looking to achieve within your application.
If you enjoyed this article, you might like these:
