Web services

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/styles/base/_typography.scss
  • To set the font size, the syntax is:
    • font-size:em($text-base);
      • 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($text-base - 2); (ex. 14 – 2 = 12)
    • Increase: font-size:em($text-base + 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.
  • To set the font style and weight, use @font-face and mixins:
    • regular: @include:$font;
    • regular italic: @include:$font-italic;
    • bold: @include:$font-bold;
    • headings: @include:$font-heading;
  • There is no bold italic.

Fonts

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

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, not chosen on the basis of visual sizing. For more information about using headings correctly, visit the writing style guide in 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 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 is needed in the HTML.
    • Use @include font; in the CSS, not font-style: regular or font-weight: normal.
  • Bold
    • Use <strong></strong>, not <b></b> in the HTML.
    • Use @include font-bold; in the CSS, not font-weight: bold;.
  • Italic
    • Use <em></em>, not <i></i> in the HTML.
    • Use @include font-italic; in the CSS, not font-style: italic;.
Paragraph examples
  • This sentence is normal.
  • This sentence is bold.
  • This sentence is 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 development info
  • Don’t include links with blank hrefs.
  • Make sure all links on prod don’t point to test or dev.
  • 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.
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.