Text Formatting
The 5.0 framework uses 'dcf' classes to modify font. This is a quick guide to text formatting 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>
Headings
Headings are used for page structure. This structure is useful for search engines, creates visual separation between sections, and makes the page accessible to individuals using assistive technology. Headings go in order from ‘Heading 1’ to ‘Heading 6’.
- Heading 1 <h1>
-- Heading 2 <h2>
--- Heading 3 <h3>
---- Heading 4 <h4>
----- Heading 5 <h5>
------ Heading 6 <h6>
‘Heading 1’ is the page title. There should only be one "Heading 1" on a webpage, but you can have as many of the other headings as you need on a page. You’ll want to be sure we use them in descending order, and in a way that makes sense.
This structure makes sense to a user, screen reader or search engine:
- Flood Resources (Heading 1, page title)
-- Agricultural (Heading 2)
--- Crops (Heading 3)
--- Livestock (Heading 3)
---- Cattle (Heading 4)
---- Swine (Heading 4)
-- Businesses & Communities (Heading 2)
The topics are grouped together in an organized fashion.
This can be confusing:
- Flood Resources (Heading 1, page title)
----- Agricultural (Heading 5)
-- Crops (Heading 2)
------ Livestock (Heading 6)
---- Cattle (Heading 4)
-----Swine (Heading 5)
-- Businesses & Communities (Heading 2)
One last note – Headings make text larger and bold. However, they are not appropriate for text decoration. If a word or phrase in a paragraph needs to be emphasized, use the bold or italics options or one of the dcf font size utility classes.