Font Families
The fonts mentioned in this guide are already pre-loaded on the site. Do not reload them. If you need additional font options, please contact University Marketing.
For accessibility and readability in this system, body copy should not go below 16px. The base is set at 18px for readability, and the small text utility scales to a 16px minimum.
Stratum
Stratum is the University’s Primary Font
Stratum is primarily used for headings in the semantic heading tags (h1 - h6) through the primary font token, and can be applied in typography as a visual statement. For usage references, see the “Text Examples” section.
H1 is usually reserved for page identity, such as the hero or page header. Do not use H1 casually in the body of the page just to make text look bigger.
This font is not recommended for paragraph text.
A B C D E F G H I J K L M N O P Q R S T U V W X Y
a b c d e f g h i j k l m n o p q r s t u v w x y
1 2 3 4 5 6 7 8 9 0
Proxima Nova
Proxima Nova is the University’s Secondary Font
Proxima Nova is used by the display font classes. Classes such as .fs-h1 - .fs-h6 and .fs-lg - .fs-xxxl use the secondary font family and are useful for titles, hero text, and display-style treatments that match Marketing materials. However, do not use it for standard body paragraphs or large amounts of text.
A B C D E F G H I J K L M N O P Q R S T U V W X Y
a b c d e f g h i j k l m n o p q r s t u v w x y
1 2 3 4 5 6 7 8 9 0
Arial
Arial the University’s Paragraph Font
Arial is used for standard body paragraphs and large amounts of text. In the base typography rules it is also applied to paragraph text, list items, small text, and button text.
A B C D E F G H I J K L M N O P Q R S T U V W X Y
a b c d e f g h i j k l m n o p q r s t u v w x y
1 2 3 4 5 6 7 8 9 0
Font Margin Reset & Parent-Based Spacing
Consistent Cross Browser Behavior: Browser default styles vary significantly across Chrome, Safari, Firefox, and others especially for heading and paragraph margins. Resetting all font element margins and paddings ensures a consistent baseline across all browsers and devices. currently using modern-normalize/3.0.1
Controlled Layout Rhythm: By removing baked in spacing from typographic elements, layout and vertical rhythm are explicitly controlled through our design system’s spacing utilities (e.g., .in-*, .out-*, .in-dwn-*). This makes spacing predictable and manageable in modular or component-based design.
Separation of Concerns: Typography should define type style (size, weight, line-height), while spacing should be handled by layout rules or wrappers. This separation increases clarity, makes maintenance easier, and aligns with modern best practices in scalable UI development.
Improved Accessibility & Legibility: Uniform and intentional spacing helps users with cognitive or visual impairments scan and understand content more easily. Spacing handled at the container level also makes it easier to manage focus rings, touch targets, and screen reader boundaries without interference from unpredictable element-level margins.
Better Control in Responsive Layouts: Applying spacing via fluid clamp() based tokens and parent utilities allows dynamic adjustments across screen sizes while maintaining consistent spacing ratios. This prevents layout collapse or overflow issues caused by rigid, element-level margins.
Component Reusability & Overrides: By placing spacing on containers instead of font elements, components can be reused in different contexts (e.g., card headers, modals, forms) without needing to override unwanted margin styles. This reduces CSS bloat and improves design system scalability.
Reduced CSS Conflicts: Removing default element margins prevents spacing collisions when combining multiple typography elements in a container. Utility classes provide a declarative and conflict-free method to manage layout spacing.
Summary: All typography elements (headings, paragraphs, lists) are reset to remove browser default spacing. Padding and margin are instead applied using semantic utility classes at the container level. This improves layout consistency, cross-browser reliability, accessibility, and maintainability while supporting scalable, fluid spacing patterns throughout the design system.
Typography & Fonts Overview
Font Pairing & Usage:
- Headings (
h1-h6) use Stratum as the default typeface. - Proxima Nova can be used on titles by applying the .fs-* (h1 - h6) classes and the display size classes. These classes change font size and switch to the secondary font family. You can use the class .font-secondary to change the font family only, while keeping semantic structure.
- Arial is used for body text to ensure legibility across all devices.
- Use the Stratum and Proxima Nova combinations (link later)** listed in the guide for headings and titles to reinforce the structured, modern aesthetic of the brand.
Font Scaling:
- All fonts use css rems to allow for user overides, the (px) refrence is for design purposes where most design sofware will use a pixel base system.
- Font sizes are designed with fluid resizing for optimal readability on both mobile and desktop devices.
- Always ensure your text adheres to the recommended size guidelines for consistency.
- The listed font size guidelines use CSS clamp() functions, allowing text to scale automatically between a minimum, ideal, and maximum value. This ensures consistent readability across all screen sizes, from small mobile devices to large desktop displays.
- These values are defined in the global CSS stylesheet and should not be overridden.
WCAG Accessiblity Note:
There is no specific built-in letter-spacing value required by WCAG (Web Content Accessibility Guidelines). However, WCAG does recommend text and spacing guidance in Success Criterion 1.4.12: Text Spacing, which focuses on ensuring text is readable and adaptable for different users. While it doesn’t mandate one required built-in letter-spacing value, it does recommend that content can be adjusted without loss of information or functionality when the following minimum spacing adjustments are applied:
- Letter Spacing (Tracking): At least 0.12 times the font size.
- Line Height (Line Spacing): At least 1.5 times the font size.
- Paragraph Spacing: At least 2 times the font size.
- Word Spacing: At least 0.16 times the font size.
- These adjustments support users with disabilities such as dyslexia or low vision by allowing them to modify text presentation to better suit their needs.
A “large font” is text that is 18 points (24 pixels) or larger, or 14 points (18.66 pixels) and bold.
For AA level accessibility: For large text, the minimum contrast ratio is 3:1, while for normal text, a contrast ratio of 4.5:1 is required.
For AAA level accessibility: For large text, the minimum contrast ratio is 4.5:1, while for normal text, a contrast ratio of 7:1 is required.
For this design system, body copy should not go below 16px, and the base is set at 18px for readability. Ensure all fonts meet the required contrast ratio against their backgrounds to comply with WCAG 2.1 guidelines. For large text (18pt or 14pt bold and larger), a minimum contrast ratio of 3:1 is required.
Font notes:
Following the built-in styles and semantic structure helps reduce unnecessary or inconsistent font sizes. Using too many font sizes on a page can be visually confusing. Aim to minimize font variation by using the provided built-in options. and content templalates with minimal adjustments.
Transformations
To maintain brand consistency and a cohesive visual identity across all UVU platforms, buttons can be customized with a limited set of CSS style options. These customizations should enhance usability and aesthetics without deviating from UVU’s core branding principles.
The Web Content Accessibility Guidelines (WCAG) do not directly restrict or prohibit text transformations on buttons, such as changing text to uppercase, lowercase, or other styles. However, certain considerations related to readability, usability, and accessibility should be kept in mind when using text transforms:
WCAG & Usability Notes
WCAG doesn't enforce casing, but readability, understandability, and clear labels still matter.
Button text should be short, clear, and action-oriented regardless of case.
Avoid ambiguous or clever phrases, opt for clarity (Download Schedule (PDF), not Get it now!).
Links should clearly indicate their purpose. When a link is used to download a file, include an appropriate icon representing the file type. If icons are not available, display the file extension in parentheses.
Recommended Case for Buttons
When styling text for buttons, headings, or labels, case formatting affects readability and accessibility. CSS provides basic case transforms, while JavaScript extends support for more natural Title Case and Sentence case styles.
CSS Case Options (fallbacks)
- .uppercase →
SUBMIT FORM - .lowercase →
submit form - .capitalize →
Submit Form(first letter of every word) - .title-case →
Submit Form(CSS fallback = capitalize) - .sentence-case →
submit form(CSS fallback = lowercase)
Example of the Transform Options on Text
These same classes can also be used on headings or other text examples:
CSS-only fallback
this text will appear as uppercase
THIS TEXT WILL APPEAR AS LOWERCASE
this text will appear with every word capitalized
JavaScript-enhanced
this is an example of a title that should be properly formatted
THIS IS ALL UPPERCASE TEXT TO SENTENCE CASE. THIS SHOULD LOOK MORE NATURAL.
JavaScript Enhanced Cases
We use JavaScript in js/functions.js to provide smarter formatting for two text-transform helper classes:
- Title Case Script → Applies title capitalization with support for "small words" such as and, of, or the, unless they appear at the beginning or end.
- Sentence Case Script → Lowercases the full text block and capitalizes the first letter of the string. This creates a sentence-style result, but it does not automatically capitalize every sentence in a paragraph.
Examples in Buttons
Recommended:
Why This Matters
- Improves readability
- Supports accessibility and clear action labels
- Works even without JavaScript, thanks to built-in CSS fallbacks
- Keeps your source HTML easier to maintain than typing everything in all caps
Best Practice Recommendation
Use CSS for Text Transformation
It is better to use CSS for visual text transformation, rather than entering all text in uppercase in the HTML. This keeps the source content cleaner, more accessible, and easier to maintain.
Font Size and Spacing
When using uppercase text, make sure the font size and letter spacing maintain readability, especially for short labels, buttons, and navigation.
Line Height px Reference
This is a font size reference chart only. We already have paragraph and heading line-height tokens in the CSS, but the chart below can help when comparing type sizes in design files or checking readable spacing targets. For WCAG text spacing guidance, see W3.org - Text spacing.
| Line Height Multiplier | 16px | 18px | 20px | 22px | 24px | 27px | 32px | 39px | 48px | 58px | 71px | 86px | 105px | 127px |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| HEADINGS: 1.2x | 19.2 | 21.6 | 24 | 26.4 | 28.8 | 32.4 | 38.4 | 46.8 | 57.6 | 69.6 | 85.2 | 103.2 | 126 | 152.4 |
| LARGE TXT 20+: 1.4x | 22.4 | 25.2 | 28 | 30.8 | 33.6 | 37.8 | 44.8 | 54.6 | 67.2 | 81.2 | 99.4 | 120.4 | 147 | 177.8 |
| STANDARD LINE HEIGHT 20+: 1.5x | 24 | 27 | 30 | 33 | 36 | 40.5 | 48 | 58.5 | 72 | 87 | 106.5 | 129 | 157.5 | 190.5 |
| BODY TEXT: 1.6x | 25.6 | 28.8 | 32 | 35.2 | 38.4 | 43.2 | 51.2 | 62.4 | 76.8 | 92.8 | 113.6 | 137.6 | 168 | 203.2 |
| 1.75x | 28 | 31.5 | 35 | 38.5 | 42 | 47.25 | 56 | 68.25 | 84 | 101.5 | 124.25 | 150.5 | 183.75 | 222.25 |
Semantics
All web pages should be semantically structured, meaning that even with styles removed, the content should remain logical, readable, and accessible to all users.
A semantically structured web page uses proper HTML elements that convey the meaning and role of the content. This supports:
- Logical hierarchy: Headings, sections, navigation, and landmarks help organize content clearly.
- Readability without styles: If CSS fails to load, the document should still make sense.
- Accessibility: Assistive technologies rely on semantic tags to announce structure and context.
- SEO benefits: Search engines use semantic markup to better understand page content.
The .fs-* styles are visual typography utilities only. They control font size, line height, and in some cases font family, but they do not replace semantic heading tags or document structure.
Do not use .fs-* styles to define page structure.
Size reference
Semantic heading examples
Heading 1 - h1
Heading 2 - h2
Heading 3 - h3
Heading 4 - h4
Heading 5 - h5
Heading 6 - h6
Font class examples
Font 1 - .fs-h1
Font 2 - .fs-h2
Font 3 - .fs-h3
Font 4 - .fs-h4
Font 5 - .fs-h5
Font 6 - .fs-h6
Lists
- ul List item (li)
- ul List item (li)
- ul List item (li)
- ol List item (li)
- ol List item (li)
- ol List item (li)
- dl Description list term (dt)
- dl Description (dd)
- dl Description list term (dt)
- dl Description (dd)
Paragraph / buttons & links
Paragraph class - .fs-p
button class - .fs-b
Small text class - .fs-sm
Paragraph class with font-size will set text the modern rich academic environment. It should feel open, supportive, and driven by opportunity. The content should reflect student ambition, community connection, and accessible learning pathways. Like this in-line follow the styles for button size and make sure to add any other styles to match the in-line button and a bold element - like this.
button class fs-b
Display Font Sizes
CSS guide(s)
Font Weight
The typography tokens include font-weight variables from --fw-100 through --fw-900, and the utility classes map directly to those values in the typography base file.
| Weight Name | CSS Weight | Token | Class |
|---|---|---|---|
| Thin | 100 | --fw-100 | .fw-100 |
| Extra Light | 200 | --fw-200 | .fw-200 |
| Light | 300 | --fw-300 | .fw-300, .fw-light, .fw-sm |
| Regular | 400 | --fw-400 | .fw-400, .fw-regular, .fw-md |
| Medium | 500 | --fw-500 | .fw-500 |
| Semibold | 600 | --fw-600 | .fw-600 |
| Bold | 700 | --fw-700 | .fw-700, .fw-bold, .fw-lg |
| Extra Bold | 800 | --fw-800 | .fw-800 |
| Black | 900 | --fw-900 | .fw-900 |
Font Family + Weight Rules
| Selector(s) | Font Family Variable | Font Weight | Color Variable | Note |
|---|---|---|---|---|
| h1, h2, h3, h4, h5, h6, a | --font-primary | 500 base / 700 on h1-h3 and a | --color-dark-grey base / --color-uvu-green on h1-h3 and a | semantic heading and link rules |
| .fs-b | --font-body | 700 | --color-uvu-green | button text ends with body font-family and the green/bold override |
| .fs-xxxl, .fs-xxl, .fs-xl, .fs-lg, .fs-h1, .fs-h2, .fs-h3, .fs-h4, .fs-h5, .fs-h6 | --font-secondary | 700 | inherits current color unless another selector sets it | secondary display and heading styles |
| p, li, .fs-sm | --font-body | inherits default weight | inherits color | body text rules |
| .font-primary / .font-secondary / .font-body | font utility only | does not set weight | does not set color | font family swap helpers |
Font Reference
| Note | Type | Class | Static Variable | Clamp Variable | REM (Min) | PX (Min) | REM (Max) | PX (Max) |
|---|---|---|---|---|---|---|---|---|
| Stratum | Font Family | .font-primary | --font-primary | |||||
| Proxima Nova | Font Family | .font-secondary | --font-secondary | |||||
| Arial | Font Family | .font-body | --font-body | |||||
| Small Text | Font Size | .fs-sm | --fs-sm-static | --fs-sm | 0.8889rem | 16px | 0.9444rem | 17px |
| Paragraph | Font Size | .fs-p | --fs-p-static | --fs-p | 1rem | 18px | 1rem | 18px |
| Button | Font Size | .fs-b | --fs-b-static | --fs-b | 1rem | 18px | 1.1111rem | 20px |
| List Item | Font Size | .fs-li | --fs-li-static | --fs-li | 1rem | 18px | 1.1111rem | 20px |
| H6 | Font Size | .fs-h6 | --fs-h6-static | --fs-h6 | 1.05rem | 18.9px | 1.2222rem | 22px |
| H5 | Font Size | .fs-h5 | --fs-h5-static | --fs-h5 | 1.2rem | 21.6px | 1.5rem | 27px |
| H4 | Font Size | .fs-h4 | --fs-h4-static | --fs-h4 | 1.4rem | 25.2px | 1.7778rem | 32px |
| H3 | Font Size | .fs-h3 | --fs-h3-static | --fs-h3 | 1.6rem | 28.8px | 2.1667rem | 39px |
| H2 | Font Size | .fs-h2 | --fs-h2-static | --fs-h2 | 1.8rem | 32.4px | 2.6667rem | 48px |
| H1 | Font Size | .fs-h1 | --fs-h1-static | --fs-h1 | 2rem | 36px | 3.2222rem | 58px |
| Large | Font Size | .fs-lg | --fs-lg-static | --fs-lg | 2.5rem | 45px | 3.9444rem | 71px |
| X-Large | Font Size | .fs-xl | --fs-xl-static | --fs-xl | 3rem | 54px | 4.7778rem | 86px |
| XX-Large | Font Size | .fs-xxl | --fs-xxl-static | --fs-xxl | 3.5rem | 63px | 5.8333rem | 105px |
| XXX-Large | Font Size | .fs-xxxl | --fs-xxxl-static | --fs-xxxl | 4rem | 72px | 7.0556rem | 127px |
| Paragraph | Line Height | .lh-p | --lh-p | 1.2rem | 21.6px | 1.5rem | 27px | |
| Small Text | Line Height | .lh-sm | --lh-sm | 1.25rem | 22.5px | 1.575rem | 28.35px | |
| Heading 6 | Line Height | .lh-6 | --lh-h6 | 1.6rem | 28.8px | 1.952rem | 35.14px | |
| Heading 5 | Line Height | .lh-5 | --lh-h5 | 1.75rem | 31.5px | 2.25rem | 40.5px | |
| Heading 4 | Line Height | .lh-4 | --lh-h4 | 2.25rem | 40.5px | 2.67rem | 48.06px | |
| Heading 3 | Line Height | .lh-3 | --lh-h3 | 2.35rem | 42.3px | 3.25rem | 58.5px | |
| Heading 2 | Line Height | .lh-2 | --lh-h2 | 2.5rem | 45px | 3.3375rem | 60.08px | |
| Heading 1 | Line Height | .lh-1 | --lh-h1 | 3.25rem | 58.5px | 4.186rem | 75.35px | |
| Large Display | Line Height | .lh-lg | --lh-lg | 4rem | 72px | 5.5625rem | 100.13px | |
| X-Large Display | Line Height | .lh-xl | --lh-xl | 4.55rem | 81.9px | 6.9875rem | 125.78px | |
| XX-Large Display | Line Height | .lh-xxl | --lh-xxl | 5.2rem | 93.6px | 7.875rem | 141.75px | |
| XXX-Large Display | Line Height | .lh-xxxl | --lh-xxxl | 5.8rem | 104.4px | 9.325rem | 167.85px |
Fluid Font Size + Line Height Mapping
| Selector(s) | Font Variable | Line Height Variable |
|---|---|---|
| .fs-sm | --fs-sm | --lh-sm |
| .fs-b, a, b | --fs-b | --lh-p |
| .fs-li, li | --fs-li | --lh-p |
| .fs-p, p | --fs-p | --lh-p |
| h6, .fs-h6 | --fs-h6 | --lh-h6 |
| h5, .fs-h5 | --fs-h5 | --lh-h5 |
| h4, .fs-h4 | --fs-h4 | --lh-h4 |
| h3, .fs-h3 | --fs-h3 | --lh-h3 |
| h2, .fs-h2 | --fs-h2 | --lh-h2 |
| h1, .fs-h1 | --fs-h1 | --lh-h1 |
| .fs-lg | --fs-lg | --lh-lg |
| .fs-xl | --fs-xl | --lh-xl |
| .fs-xxl | --fs-xxl | --lh-xxl |
| .fs-xxxl | --fs-xxxl | --lh-xxxl |
Line Height & Letter Spacing Utility Classes
| Class | Variable | Type | REM | PX |
|---|---|---|---|---|
| .lh-xs | --lh-xs | Line Height | 1rem to 1.25rem | 18px to 22.5px |
| .lh-sm | --lh-sm | Line Height | 1.25rem to 1.575rem | 22.5px to 28.35px |
| .lh-p | --lh-p | Line Height | 1.2rem to 1.5rem | 21.6px to 27px |
| .lh-6 | --lh-h6 | Line Height | 1.6rem to 1.952rem | 28.8px to 35.14px |
| .lh-5 | --lh-h5 | Line Height | 1.75rem to 2.25rem | 31.5px to 40.5px |
| .lh-4 | --lh-h4 | Line Height | 2.25rem to 2.67rem | 40.5px to 48.06px |
| .lh-3 | --lh-h3 | Line Height | 2.35rem to 3.25rem | 42.3px to 58.5px |
| .lh-2 | --lh-h2 | Line Height | 2.5rem to 3.3375rem | 45px to 60.08px |
| .lh-1 | --lh-h1 | Line Height | 3.25rem to 4.186rem | 58.5px to 75.35px |
| .lh-lg | --lh-lg | Line Height | 4rem to 5.5625rem | 72px to 100.13px |
| .lh-xl | --lh-xl | Line Height | 4.55rem to 6.9875rem | 81.9px to 125.78px |
| .lh-xxl | --lh-xxl | Line Height | 5.2rem to 7.875rem | 93.6px to 141.75px |
| .lh-xxxl | --lh-xxxl | Line Height | 5.8rem to 9.325rem | 104.4px to 167.85px |
| .ls-sm | --ls-sm | Letter Spacing | 0.0278rem | 0.5px |
| .ls-md | --ls-md | Letter Spacing | 0.0417rem | 0.75px |
| .ls-lg | --ls-lg | Letter Spacing | 0.0556rem | 1px |
| .ls-xl | --ls-xl | Letter Spacing | 0.0694rem | 1.25px |
| .ls-xxl | --ls-xxl | Letter Spacing | 0.0833rem | 1.5px |
| .ls-xxxl | --ls-xxxl | Letter Spacing | 0.12em | relative |
File Reference
| Topic | File |
|---|---|
| Typography tokens | css/tokens/wg-tokens-typography.css |
| Typography classes and utilities | css/base/wg-base-typography.css |
| Container classes | css/utilities/wg-utilities-containers.css |
| Anchor tab styling | css/components/wg-nav.css |
| Title case and sentence case JavaScript | js/functions.js |
It seems that you have reduce motion enabled!