Typography - Overview
Typeface
Sky uses two typefaces: Sky Text and Sky Text Headline.
Sans-Serif should be specified as the fall-back option, for when the custom typefaces are not available.
Styles
| Style | Font Size | Line Height | Letter Spacing | Font Weight | Sample |
|---|---|---|---|---|---|
| Display/1-headline | 56px | 64px | 0% | bold | Sample |
| Display/2-headline | 44px | 52px | 0% | bold | Sample |
| Display/3-headline | 32px | 40px | 0% | bold | Sample |
| Display/4-headline | 28px | 36px | 0% | bold | Sample |
| Display/5-headline | 24px | 28px | 0% | bold | Sample |
| Display/1-regular | 80px | 104px | -2% | regular | Sample |
| Display/1-medium | 80px | 104px | -2% | medium | Sample |
| Display/2-regular | 64px | 84px | -2% | regular | Sample |
| Display/2-medium | 64px | 84px | -2% | medium | Sample |
| Display/3-regular | 48px | 64px | -1.5% | regular | Sample |
| Display/3-medium | 48px | 64px | -1.5% | medium | Sample |
| Display/4-regular | 40px | 52px | -1.5% | regular | Sample |
| Display/4-medium | 40px | 52px | -1.5% | medium | Sample |
| Display/5-regular | 28px | 40px | -1% | regular | Sample |
| Display/5-medium | 28px | 40px | -1% | medium | Sample |
| Display/6-regular | 20px | 24px | -2% | regular | Sample |
| Display/6-medium | 20px | 24px | -2% | medium | Sample |
| Display/7-regular | 16px | 20px | -2% | regular | Sample |
| Display/7-medium | 16px | 20px | -2% | medium | Sample |
| Body/lg-regular | 20px | 32px | -2% | regular | Sample |
| Body/lg-medium | 20px | 32px | -2% | medium | Sample |
| Body/body-regular | 18px | 28px | -2% | regular | Sample |
| Body/body-medium | 18px | 28px | -2% | medium | Sample |
| Body/sml-regular | 16px | 24px | -2% | regular | Sample |
| Body/sml-medium | 16px | 24px | -2% | medium | Sample |
| Legal-regular | 14px | 24px | -2% | regular | Sample |
| Legal-medium | 14px | 24px | -2% | medium | Sample |
Line heights
To comply with AA guidelines it is essential that line heights have the ability to scale to at least 1.5x the font size without breaking or impacting functionality.
Line Heights are set to a specific ratio and rounded up to fit the 4px baseline grid.
Line length
Best practice suggests a line length of 50-70 characters for best readability. In React, the default line length is set to 60 characters (including spaces).
Text links
Inline links need to be clear and accessible whatever the font weight, and also work on default and light appearances. In React, the visual hover background is the line height plus 8px (4px padding top and bottom). The clickable area will always have a height of 44px.