Portland Community College | Portland, Oregon Portland Community College

Homepage typography

Typography on the homepage is generally the same as typography on the rest of the website, with a minor difference for headings and a new type of list style.

Guidelines

Use good writing for the web practices. Most homepage copy changes need to go through Marketing.

Styling

Headings: Instead of Open Sans Light, used for headings on the rest of the website, the homepage uses the bold version. The headings are also teal instead of black, and have a short and thin horizontal line a handful of pixels below the text.

  • Open Sans Bold, designed by Steve Matteson. Apache License, version 2.0
  • Color: #008099 ($teal)
    • Headings in navy and teal sections are #fff (white) – see background elements.
    • Sub-headings for homepage lists (centers and stories) are still #333 ($dark-gray).
  • Size: 49.4 computed (main headings), 24.7px (sub-headings)

Lists: There are a few places on the homepage that use lists with icons instead of bullet points (the list of centers in the locations section and the “stories from around the college” in the news section. The centers use map marker icons and the stories use double carrot icons.

Responsive behavior

No change.

Development info
  • Stylesheet location: /_source/styles/homepage/_typography.scss
  • The lists are built using <ul class="no-bullets"> with a few extra styles.

Homepage typography examples

Main headings

Homepage main heading: white

Homepage main heading: navy

Homepage main heading: teal

Sub-headings

Homepage heading

Homepage centers list

Lists

Homepage centers list

Homepage stories list