Portland Community College | Portland, Oregon

Headings

Headings are very important for creating a content hierarchy on the page, both for visual differentiation and accessibility reasons. They must be nested properly, not chosen on the basis of visual sizing.

Headings shouldn’t be links, except in features galleries. They also shouldn’t be bolded (they’re already bold), or italicized (the styles will prevent italicized headings).

Heading font

We chose the site-wide fonts for legibility, accessibility, and similarity to college print materials.

• Open Sans Bold, designed by Steve Matteson. Apache License, version 2.0
• Color: #333 ($dark-gray)
• Size: 18¨C31px computed (1.125em¨C1.9375em)

Jump to a component:

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

Heading 1

Heading 1 is reserved for the global website title.

Styling

The PCC logo and the visually-hidden website title (“Portland Community College | Portland, Oregon”).

How to use for Heading 1

Only available in the main website theme.

<h1>
  <span style="position:absolute;left:-9999px;">Portland Community College | Portland, Oregon</span>
  <a href="/">
    <img src="/wp-content/themes/pcc/_source/images/logo.svg" onerror="this.src='/wp-content/themes/pcc/_source/images/logo.png'; this.onerror=null;" alt="Portland Community College" />
  </a>
</h1>

Heading 2

Heading 2 is reserved for the “site” title in the dark blue area.

Styling

The site title displays as very bold white text in the dark blue bar directly below the global header, logo, and navigation.

How to use for Heading 2

The Web Team updates the site title in the site’s WordPress settings.

<h2><a href="link to site homepage">Site title</a></h2>

Heading 3

Heading 3 is reserved for the page title in the content area and the blue sidebar header.

Styling

The page title heading 3 displays at the top of the content area below the page’s breadcrumbs. It is very bold and has a short underline to make it stand out against the rest of the content. The parent page’s title displays in the blue sidebar heading at the top of the navigation, also using a heading 3.

On the site’s homepage, the page title is automatically set as “Homepage” and is visually hidden. The sidebar shows the site title.

How to use for Heading 3

Whatever you name a page will show as the heading 3 page title. You can set a short title that will show in the sidebar heading (and in the browser tab) if needed ¨C do so in the WordPress editor’s “PCC Page Attributes” box.

<h3>Page title</h3> <!-- the sidebar has a link too -->

Heading 4

Heading 4 is the first heading level available for general use.

Styling

Heading 4s are a little smaller than heading 3s and don’t have an underline.

How to use for Heading 4

Use the “Formats > Header” option in the toolbar. Always start with heading 4 when adding a new heading to the page, unless it’s nested below a heading 4 or heading 5 in the content’s hierarchy.

<h4>Heading text</h4>

Heading 5

Heading 5 is the second heading level available for general use.

Styling

Heading 5s are very bold and a little smaller than heading 4s.

How to use for Heading 5

Use the “Formats > Header 2” option in the toolbar. Only use a heading 5 if it’s nested below a heading 4 in the content’s hierarchy.

<h5>Heading text</h5>

Heading 6

Heading 6 is the third, and last, heading level available for general use.

Styling

Heading 6s are very bold and a little smaller than heading 5s, but still larger than the body text.

How to use for Heading 6

Use the “Formats > Header 3” option in the toolbar. Only use a heading 6 if it’s nested below a heading 5 in the content’s hierarchy.

<h6>Heading text</h6>