-
Notifications
You must be signed in to change notification settings - Fork 87
Keys from specsForTextStyles
The result of the rnTextSize specsForTextStyles function is a collection whose keys depends on the OS.
The key names and values are hard-coded in rnTextSize and follow the current Material Design Guidelines.
The fontFamily is defined with their 'sans-serif' equivalent, which determines the font weight implicitly.
The use of 'sans-serif' as fontFamily will render "Roboto" by default, but it will repect a different font on devices where the manufacturer (or the user) has changed it.
The units for width and letterSpacing are SPs, so that you can apply allowFontScaling at your convenience.
| Key | fontFamily | fontSize | letterSpacing* | textTransform** |
|---|---|---|---|---|
| h1 | sans-serif-light | 96 | -1.5 | |
| h2 | sans-serif-light | 60 | -0.5 | |
| h3 | sans-serif | 48 | 0 | |
| h4 | sans-serif | 34 | 0.25 | |
| h5 | sans-serif | 24 | 0 | |
| h6 | sans-serif-medium | 20 | 0.15 | |
| subtitle1 | sans-serif | 16 | 0.15 | |
| subtitle2 | sans-serif-medium | 14 | 0.1 | |
| body1 | sans-serif | 16 | 0.5 | |
| body2 | sans-serif | 14 | 0.25 | |
| button | sans-serif-medium | 14 | 0.75 | uppercase |
| caption | sans-serif | 12 | 0.4 | |
| overline | sans-serif | 10 | 1.5 | uppercase |
* letterSpacing is included if running React Native v0.55 or later, but it only applies on devices with API 21 or later.
** textTransform is undefined for React Native prior to v0.56
Note: The Material Design guide determines that both, 'button' and 'overline' text must be uppercase, but the textTransform property is not supported in RN for Android, so it is excluded.
The resulting info is obtained dynamically from the iOS UIKit merged with unscaled font size and letter spacing constants that follow the Human Interface Guidelines recommendations.
Each key has an UIFontTextStyle equivalent:
| Key | fontSize | letterSpacing | UIFontTextStyle constant |
|---|---|---|---|
| largeTitle | 34 | 0.374 | UIFontTextStyleLargeTitle |
| title1 | 28 | 0.364 | UIFontTextStyleTitle1 |
| title2 | 22 | 0.352 | UIFontTextStyleTitle2 |
| title3 | 20 | 0.38 | UIFontTextStyleTitle3 |
| headline | 17 | -0.408 | UIFontTextStyleHeadline |
| body | 17 | -0.408 | UIFontTextStyleBody |
| callout | 16 | -0.32 | UIFontTextStyleCallout |
| subhead | 15 | -0.24 | UIFontTextStyleSubheadline |
| footnote | 13 | -0.78 | UIFontTextStyleFootnote |
| caption1 | 12 | 0.0 | UIFontTextStyleCaption1 |
| caption2 | 11 | 0.066 | UIFontTextStyleCaption2 |
NOTE: largeTitle was added in iOS 11, so it is omitted in lower versions.