Portland Community College | Portland, Oregon

Development info

• Stylesheet locations: /_source/styles/base/_typography.scss and /_source/styles/base/_mixins.scss
• Use one of our Sass functions to set font size. See the following bullets for how to use the functions.
• 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 16px (1em).
    • You can also use the rem function (a duplicate of the em function) where needed: font-size:rem($text-base);.
• To change the font size, the syntax is:
  • Decrease: font-size:em($text-base - 2); (ex. 16 – 2 = 14px)
  • Increase: font-size:em($text-base + 4); (ex. 16 + 4 = 20px)
    • 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 one of our Sass font mixins:
  • regular: @include:$font;
  • regular italic: @include:$font-italic;
  • bold: @include:$font-bold;
  • headings: @include:$font-heading;
• There is no bold italic.