CMS Design System

Line length, also called "measure", is an important part of readability. CMSDS has 3 measure options to control reading length.

Format: .ds-u-measure--[narrow|base|wide]

.ds-u-measure--narrow (line length ~45 characters)

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.

.ds-u-measure--base (line length ~65 characters)

.ds-u-measure--wide (line length ~80 characters)

Code snippet

<section class="example-list">
  <article>
    <span class="example-label">
      <code>.ds-u-measure--narrow</code>
      (line length ~45 characters)
    </span>
    <div class="ds-u-measure--narrow">
      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.
    </div>
  </article>
  <article>
    <span class="example-label">
      <code>.ds-u-measure--base</code>
      (line length ~65 characters)
    </span>
    <div class="ds-u-measure--base">
      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.
    </div>
  </article>
  <article>
    <span class="example-label">
      <code>.ds-u-measure--wide</code>
      (line length ~80 characters)
    </span>
    <div class="ds-u-measure--wide">
      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.
    </div>
  </article>
</section>

Guidance

Accessibility

A line of text shouldn’t be longer than 80 characters. This helps users with certain reading or visual disabilities that have trouble keeping their place when reading long lines of text. If the width of the text container is resized, it should be allowed to scale in a way so 80 characters or less are shown...Another way to ensure good line-length is to use a fluid layout or apply responsive web design techniques that allow the user to resize the window to find a comfortable line length. — W3C

Customization

The following Sass variables can be overridden to theme the measure utility:

$measure-narrow
$measure-base
$measure-wide