Typography basics
All websites use fonts, headings, paragraphs, and links. The following describes how we handle them on the PCC website.
- 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.
