A visual guide
This article started as writing the Text typography specs for the Flutter port of SwiftUI, but I realized that SwiftUI devs might find it useful as well.
What does tracking mean? How is it different than kerning? What is font design? Which is more extreme, condensed or compressed? How and when does Dynamic Type work? Can I scale text to fit in a narrow width? How do I apply ranges to attributed strings?
I had all of these questions and more as I was learning about typography in SwiftUI. The official documentation was good, but it didn’t always show things visually as I would have liked. Developing the visual guide below helped to answer many of my questions. Hopefully they’ll answer yours as well. If you still have any, feel free to leave a comment.
Background
To familiarize yourself with typography in Apple, view the following resources:
Default system fonts
If no font is specified, the text based views use the default system font. This font is determined by the environment. Currently the…
