This is the basic typographic scale provided by the Toolkit. For this scale, only the h1 and small elements have a bigger size from the medium breakpoint.
CSS classes are also provided for these sizes, so that should a developer need to create a certain visual hierarchy, they can, without breaking the semantics of the page. This is known as a Double strand hierarchy.
The typographic scale can be customised by overriding the default variable. To do so, set a new $typographic-scale variable with at least a base property containing all the default sizes. You can also pass optional extra breakpoints containing the sizes you want to modify as the screens get bigger:
body: 24px, // This is the default size for the main content
h1: 50px // h1 will be 50px from medium breakpoint and above
h2: 40px // h2 will be 40px from large breakpoint and above
<p>Font style can be <span class="regular">regular</span>, <span class="bold">bold</span>, <span class="italic">italic</span>, or <span class="bold-italic">bold-italic</span>.</p>
<p>Using standard HTML elements: <strong>strong</strong>, <b>bold</b>, <em>emphasized</em>, <i>italic</i>, <del>deleted</del>.</p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>. Text links: <a href="#">link</a>.</p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
<p>This is a block quotation.</p>
<cite>This is a citation</cite>
<p class="intro-text">Intro text is the size of an <code>h2</code> element.</p>