Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Fix and clarify values in documentation for compact typography #1332

Merged
merged 2 commits into from
Jul 8, 2024
Merged

chore: Fix and clarify values in documentation for compact typography #1332

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c45da4c
Fix documentation for compact typography
VincentSmedinga Jul 8, 2024
5a0926d
Fix typo
VincentSmedinga Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions storybook/src/docs/typography.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,22 @@ Each level has a minimum text size, up to a window width of 320 pixels.
There’s also a maximum text size starting at a window width of 1600 pixels.
Between these points, the text grows linearly.

### Typographic Scale
### Typography System

The typographic scale is based on a factor of 5 ÷ 4 = 1.25.
For each adjacent level, the text is that much larger or smaller.

The text size grows more slowly at the minimum window width, with a factor of 7 ÷ 6 ≈ 1.17.
The typography system is based on two font sizes and two growth factors.
The two font sizes are the minimum and maximum text sizes for Text Level 5 – the default body text.
The larger levels grow with a larger factor than the smaller levels.
This prevents headings from becoming too large on phones and other narrow windows and small texts from becoming too small.

### Two Themes for Websites and Applications

#### Spacious

The typography is quite spacious for websites, in line with the overall design.
A standard paragraph is 18 pixels at a window width of 320 pixels.
It grows to 24 pixels up to a width of 1600 pixels.
A standard paragraph grows from 18 pixels at a window width of 320 pixels to 24 pixels for a window width of 1600 pixels.

Larger text levels grow with a factor of 5 ÷ 4 = 1.25.
Smaller text levels grow with a factor of 7 ÷ 6 ≈ 1.167.

The maximum text sizes for all levels in the spacious theme:

Expand All @@ -70,10 +71,12 @@ And the minimum:

#### Compact

For applications, such large text is not necessary, even counterproductive.
Hence, there’s a compact theme for typography.
In this theme, a paragraph is 14 pixels at the minimum window width and 16 pixels at the maximum.
Text is a quarter smaller and grows slightly more slowly.
For applications, text that large would be counterproductive.
That is why we have a compact theme for typography.
In this theme, Text Level 5 grows from 14 to 16 pixels.

Larger text levels grow with a factor of 7 ÷ 6 ≈ 1.167.
Smaller text levels grow with a factor of 9 ÷ 8 = 1.125.

The maximum text sizes for all levels in the compact theme:

Expand Down Expand Up @@ -113,9 +116,9 @@ The text sizes at those points are as follows, rounded to 1 decimal place:

| Device Class | Design Width | 0 | 1 | 2 | 3 | 4 | 5 | 6 |
| :----------- | ------------ | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
| Phone | 320 | 30.3 | 25.9 | 22.2 | 19.1 | 16.3 | 14 | 12 |
| Tablet | 832 | 40.1 | 33.1 | 27.4 | 22.7 | 18.8 | 15.6 | 13 |
| Desktop | 1600 | 54.9 | 43.9 | 35.2 | 28.1 | 22.5 | 18 | 14.4 |
| Phone | 320 | 25.2 | 22.4 | 19.9 | 17.7 | 15.8 | 14 | 12.4 |
| Tablet | 832 | 29.0 | 25.3 | 22.1 | 19.3 | 16.9 | 14.8 | 13 |
| Desktop | 1600 | 34.6 | 29.6 | 25.4 | 21.8 | 18.7 | 16 | 13.7 |

## Emphasis

Expand Down