Typography - CMS Design System

The design system doesn't style base HTML typography elements (like h1, h2, p, etc) in order to avoid conflicting with any existing site styles. You should instead use one of the base typography classes below to apply styling:

ds-display
ds-title
ds-h{level} where level is a number between 1 and 6
ds-text and ds-text--lead

Note: The only base HTML element the design system applies styling to is the <a> element. To prevent this, you can override the $ds-include-base-html-rulesets Sass variable and set it to false.

New tab

Code snippet

<h1 class="ds-display">Display</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
   We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
  </p>
<h1 class="ds-title">Title</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
   We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
  </p>
<h1 class="ds-h1">Heading 1</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
   We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
  </p>
<h1 class="ds-h2">Heading 2</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
   We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
  </p>
<h1 class="ds-h3">Heading 3</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
   We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
  </p>
<h1 class="ds-h4">Heading 4</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
   We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
  </p>
<h1 class="ds-h5">Heading 5</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
   We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
  </p>
<h1 class="ds-h6">Heading 6</h1>
<p class="ds-text--lead ds-u-measure--wide">
  <strong>Lead text.</strong> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</p>
<p class="ds-text ds-u-measure--wide">
  <strong>Body text.</strong> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</p>

Responsive typography

The ds-display, ds-title, and ds-h1 classes are responsive by default. To apply responsive typography elsewhere, use the font size utility class. Since the base typography margins and line height is measured in em units, they'll automatically adjust as you change the font size.

Resize your browser to see each breakpoint in action:

New tab

Code snippet

<article class="ds-base--inverse ds-u-padding--2">
  <h1 class="ds-display ds-u-margin-y--1">Display</h1>
  <h2 class="ds-title ds-u-margin-y--1">Title</h1>
  <h3 class="ds-h1 ds-u-margin-y--1">Heading 1</h1>
  <h4 class="ds-h2 ds-u-margin-y--1 ds-u-font-size--h4 ds-u-md-font-size--h3 ds-u-lg-font-size--h2">Responsive utility classes</h4>
</div>

Customizing type sizes

The following Sass variables can be overridden to change the type sizes:

$small-font-size
$base-font-size
$lead-font-size
$h6-font-size
$h5-font-size
$h4-font-size
$h3-font-size
$h2-font-size
$h1-font-size
$h1-mobile-font-size
$title-font-size
$display-font-size