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

Jump to bottom

Fix typography docs #5055

Merged
merged 4 commits into from
Apr 17, 2024
Merged

Fix typography docs #5055

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90beb00
Fix typography docs
dgtlntv Apr 15, 2024
f382dc6
Update typography.md
dgtlntv Apr 15, 2024
09656eb
inline styles for display heading on large screens as well
dgtlntv Apr 16, 2024
ad73a66
Align columns across the tables
bartaz Apr 16, 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
64 changes: 48 additions & 16 deletions templates/docs/base/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,28 +43,55 @@ Even though a width axis is available, allowing text to be condensed, we do not

We use a carefully selected set of weights in our heading hierarchy. As a general rule, we reduce the weight of light headings as the font-size increases. We keep the weight of bold headings the same, thereby increasing contrast between light and bold headings as we move up the type scale. The following table provides the full list of weights we use:

| Weight | Use |
| ------ | --------------------------------------------------- |
| 100 | Display headings |
| 180 | H2, large screens |
| 230 | H2, medium screens |
| 300 | H4 |
| 400 | Small text, all UI elements, body text, H6 headings |
| 500 | H5, H3, H1 |
<table>
<thead>
<tr>
<th width="50%">Weight</th>
<th width="50%">Use</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>Display headings</td>
</tr>
<tr>
<td>180</td>
<td>H2</td>
</tr>
<tr>
<td>275</td>
<td>H4</td>
</tr>
<tr>
<td>400</td>
<td>Small text, all UI elements, body text, H6 headings</td>
</tr>
<tr>
<td>550</td>
<td>H5, H3, H1</td>
</tr>
</tbody>
</table>

## Our type scale

Our type scale consists of 5 font sizes, expressed as rems (root em units). For simplicity, going forward we will refer to sizes in pixels, with the assumption that the base rem unit, which is set by browsers, is at its default of 16 pixels. The following table lists the type sizes and what they are used for:
Our type scale consists of 8 font sizes, expressed as rems (root em units). For simplicity, going forward we will refer to sizes in pixels, with the assumption that the base rem unit, which is set by browsers, is at its default of 16 pixels. The following table lists the type sizes and what they are used for:

<table style="table-layout: auto">
<table>
<thead>
<tr>
<th>Size</th>
<th>Use</th>
<th>Example</th>
<th width="10%">Size</th>
<th width="40%">Use</th>
<th width="50%">Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>12px</td>
<td>Badges, labels and chips.</td>
<td><p class="p-text--x-small">Very small text</p></td>
</tr>
<tr>
<td>14px</td>
<td>Secondary text, side notes, etc.</td>
Expand All @@ -89,7 +116,7 @@ Our type scale consists of 5 font sizes, expressed as rems (root em units). For
</tr>
<tr>
<td>32px</td>
<td><code>h1</code> and <code>h2</code> level headings on small and medium screens..</td>
<td><code>h1</code> and <code>h2</code> level headings on small and medium screens.</td>
<td>
<p class="p-heading--2 u-no-padding--top" style="font-size: 2rem; line-height: 2.5rem">H2 heading (small and medium screens)</p>
<p class="p-heading--1" style="font-size: 2rem; line-height: 2.5rem">H1 heading (small and medium screens)</p>
Expand All @@ -103,10 +130,15 @@ Our type scale consists of 5 font sizes, expressed as rems (root em units). For
<p class="p-heading--1" style="font-size: 2.5rem; line-height: 3rem">H1 heading</p>
</td>
</tr>
<tr>
<td>64px</td>
<td>Ad hoc display headings for important bespoke pages on small and medium screens.</td>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the inline styles?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to make sure that the right size is displayed, independent of the screen you are currently on. But I am now realising, that we need to do it both ways actually. So also need to set inline styles for the large screen version.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the question is what do we want to present here: all the available size options, regardless of screen size - even if we never use them on same screen size (for example, both sizes of h2 heading, both sizes of display heading) - I guess 8 options? - this requires examples with inline styles.

Or do we want to show how many options we have on given screen size (5?): so list 1 row for h2 heading, 1 row for display heading, but maybe mention that their size depends on screen size? (and keep examples responsive)

<td><h1 class="p-heading--display" style="font-size: 4rem; line-height: 4.5rem">Ubuntu Pro</h1></td>
</tr>
<tr>
<td>80px</td>
<td>Ad hoc display headings for important bespoke pages.</td>
<td><h1 class="p-heading--display">Ubuntu Pro</h1></td>
<td>Ad hoc display headings for important bespoke pages on large screens.</td>
<td><h1 class="p-heading--display" style="font-size: 5rem; line-height: 5.5rem">Ubuntu Pro</h1></td>
</tr>
</tbody>
</table>
Expand Down
Loading