Design tokens

Font family

Published on

Font family

Defaults to `system-ui, sans-serif`. Can be overridden with modern font stacks or any other web font like Atkinson Hyperlegible . If using a web font, watch Font Performance Strategies | Mandy Michael | performance.now() 2024 to be sure you're implementing in a performant way.

Font size

Set to the users preference or 18px, whichever is larger. 18px is chosen because of the increased thickness leading to improved contrast (WCAG ???). All headers use % of user setting, while ensuring a 2.5 ratio between the largest and smallest font sizes for readability.

https://adrianroselli.com/2024/03/the-ultimate-ideal-bestest-base-font-size-that-everyone-is-keeping-a-secret-especially-chet.html

Example

Open in new tab
View HTML markup 
  <hgroup>
  <h1>Heading 1</h1>
  <p aria-roledescription="subtitle">Sub-Heading</p>
  <p aria-roledescription="subtitle"><small>Published on <time datetime="2000-01-01">January 1, 2000</time></small></p>
</hgroup>
Open in new tab
View HTML markup 
  <h2 id="h2">Heading 2 <a href="#h2" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h2>
<h3 id="h3">Heading 3 <a href="#h3" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h3>
<h4 id="h4">Heading 4 <a href="#h4" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h4>
<h5 id="h5">Heading 5 <a href="#h5" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h5>
<h6 id="h6">Heading 6 <a href="#h6" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h6>
Open in new tab
View HTML markup 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. http://example.org<wbr />/0000000000<wbr />/0000000000<wbr />/0000000000<wbr />/0000000000<wbr />/0000000000<wbr />/0000000000
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 0.000000000000000<wbr />0000000000000000<wbr />0000000000<wbr />000000000<wbr />00000000006. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

References

Variables