Skip to content

Commit

Permalink
docs(typography): changed em to percentages
Browse files Browse the repository at this point in the history
  • Loading branch information
Manthos Matzios committed Aug 30, 2022
1 parent fd0a194 commit d417600
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions website/docs/webdev/3-Guidelines/1-typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,63 +75,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: 44x or 2.75rem <br/> Letter spacing: -0.015em <br/> Line height: 1.2</b>
<b>Font Size: 44x or 2.75rem <br/> Letter spacing: -1.5% <br/> Line height: 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: 40px or 2.5rem <br /> Letter spacing: -0.015em <br/> Line height: 1.2</b>
<b>Font Size: 40px or 2.5rem <br /> Letter spacing: -1.5% <br/> Line height: 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: 36px or 2rem <br/> Letter spacing: -0.015em <br/> Line height: 1.2</b>
<b>Font Size: 36px or 2rem <br/> Letter spacing: -1.5% <br/> Line height: 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: 24px or 1.5rem <br/> Letter spacing: -0.015em <br/> Line height: 1.2</b>
<b>Font Size: 24px or 1.5rem <br/> Letter spacing: -1.5% <br/> Line height: 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: 20px or 1.25rem <br/> Letter spacing: -0.015em <br/> Line height: 1.2</b>
<b>Font Size: 20px or 1.25rem <br/> Letter spacing: -1.5% <br/> Line height: 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: 1.5</b>
<b>Font Size: 16px or 1rem <br/> Letter spacing: 0% <br/> Line height: 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: 0.01em <br/> Line height: 1.5</b>
<b>Font Size: 14px or 0.875rem <br/> Letter spacing: 1% <br/> Line height: 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: 0.01em <br/> Line height: 1.5</b>
<b>Font Size: 12px or 0.75rem <br/> Letter spacing: 1% <br/> Line height: 150%</b>
</div>
</div>

Expand All @@ -145,55 +145,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: -0.015em</b>
<b>Font Size: 30px or 1.875rem <br/> Letter spacing: -1.5% <br/> Line height: 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: -0.015em</b>
<b>Font Size: 24px or 1.5rem <br/> Letter spacing: -1.5% <br/> Line height: 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: -0.015em</b>
<b>Font Size: 20px or 1.25rem <br/> Letter spacing: -1.5% <br/> Line height: 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: -0.015em</b>
<b>Font Size: 18px or 1.125rem <br/> Letter spacing: -1.5% <br/> Line height: 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</b>
<b>Font Size: 16px or 1rem <br/> Letter spacing: 0% <br/> Line height: 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: 0.01em</b>
<b>Font Size: 14px or 0.875rem <br/> Letter spacing: 1% <br/> Line height: 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: 0.01em</b>
<b>Font Size: 12px or 0.75rem <br/> Letter spacing: 1% <br/> Line height: 150%</b>
</div>
</div>
</div>
Expand Down

0 comments on commit d417600

Please sign in to comment.