Portland Community College | Portland, Oregon Portland Community College

Typography basics

All websites use fonts, headings, paragraphs and links. The following describes how we handle them on the PCC website.

Typography development info

  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • To set the font size, the syntax is:
    • font-size:em($base-font);
      • This runs the em() function in /base/_mixins.scss and converts the font size to em.
      • The base font size on the PCC website is 14.4px (0.9em). The body font looks better at this smaller size, and it was simpler to make the font size change only in one place.
  • To change the font size, the syntax is:
    • Decrease: font-size:em($base-size - 2); (ex. 14 – 2 = 12)
    • Increase: font-size:em($base-size + 4); (ex. 14 + 4 = 18)
      • This runs the em() function in /base/_mixins.scss, calculates the new pixel size, and converts the calculated font size to em.
      • Expand the “Text” section on under variables on the extras page for a list of calculated em sizes.
  • To set the font style and weight, use @font-face and mixins:
    • regular: @include:$font;
    • regular italic: @include:$font-italic;
    • bold: @include:$font-bold;
  • There is no bold italic

Fonts

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

Heading font
  • Open Sans Light, designed by Steve Matteson. Apache License, version 2.0
  • Color: #333 ($dark-gray)
  • Size: 23.7 – 35px computed
  • There are no italic or bold headings (but they can be blue, underlined links)
Body font

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, and not chosen on the basis of visual sizing. For more information about using headings correctly, visit the writing style guide on Spaces.

Heading usage
  • h1 – reserved for the site heading (PCC logo)
  • h2 – reserved for the “site” title in the dark blue area
  • h3 – reserved for the page title heading in the content area, sidebar
  • h4 – first level heading in the content area, callouts
  • h5 – second level in the content area, callouts
  • h6 – third and final level in the content area, callouts

Paragraphs

Paragraphs can include text at normal and bold weight, or italic. There is no bold italic. Paragraphs have been optimized for readability by using the correct line spacing and space between paragraphs.

Paragraph examples
  • This sentence is normal.
  • This sentence is bold.
  • This sentence is italic.
Paragraph development info

If you’re writing a style that needs font-style or font-weight, you need to include the mixin (@include). This way, the browser uses the real bold and italic fonts, not the faux browser versions.

  • Normal
    • Nothing special needed in HTML
    • Use @include font; in CSS, not font-style: regular or font-weight: normal
  • Bold
    • Use <strong></strong>, not <b></b> in HTML
    • Use @include font-bold; in CSS, not font-weight: bold;
  • Italic
    • Use <em></em>, not <i></i> in HTML
    • Use @include font-italic; in CSS, not font-style: italic;

Links are underlined and use a different color so they are easy to see at a glance on the page, and are visible for people who see limited or no color. It’s important to not underline text on the page that isn’t a link – making something look clickable that isn’t is confusing for many people.

Link example
Link type

If a link points to the Intranet, Spaces, a PDF or a Word Doc, the link type is added automatically (with JavaScript) in brackets after the link. Don’t add the link type manually.

Link development info
  • Don’t include links with blank hrefs.
  • Make sure all links on prod don’t point to test, and vice versa.
  • JavaScript adds class="current" to any link that points to the current page, and the CSS gives it a different look (less clickable) than a link pointing to another page. This is mostly used in the sidebar.