Dynamic Type & Font weight name value mapping in SwiftUI

When an iOS developer gets a design specs for text label like the one below, we tend to hard-code the values in code. But if it important to code for dynamic type styles so that the app is accessible for different kinds of users. If we choose this path we can no longer hard-code the values instead map the values to the closest matching styles provided in apple docs. This article will quickly walk you through these simple details.

UI Specs for text

font-weight: 900 (matching weight named value is .black)
font-size: 35pt (closest matching size is .largeTitle which is 34pt)
letter-spacing: -2pt (kerning defined as float)
line-height: 2pt (lineSpacing defined as float)

Code Snippet for above spec supporting dynamic type

Text("Hello World!")
    .fontWeight(.black)
    .font(.largeTitle)
    .kerning(-2.0)
    .lineSpacing(2.0)

Accessibility

Recently I was playing around with SwiftUI view and view modifiers. Being a iOS developer it is important to know about dynamic type support to make your app accessible. Users who have difficulties in reading the default font size will change their phone settings from here.
Settings -> Accessibility -> Display & Text Size -> Larger Text

When UX designer comes up with designs using tools like Zeplin, Figma they use font size, letter spacing (kerning), line spacing and font weight.

Font size are easy to understand and translate into code. But if you want to make your app accessible by adding dynamic type support then developers need to map the values defined in design spec into the dynamic type styles defined by apple. Like for e.g., font-size 15pt would translate into .subheadline. If designers picks a font-size as 24pt, it is important to clarify and educated them about dynamic types so that they can decide whether they want .title or .title2 style. Below is the mapping for different font styles and font sizes. You can read more about Dynamic types here.

Dynamic type sizes – Large (default)

Font weight named value and numerical mapping

It was fairly easy to access the dynamic type mapping but when it came to font-weight to named value mapping I had to search a bit and even the landed apple-news documentation had some irrelevant information. This motivated me to write this short article. You can read more about fontWeight styles used in apple news app here. Apple’s news app documentation captures more extensive details but when it comes to SwiftUI only the following values are relevant. Below table will be handy to have when you are developing using SwiftUI but this is inferred values based on Apple news documentation.