Skip to content

Commit

Permalink
docs(typography): merge designer and dev units
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-stamatis
g-stamatis committed Sep 13, 2022
1 parent 6c855df commit 65c240e
Showing 1 changed file with 21 additions and 19 deletions.
40 changes: 21 additions & 19 deletions website/docs/webdev/3-Guidelines/1-typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,21 @@ We can use weights starting from 300 (Light) up to 700 (Bold). Usually, the bold
Line spacing is commonly measured as a percentage of font size. Conventional wisdom is that line spacing of 130%-150% is ideal for readability. In fact, anything from about 120% up to 200% is acceptable,
but 150% tends to be the most quoted sweet spot (and a WCAG recommendation). You should experiment to see what looks best with your text. The line-height value is always divisible by 4 to support the grid.

This is why for **body text** we use 150% line height, while for **headers** we use 120% due to the larger font size where using 150% would add too much space between the heading lines.

![](../md_components/static/height150.png)


<br/>

### Letter spacing

Letterspacing (also known as character spacing or tracking ) is the adjustment of the horizontal white space between the letters in a block of text. Unlike kerning, which affects only designated pairs of letters, letterspacing affects every pair.
By adjusting letter-spacing to the environment you are working with you will help readers consume your information faster, and more efficiently. The fun part is that they won’t even notice it!
Letter spacing (also known as character spacing or tracking ) is the adjustment of the horizontal white space between the letters in a block of text. Unlike kerning, which affects only designated pairs of letters, letterspacing affects every pair.
By adjusting letter spacing to the environment you are working with you will help readers consume your information faster, and more efficiently. The fun part is that they won’t even notice it!

#### Headings -1.5%
#### Headings -0.015em (-1.5%)
#### Body 0%
#### Caption and Small text 1%
#### Caption and Small text 0.01em (1%)

<br/>

Expand Down Expand Up @@ -75,63 +77,63 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
<h1 className="h1">Heading 1</h1>
</div>
<div className="col col--6">
<b>Font Size: 44px or 2.75rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 44px or 2.75rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center' , height: '120px' }}>
<div className="col col--6">
<h2 className="h2">Heading 2</h2>
</div>
<div className="col col--6">
<b>Font Size: 32px or 2rem <br /> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 32px or 2rem <br /> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center' , height: '120px' }}>
<div className="col col--6">
<h3 className="h3">Heading 3</h3>
</div>
<div className="col col--6">
<b>Font Size: 26px or 1.625rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 26px or 1.625rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<h4 className="h4">Heading 4</h4>
</div>
<div className="col col--6">
<b>Font Size: 20px or 1.25rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 20px or 1.25rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<h5 className="h5">Heading 5</h5>
</div>
<div className="col col--6">
<b>Font Size: 18px or 1.125rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 18px or 1.125rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<p>Body text</p>
</div>
<div className="col col--6">
<b>Font Size: 16px or 1rem <br/> Letter spacing: 0% <br/> Line height: 150%</b>
<b>Font Size: 16px or 1rem <br/> Letter spacing: 0 (0%) <br/> Line height: 1.5 (150%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<p className="caption">Caption text</p>
</div>
<div className="col col--6">
<b>Font Size: 14px or 0.875rem <br/> Letter spacing: 1% <br/> Line height: 150%</b>
<b>Font Size: 14px or 0.875rem <br/> Letter spacing: 0.01 (1%) <br/> Line height: 1.5 (150%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<p className="tiny">Small text</p>
</div>
<div className="col col--6">
<b>Font Size: 12px or 0.75rem <br/> Letter spacing: 1% <br/> Line height: 150%</b>
<b>Font Size: 12px or 0.75rem <br/> Letter spacing: 0.01 (1%) <br/> Line height: 1.5 (150%)</b>
</div>
</div>

Expand All @@ -145,55 +147,55 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
<h1 className="h1"> Heading 1</h1>
</div>
<div className="col col--6">
<b>Font Size: 30px or 1.875rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 30px or 1.875rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px' }}>
<div className="col col--6">
<h2 className="h2"> Heading 2</h2>
</div>
<div className="col col--6">
<b>Font Size: 24px or 1.5rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 24px or 1.5rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px' }}>
<div className="col col--6">
<h3 className="h3"> Heading 3</h3>
</div>
<div className="col col--6">
<b>Font Size: 20px or 1.25rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 20px or 1.25rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px' }}>
<div className="col col--6">
<h4 className="h4"> Heading 4</h4>
</div>
<div className="col col--6">
<b>Font Size: 18px or 1.125rem <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
<b>Font Size: 18px or 1.125rem <br/> Letter spacing: -0.015em (-1.5%) <br/> Line height: 1.2 (120%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<p>Body</p>
</div>
<div className="col col--6">
<b>Font Size: 16px or 1rem <br/> Letter spacing: 0% <br/> Line height: 150%</b>
<b>Font Size: 16px or 1rem <br/> Letter spacing: 0 (0%) <br/> Line height: 1.5 (150%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<p className="caption">Caption</p>
</div>
<div className="col col--6">
<b>Font Size: 14px or 0.875rem <br/> Letter spacing: 1% <br/> Line height: 150%</b>
<b>Font Size: 14px or 0.875rem <br/> Letter spacing: 0.01em (1%) <br/> Line height: 1.5 (150%)</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<p className="tiny">Small text</p>
</div>
<div className="col col--6">
<b>Font Size: 12px or 0.75rem <br/> Letter spacing: 1% <br/> Line height: 150%</b>
<b>Font Size: 12px or 0.75rem <br/> Letter spacing: 0.01em (1%) <br/> Line height: 1.5 (150%)</b>
</div>
</div>
</div>
Expand Down

0 comments on commit 65c240e

Please sign in to comment.