Typography
By design, end users don't control the main fonts and sizes used by the template. However there are CSS classes that you can use to use predefined styles to better organize your site. Generally speaking however, much like a Microsoft Word document, your content should read from top to bottom with various headings to help break up the page and provide users the ability to scan the document.
Font System
The USU template uses System UI fonts to allow optimum text rendering on every device and OS.
- Safari for macOS and iOS (San Francisco): -apple-system
- Chrome < 56 for macOS (San Francisco): BlinkMacSystemFont
- Windows: Segoe UI
- Android: Roboto
The basic web fallback is set to Helvetica Neue, Arial, and sans-serif.
Headings
Listed below are the type specimens for the USU template headings. Please also review our heading usage guide as well for some tips on ensuring your headings look great.
Roboto is used for headlines and general display type. It is advised to keep the heading size and weight consistant on your site.
| XL Headings |
|---|
| Heading 1 XL |
| Heading 2 XL |
| Heading 3 XL |
| Heading 4 XL |
| Heading 5 XL |
| Heading 6 XL |
| Default Headings |
|---|
| Heading 1 |
| Heading 2 |
| Heading 3 |
| Heading 4 |
| Heading 5 |
| Heading 6 |
Roboto is bold is an optional font-weight that can be used by adding h-bold to a parent element. It is advised to keep the heading size and weight consistant on your site.
| XL Headings |
|---|
| Heading 1 XL |
| Heading 2 XL |
| Heading 3 XL |
| Heading 4 XL |
| Heading 5 XL |
| Heading 6 XL |
| Default Headings |
|---|
| Heading 1 |
| Heading 2 |
| Heading 3 |
| Heading 4 |
| Heading 5 |
| Heading 6 |
Body Copy
Used for almost all body copy and informational text.
Paragraph
Show me the Scotsman who doesn't love the thistle.Show me the Englishman who doesn’t love the rose.
Show me the true blooded Aggie from Utah
Who doesn’t love the spot where the sagebrush grows!
Paragraph XL
Show me the Scotsman who doesn't love the thistle.Show me the Englishman who doesn’t love the rose.
Show me the true blooded Aggie from Utah
Who doesn’t love the spot where the sagebrush grows!
Adding the class xl to a parent element will apply these sizes to all text
Typeography Classes
Use these classes to modify the properties of text. Some of these are available in the WYSIWYG editor in OU Campus while others may not be.
| .font-weight-bold, .text-bold | Bold Text |
|---|---|
| .font-italic, .text-italic | Italic text |
| .font-weight-light | Light text |
| .font-weight-normal, .text-normal | Used to override normally bolded text |
| .lead | Makes a paragraph stand out. |
| .text-left | Left justify text |
| .text-right | Right justify text |
| .text-center | Center justify text |
| .text-break | Prevents long strings of text from going outside of the screen or their containers. Used often on email addresses. |
| .text-decoration-none, .noline | Remove the underline from normally underlined text |