Skip to content

Web Style Guide
Typography

Clemson’s brand typefaces, primary and secondary, provide equal parts traditional and modern character, carrying forward our institution’s past while still squarely facing the future. Most brand fonts are readily available through Adobe Fonts and can be activated through your Adobe Creative Cloud account at fonts.adobe.com. Licensed brand fonts are available by request at the discretion of University Relations. For purchasing information, contact Design Director Jesse Godfrey at jesseg@clemson.edu

Web Brand Fonts

01
Web Brand Fonts
  • Tiempos
  • Times New Roman
  • Trade Gothic Next
  • Franklin Gothic

Default Headings

02
Default Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

Type Utilities

03
Type Utilities
Classes: style classes that are available including large, small, uppercase, strong, align etc.

See the Pen Test Pen by Clemson OWS (@clemsonOWS) on CodePen.

Accessible use of type

(what constitutes large type, contrast reqs, heading order)

All Clemson websites should meet WCAG AA color contrast standards of a minimum 3:1 color contrast ratio for text that is at least 24px and normal weight or 19px and bold and 4.5:1 color contrast ratio for text 19px normal weight and lower.

Google recommends that web type have a base font size of at least 16 pixels. Small text should be used sparingly and sized no smaller than 75% of the base font size (i.e., no smaller than 12 pixels).

Use H1-H5 headings appropriately

  • Create one and only one H1 heading for each page. For the new templates, this should actually be built in as an option at the very top of the page builder.
  • Properly nest all other heading levels (H2 to H6) such that a given heading level does not appear on a page until the one immediately preceding it has.
  • Do not use H1-H6 header markup to style any content other than heading text.

Images of Text

In general, websites should avoid images of text. Images of text are best reserved when a particular visual presentation is essential, such as a logo. If the image is of a small amount of text, the alt text must match the text in the image exactly. If the image contains a considerable amount of text, the text should also be elsewhere on the page.

In general, text in images should be a generous size to mitigate pixilation when zoomed. A minimum size of 19px is a good rule of thumb, with larger being better. Text in images should match color contrast ratio minimums. For text that is at least 24px and normal weight or 19px and bold, use a contrast ratio that is at least 3:1. Ideally, use a contrast ratio that is at least 4.5:1.