Web services

Paragraphs

Most content on the website is contained in basic paragraphs. Paragraphs have been optimized for readability by using the correct line spacing and space between paragraphs.

Body font

We chose the site-wide fonts for legibility, accessibility, and similarity to college print materials.

  • Open Sans Regular, Italic, Semibold, designed by Steve Matteson. Apache License, version 2.0
  • Color: #333 ($dark-gray)
  • Size: 16px computed (1em)

Basic paragraphs

Paragraphs can include text at normal and bold weight, or italic. There is no bold italic.

How to use for Basic paragraphs

Use the “Formats > Paragraph” option in the toolbar. If needed, you can also use the “Bold” or “Italic” options. If you apply both bold and italic, whichever was applied last will be used.

Development info for Basic paragraphs

Stylesheet location: /_source/styles/base/_typography.scss /_source/styles/base/_mixins.scss

If you’re writing a style that needs font-style or font-weight, you need to include one of the font mixins (@include). This way, the browser uses the real bold and italic fonts, not the faux browser versions.

  • Normal
    • Nothing special is needed in the HTML.
    • Use @include font; in the CSS, not font-style: regular or font-weight: normal.
  • Bold
    • Use <strong></strong>, not <b></b> in the HTML.
    • Use @include font-bold; in the CSS, not font-weight: bold;.
  • Italic
    • Use <em></em>, not <i></i> in the HTML.
    • Use @include font-italic; in the CSS, not font-style: italic;.
<p>Normal paragraph.</p>
<p>Normal paragraph with <strong>bold text</strong>.</p>
<p>Normal paragraph with <em>italic text</em>.</p>
Example of Basic paragraphs

This sentence is normal.

This sentence is bold.

This sentence is italic.