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 Marketing and Communications. For more information, visit the typography section of the Clemson brand guide.

Please note that only the fonts listed above and those available through Adobe Fonts are licensed by the University for use on clemson.edu. Some brand typefaces will require an additional purchase of a web font license for website and mobile applications.

Typefaces that require the purchase of a separate web license include...

• Biotif
• Tiempos Headline - (Sites or Applications not part of Clemson.edu)
• Tiempos Text - (Sites or Applications not part of Clemson.edu)
• Tiempos Fine
• Hoefler Text
• Goudy Old Style
• Trade Gothic

For more information on how to license typefaces, please visit the typography section of the brand guide.

• 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. The H1 should describe the topic of the page and should not be used for news headlines or event promotion unless those are the main purpose of the webpage.
• 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.

The line lengths of body copy across all screen sizes should typically fall between 45 to 85 characters (including spaces and punctuation) per line. Excessively long and short line lengths impact legibility because of the increased difficulty in locating the next line of a paragraph and increasing mental strain on the reader.

When using the columns widget in Cascade, the column will default to 12 columns which is the full width of the screen. Be sure when placing copy that you adjust the width value of your columns to allow your text to fall within these values. For a single column layout, a column value of 6 or 7 will typically be in the correct range.

Intro Section Boilerplate Code

The Intro Section of the interior page template currently doesn't provide the option to set column widths via dropdown like the normal columns module and has to be set up manually in HTML. The provided boilerplate below can be used quickly create a grid and column structure for this intro section.

Paragraph Class Utilities

Please see different paragraph types below

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Subtle Paragraph (Class name: cu-subtle)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fine Print (Class name: cu-fine-print)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Oversize Paragraph (Class name: cu-oversize)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Screenreader Only Text (Class name: show-for-sr)
This allows you to hide content while still making it readable by screen reader. Link to foundation utility

I am only visible to screenreaders.

Typography Utilities

Please see typography utility classes for any element below.

Class name: heavy / example heavy text

Class name: condensed / example Trade Gothic Next Condensed text

Class name: tiempos-italic / example Tiempos Headline Italic text

Class name: text-accent / example text with an accent

List Utility

Add the class no-bull to a ul or ol tag to eliminate bullets, margin and padding styles

Add the class link-underline to a ul or ol tag within WYSIWYG's to apply underlines to links