---
title: "Typography"
canonical: https://sky-ui.cf.sky.com/foundations/typography
---

# Typography

Set of font sizes and weights ensuring consistent typographic styles.

## 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.

### Default link

### Hover link

### Focus link