Skip to main content
U.S. Flag

An official website of the United States government

Body

Body text is used for the majority of the content on the website or application.

Notice:

Typography sizing updates!

We've updated typography sizing variables and class names to make them more agnostic. Read about how you can update.

Examples

Large body text

.ds-text-body--lg

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.

Medium body text

.ds-text-body--md

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.

Small body text

.ds-text-body--sm

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.

Code

Responsive typography

The .ds-type-heading-3xl, ds-type-heading-2xl, and ds-type-heading-xl 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.

Styles

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

  • $font-size-5xl
  • $font-size-4xl
  • $font-size-3xl
  • $font-size-2xl
  • $font-size-xl
  • $font-size-lg
  • $font-size-md, uses $font-size-base
  • $font-size-sm

Guidance