Typography
Typography involves appearance, font style, and structure. Arranging letters and text in a way that makes the webpage's content legible, clear, and visually appealing improves the reader's experience.
Font Style
Our web sans serif font family is Open Sans because of its similarity to the official University sans serif fonts of Myriad Pro and Helvetica. It's also a free web font and has good readability on all devices. This is the default font on all websites.
Our web serif font family is PT Serif because of its similarity to the official University serif fonts of Garamond and Goudy. PT Serif does have a thicker structure, with less variances in thick and thin throughout the individual letters to increase readability on digital devices. It is also a free web font.
Our digital logo utilizes Latin Modern as the font family for the University, college, or department name. It's the closest free web font to the font family used in the print logos. This font family should not be used anywhere else.
Typographic Scale
Headings are essential to the construction of a proper document outline and are often in a larger, bold font. Headings separate paragraphs with extra spacing. Care should be taken to create an accurate and scannable hierarchy by using the appropriate heading level for each section of a page. Visual and non-visual users rely on headings to navigate and understand the content's purpose and topics on a page.
| Type Element | Size (em) | Size (px) | Size (pt) |
|---|---|---|---|
Heading 1 |
2.7em | 43.2px - 48.6px | 32.4pt - 36.45pt |
Heading 2 |
2.15em | 34.4px - 38.7px | 25.8pt - 29pt |
Heading 3 |
1.7em | 27.2px - 30.6px | 20.4pt - 22.95pt |
Heading 4 |
1.38em | 22.08px - 24.84px | 16.5pt - 18.63pt |
Heading 5 |
1.38em | 22.08px - 24.84px | 16.5pt - 18.63pt |
Heading 6 |
1.38em | 22.08px - 24.84px | 16.5pt - 18.63pt |
| Body | 1em | 16px - 20px | 12pt - 15pt |
| Small | .8125em | 13px - 16.25px | 9.75pt - 12.1875pt |
| Large | 1.125em | 18px - 22.5px | 13.5pt - 16.875pt |
| XL | 1.25em | 20px - 25px | 15pt - 18.75pt |
| Lede | 1.4em | 22.4px - 28px | 16.79pt - 21pt |
Headings appear as large, bolded text. Do not use headings to emphasize text in your web writing.
If text is visually a heading (large bold text) with corresponding content following, then it must be coded as a heading (i.e. <h1>, <h2>, <h3>, etc.) and should fall in a nested hierarchical structure.
Providing a proper heading structure allows assistive technology to recognize a heading and convey the structure to a user.
See also: Accessibility Headings