Paragraphs

This page is under active development. Information is being moved into it from these pages:

  • http://cfpb.github.io/design-manual/brand-guidelines/typography.html
  • https://cfpb.github.io/capital-framework/components/cf-core/#base-typography

Body text

Body text should provide an efficient and pleasant experience on every viewport size. Readable text makes good use of alignment, spacing, line length and height, and contrast.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML code snippet

<p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do
eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>

Lead paragraph (subheading)

Responsive text. Displays as a Heading 3 on large screens; displays at Heading 4 size (but still Regular weight) on small screens. <601px wide: 18px / 22px

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML code snippet

<p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Microcopy

Lorem ipsum dolor sit amet

HTML code snippet

<p class="a-micro-copy">
    Lorem ipsum dolor sit amet
</p>
Edit this page
Add new page