Skip to main content

Design System

Measure

Line length, also called "measure", is an important part of readability.

The design system includes 3 measure modifiers:

  • narrow = line length ~45 characters
  • base = line length ~65 characters
  • wide = line length ~80 characters

Format: ds-u-measure--[NAME]

Code snippet
<h2 class="preview__label">ds-u-measure--narrow</h2>
<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>
<h2 class="preview__label">ds-u-measure--base</h2>
<div class="ds-u-measure--base ds-u-font-size--small">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>
<h2 class="preview__label">ds-u-measure--wide</h2>
<div class="ds-u-measure--wide ds-u-font-size--small">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>