Typography - Font Scaling | Crossroads Digital Design Kit

UI Components / Typography

The following patterns have been developed to be both fully-extensible and provide the best possible rendering & copy flow in the largest number of contexts possible.

All HTML headings, <h1> through <h6> are available in both light and dark themes.

By adding a typeface selector (e.g. .font-family-base-light) or wrapping these tags in a heading selector (e.g. .page-header) you can apply specific typefaces or other style treatments to any heading. For non-header elements, you can use selectors like .font-size-h1 through .font-size-h6 to apply the same font-sizes illustrated below.

reachout: the outlet

<h1>reachout: the outlet</h1>

reachout: the outlet

<h2>reachout: the outlet</h2>

reachout: the outlet

<h3>reachout: the outlet</h3>

reachout: the outlet

<h4>reachout: the outlet</h4>
reachout: the outlet
<h5>reachout: the outlet</h5>
reachout: the outlet
<h6>reachout: the outlet</h6>

Other Utilities

The following utilities are available to set various font sizes.

reachout: the outlet

<p class="font-size-large">reachout: the outlet</p>

reachout: the outlet

<p class="font-size-base">reachout: the outlet</p>

reachout: the outlet

<p class="font-size-small">reachout: the outlet</p>

reachout: the outlet

<p class="font-size-smaller">reachout: the outlet</p>