What are we doing?
We would like to audit & standardize typography across the iOS app. Where possible we would like to ensure that the typography size, line height, and tracking of system fonts that easily allow the type to scale for dynamic type. Finally, we will create guidelines for typography in the app.
Figma file
- Chosen typography types are documented in this Figma file and below.
Typography info.
- All SF fonts use the appropriate style name from HIG/Typography.
- The one exception is that we use ‘Callout’ type style for the apps body (so the body text size is 16 rather than 17).
Typographic scale
| Font size | 12 | 13 | 15 | 16 | 17 | 20 | 28 |
| Type | Caption | Footnote | Subhead | Callout (Body) | Headline | Title 3 | Title 1 |
| Tracking | 0.0 | -0.08 | -0.23 | -0.31 | -0.43 | -0.45 | +0.38 |
| Line height (same as in the HIG) | 16 | 18 | 20 | 21 | 22 | 25 | 34 |
Design checklist
- Standardize typography across the app
- Understand if there are elements that need different treatment for different languages
- Make sure LTR and RTL and multilingual logic is defined wherever needed
Engineering Notes / Order Of Operations
- Clean up existing WKFont file (remove fonts not in use, use clear naming)
- Build out the list of text styles that we need in WKFont, based on the Figma.
- Go throughout the app and swap out the font assignments through WMFDynamicType with a WKFont in each context
- (Optional, if previous approach doesn't work for some reason) In UIFont+WMFDynamicType.swift, replace implementations of font-generation methods here with logic that outputs the correct WKFont.
- For any fonts in the app that are NOT generated through the UIFont+WMFDynamicType.swift methods (i.e. for example, search “UIFont.systemFont”), change the font assignment in that context to use WKFont directly.
QA Notes
Test fonts in the app for regressions. Confirm dynamic type still works as expected.
