Skip Top Navigation

Typography

This is an example of an introductory paragraph set in Merriweather Regular (20px/34px). This paragraph is set in larger type size to distinguish it from running body copy and allows a writer to make a bold statement or highlight a primary idea or theme.

This is a paragraph set in Merriweather Regular (16px/24px) and uses a typographic style useful for running copy. This text is set in a smaller type size to distinguish it from the intro text and allow for longer stories and ease of reading.

Font Family Properties

We've employed a web font system that uses two open-source font families as a complement their print counterparts: Oswald and Merriweather.

Both font families are designed for legibility to use freely across the Internet by web browsers on desktop computers, laptops and mobile devices. Better suited for the screen, these web fonts reflect the same typographic hierarchy that is a foundation to the University's brand.

Oswald

Oswald is used for larger headlines and pull quotes. Oswald replaces Garage Gothic as our primary san serif typeface on the web.

Merriweather

Merriweather is used for intro text, body paragraphs, and links. Merriweather replaces Garamond as our primary serif typeface on the web.

Header Font Properties

The University website requires clear and consistent headings and highly legible paragraphs.

Heading 1

H1 font properties: Oswald Bold 34px

The H1 is built into the web page template Properties and should not be incorporated into body text.

Heading 2

H2 font properties: Oswald Bold 30px

Heading 3

H3 font properties: Oswald Bold 26px

Heading 4

H4 font properties: Oswald Bold 22px

Heading 5

H5 font properties: Oswald Bold 18px

Heading 6

H6 font properties: Oswald Bold 16px

 

Formatting Options

Quotes

This is a blockquote featuring an excerpt from the page.

Author Name

A blockquote is a visual element that emphasizes a key excerpt, attracts the reader, and breaks up long blocks of text to provide an additive interest to the page.

If the text is being duplicated from the main content, make sure to place the blockquote further away from the original source.

How To Add a Blockquote

Place your cursor at the start of the content line you wish to insert the blockquote to the right of, and select the "Blockquote" asset. This example was added to align with the top of first paragraph of this section by clicking to the left of "A blockquote is a visual element that..."

Two Column Typography

By utilizing two columns on a page (snippet: "Split Columns"), more content can be available to the user without having to scroll. In mobile view, the columns will respond to the smaller screen display and stack vertically.

Lorem ipsum dolor sit amet, modo affert tempor at mea, vis alia ignota an. Nullam habemus appellantur vim no. Vel ea epicurei forensibus, vis ad rebum populo diceret. Nec omnes ponderum no, ex eum tale munere verterem, nec discere periculis democritum ne. 

Ne mel labore delicata erroribus, an his commune verterem, salutandi accommodare qui ut. Pro mediocrem similique cu, mei veniam contentiones ut, an feugiat civibus vim. Accusam scaevola usu at, his odio equidem patrioque in. In consul officiis vis, cum vidit periculis no. At eam simul percipit.


List Styles

Unordered List

  • Column data
  • Column data
  • Column data
  • Column data

Ordered List

  1. Column data
  2. Column data
  3. Column data
  4. Column data