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">.

Fluid font size by device width
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

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 
<h2 id="h2">Heading 2 <a href="#h2" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">Link to section h2</span></a></h2>
<h3 id="h3">Heading 3 <a href="#h3" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">Link to section h3</span></a></h3>
<h4 id="h4">Heading 4 <a href="#h4" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">Link to section h4</span></a></h4>
<h5 id="h5">Heading 5 <a href="#h5" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">Link to section h5</span></a></h5>
<h6 id="h6">Heading 6 <a href="#h6" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">Link to section h6</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>

Variables