Design tokens

Font size

Published on

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.

Fluid Font size

Optional: Can be applied using <body class="fluid">.

Device width 360px480px768px1024px1280px1920px
Base 17.80px18.40px19.84px21.12px22.40px25.60px
<h1> 33.80px34.40px35.84px37.12px38.40px41.60px
<h2> 29.80px30.40px31.84px33.12px34.40px37.60px
<h3> 25.80px26.40px27.84px29.12px30.40px33.60px
<h4> 21.80px22.40px23.84px25.12px26.40px29.60px
<h5> 19.80px20.40px21.84px23.12px24.40px27.60px
<h6> 18.80px19.40px20.84px22.12px23.40px26.60px
<small> 14.60px15.20px16.64px17.92px19.20px22.40px
<h1>/<small> x2.32x2.26x2.15x2.07x2.00x1.86

font-size - https://adrianroselli.com/2024/03/the-ultimate-ideal-bestest-base-font-size-that-everyone-is-keeping-a-secret-especially-chet.html max width - https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/

Example

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