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 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.
- 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, not chosen on the basis of visual sizing. For more information about using headings correctly, visit the writing style guide in 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.
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 is needed in the HTML.
@include font;in the CSS, not
<b></b>in the HTML.
@include font-bold;in the CSS, not
<i></i>in the HTML.
@include font-italic;in the CSS, not
- 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.
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.
- I’m a normal link to another page.
- I’m a link that points to a document.