All websites use fonts, headings, paragraphs and links. The following describes how we handle them on the PCC website.
Typography development info
- Stylesheet location:
- To set the font size, the syntax is:
- 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:
font-size:em($base-size - 2);(ex. 14 – 2 = 12)
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 italic:
- There is no bold italic
We chose the site-wide fonts for legibility, accessibility and similarity to college print materials. Learn more about font accessibility.
- Open Sans Light, designed by Steve Matteson. Apache License, version 2.0
- Color: #333 (
- Size: 23.7 – 35px computed
- There are no italic or bold headings (but they can be blue, underlined links)
- Open Sans Regular, Semibold, designed by Steve Matteson. Apache License, version 2.0
- Color: #333 (
- Size: 14.4px computed
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.
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 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.
- This sentence is normal.
- This sentence is bold.
- This sentence is italic.
Paragraph development info
If you’re writing a style that needs
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.
- Nothing special needed in HTML
@include font;in CSS, not
@include font-bold;in CSS, not
@include font-italic;in CSS, not
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.
- I’m a normal link to another page.
- I’m a link that points to a document.
Link development info
- Don’t include links with blank hrefs.
- Make sure all links on prod don’t point to test, and vice versa.
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.