Written by: Keith McGuffey | IANR Media

The 5.0 framework uses 'dcf' typography classes. This is a quick guide to typography in 5.0. For more information, see the 5.0 documentation provided by the Web Developer Network.

We can use utility classes to change the size, alignment, and style of our text. This means we can make headings smaller and paragraphs larger without affecting the page structure:

Heading

Paragraph

  • List1
  • List2
  • List3
<h2>Heading</h2>
<p>Paragraph</p>
<ul>
   <li>List1</li>
   <li>List2</li>
   <li>List3</li>
</ul>

Heading

Paragraph

  • List1
  • List2
  • List3
<h2 class="dcf-txt-h6">Heading</h2>
<p class="dcf-txt-h1">Paragraph</p>
<ul>
   <li class="dcf-txt-sm">List1</li>
   <li class="dcf-txt-md">List2</li>
   <li class="dcf-txt-lg">List3</li>
</ul>

We can add multiple classes by putting a space in between them:

Heading

Paragraph

  • List1
  • List2
  • List3
<h2 class="dcf-txt-h6 dcf-txt-center">Heading</h2>
<p class="dcf-txt-h1 dcf-txt-right unl-font-sans">Paragraph</p>
<ul>
   <li class="dcf-txt-sm unl-scarlet">List1</li>
   <li class="dcf-txt-md dcf-uppercase">List2</li>
   <li class="dcf-txt-lg dcf-bold dcf-italic">List3</li>
</ul>

Was this article helpful?