Typography
font size - typefaces
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 WCAG accessibility, all fonts must have a minimum size of 16px. the base is set at 18px for readability.
Stratum
Stratum is the University’s Primary Font
Stratum is primarily used for headers (H2–H6) and can be applied in typography as a visual statement. H1 is reserved and included as part of the page identity (Hero or Header ?) do not use H1 in the body of the page. 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 for titles in the hero section or page headers (H1) maybe ; ). It can be used to make text stand out and is suitable for display or ad-style text to 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.
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 which changes the fonts size and color, you can use the class .font-secondary to change the font family only, use these options to create a visual hierarchy while maintaining 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 letter-spacing rule in WCAG (Web Content Accessibility Guidelines) related directly to accessibility. However, WCAG does recommend certain text and spacing guidelines 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 a specific letter spacing (tracking), 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.
Ensure all fonts meet a minimum contrast ratio of 4.5:1 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. Use the UVU brand colors in accordance with this guideline to maintain accessibility and readability for text.
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 prioritizes readability, understandability, and text distinguishability (Success Criterion 3.1.5).
Button text should be short, clear, and action-oriented regardless of case.
Avoid ambiguous or clever phrases—opt for clarity (Download Shedule (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 can extend support to 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)
Recommended Case for Paragraphs
These same case rules apply to headings, labels, and body text. For example:
CSS-only (fallbacks)
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
Because CSS doesn’t provide Title Case or Sentence case, JavaScript utilities are added and can convert text more accurately:
- Title Case Script →
Save Changes,Submit Form
Respects rules for short/common words like and, of, the. - Sentence Case Script →
Save changes,Submit form
Capitalizes only the first word of each sentence for natural readability.
Examples in Buttons
Recommended (best readability + accessibility):
Why These Matter
- Improve readability across all age groups.
- Ensure natural screen reader pronunciation.
- Provide clarity for users with cognitive disabilities.
- Offer consistent fallback styles when JavaScript is not available.
Key Considerations
Readable Text
WCAG 2.4.4 (Link Purpose) and 3.1.5 (Reading Level) emphasize that text should be easily readable and understandable. Transforming text to all uppercase may make it harder to read, especially for users with dyslexia or other reading difficulties. Uppercase text is often perceived as more difficult to read because it lacks the word shape cues provided by mixed-case text.
Use all-uppercase sparingly and ensure that the text remains understandable. For example, avoid lengthy sentences in all caps.
Screen Reader Interpretation
Screen readers typically read the underlying text, not the visual transformation. For example, if the text of a button is coded as “Submit” and transformed to uppercase using CSS (text-transform: uppercase;), the screen reader will read it as “Submit” rather than spelling out the letters. This behavior is generally acceptable, but it’s crucial that the meaning of the button is clear in its original form, regardless of visual transformation.
Contrast Ratio
Using uppercase text can sometimes decrease readability if the font size is small or if there is low contrast between text and background. WCAG 1.4.3 (Contrast) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. For uppercase text, make sure the font size and contrast ratio meet these criteria to ensure readability.
Custom Styling and Consistency
If text transformations are used to ensure consistency in branding or design, ensure that these choices are consistent across the entire site. A mix of uppercase and mixed-case buttons may create confusion for users, especially those with cognitive disabilities.
Best Practice Recommendation
Use CSS for Text Transformation:
It is better to use CSS for text transformations like text-transform: uppercase; rather than directly typing text in uppercase in HTML. This ensures that the underlying text remains accessible and allows users to adjust styles if needed for their readability preferences.
Font Size and Spacing:
When using uppercase text, ensure the font size is large enough and the letter spacing (letter-spacing) is adjusted to enhance readability.
Line Height px Reference
This is a reference only chart - we use default paragraph settings - refer to W3.org for information on meeting AA standards - W3.org - Text spacing
| Line Height Multiplier | 16px | 18px | 20px | 22px | 27px | 32px | 39px | 48px | 58px | 71px | 86px | 105px | 127px |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| HEADINGS: 1.2x | 19.2 | 21.6 | 24.0 | 26.4 | 32.4 | 38.4 | 46.8 | 57.6 | 69.6 | 85.2 | 103.2 | 126.0 | 152.4 |
| LARGE TXT 20+: 1.4x | 22.4 | 25.2 | 28.0 | 30.8 | 37.8 | 44.8 | 54.6 | 67.2 | 81.2 | 99.4 | 120.4 | 147.0 | 177.8 |
| STANDARD LINE HEIGHT 20+: 1.5x | 24.0 | 27.0 | 30.0 | 33.0 | 40.5 | 48.0 | 58.5 | 72.0 | 87.0 | 106.5 | 129.0 | 157.5 | 190.5 |
| BODY TEXT: 1.6x | 25.6 | 28.8 | 32.0 | 35.2 | 43.2 | 51.2 | 62.4 | 76.8 | 92.8 | 113.6 | 137.6 | 168.0 | 203.2 |
| 1.75x | 28.0 | 31.5 | 35.0 | 38.5 | 47.25 | 56.0 | 68.25 | 84.0 | 101.5 | 124.25 | 150.5 | 183.75 | 222.25 |
Semantics
All web pages should be semantically structured, meaning that even with all styles removed, the content should remain logically organized, readable, and accessible to all users - including those using assistive technologies.
A semantically structured web page uses proper HTML elements that convey the meaning and role of the content. This ensures:
- Logical hierarchy: Headings (< h1 > - < h6 >), sections (< section >, < article >, < nav >, etc.) and landmarks help organize content clearly.
- Readability without styles: If CSS is disabled or fails to load, the document should still make sense visually and structurally.
- Accessibility: Screen readers and other assistive technologies rely on semantic tags to convey structure, navigation, and context to users with disabilities.
- SEO benefits: Search engines use semantic markup to understand page content and improve search visibility.
The .fs-* styles are intended solely for visual or typographic enhancements. Classes like .fs-1 through .fs-6 replicate the font sizes of heading levels (h1–h6) using a secondary font family, and should be used for design purposes only—not as replacements for semantic heading tags.
Do not use .fs-* styles to define page structure.
Heading 1 - h1
Heading 2 - h2
Heading 3 - h3
Heading 4 - h4
Heading 5 - h5
Heading 6 - h6
Font 1 - .fs-h1
Font 2 - .fs-h2
Font 3 - .fs-h3
Font 4 - .fs-h4
Font 5 - .fs-h5
Font 6 - .fs-h6
List's
- 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 Defines Description (dd)
- dl Description List term (dt)
- dl Defines Description (dd)
Paragraph / buttons & links
Paragraph class (min 20px) - .fs-p
Button text (min 20px) class - .fs-b
Small text (min 16px) class - .fs-sm
Paragraph text with responsive scaling demonstrates how content adapts across devices. At Utah Valley University, our design system ensures clarity and accessibility for all users. In-line button example: font size is automatically increased on links and still maintains scalability, supporting consistent readability throughout the site.
Button Text - .fs-b
Display Font Sizes
Font Weight
| Font | Weight Name | CSS Weight | Class |
|---|---|---|---|
| Arial | Regular | 400 | .fw-400 |
| Arial | Bold | 700 | .fw-700 |
| Arial | Italic | 400 (italic) | .fw-400 |
| Arial | Bold Italic | 700 (italic) | .fw-700 |
| Stratum | Light | 300 | .fw-300 |
| Stratum | Regular | 400 | .fw-400 |
| Stratum | Medium | 500 | .fw-500 |
| Stratum | Semibold | 600 | .fw-600 |
| Stratum | Bold | 700 | .fw-700 |
| Stratum | Black | 900 | .fw-900 |
| Proxima Nova | Thin | 100 | .fw-100 |
| Proxima Nova | Extra Light | 200 | .fw-200 |
| Proxima Nova | Light | 300 | .fw-300 |
| Proxima Nova | Regular | 400 | .fw-400 |
| Proxima Nova | Medium | 500 | .fw-500 |
| Proxima Nova | Semibold | 600 | .fw-600 |
| Proxima Nova | Bold | 700 | .fw-700 |
| Proxima Nova | Extra Bold | 800 | .fw-800 |
| Proxima Nova | Black | 900 | .fw-900 |
Font Family + Weight Rules
| Selector(s) | Font Family Variable | Font Weight | Color Variable | Note |
|---|---|---|---|---|
| h1, h2, h3, h4, h5, h6, .fs-b, a | --font-primary | 500 | --color-dark-grey | base rules |
| h1, h2, h3, .fs-b, a | --font-primary | 700 | --color-uvu-green | override color to green, weight to (strong / bold) |
| .fs-xxxl, .fs-xxl, .fs-xl, .fs-lg, .fs-h1, .fs-h2, .fs-h3, .fs-h4, .fs-h5, .fs-h6 | --font-secondary | 700 | secondary headings | |
| p, li, .fs-sm, .fs-b | --font-body | body text rules |
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 | --fs-sm-fluid | 0.8889rem | 16px | 1.1111rem | 20.0 |
| Paragraph | Font Size | .fs-p | --fs-p | --fs-p-fluid | 1.0rem | 18px | 1.0rem | 18.0 |
| Button | Font Size | .fs-b | --fs-b | --fs-b-fluid | 1.0rem | 18px | 1.2222rem | 22.0 |
| List Item | Font Size | .fs-li | --fs-li | --fs-li-fluid | 1.0rem | 18px | 1.2222rem | 22.0 |
| H6 | Font Size | .fs-h6 | --fs-h6 | --fs-h6-fluid | 1.1111rem | 20px | 1.3333rem | 24.0 |
| H5 | Font Size | .fs-h5 | --fs-h5 | --fs-h5-fluid | 1.3333rem | 24px | 1.6667rem | 30.0 |
| H4 | Font Size | .fs-h4 | --fs-h4 | --fs-h4-fluid | 1.6667rem | 30px | 1.8889rem | 34.0 |
| H3 | Font Size | .fs-h3 | --fs-h3 | --fs-h3-fluid | 2.0rem | 36px | 2.3333rem | 42.0 |
| H2 | Font Size | .fs-h2 | --fs-h2 | --fs-h2-fluid | 2.5rem | 45px | 2.8333rem | 51.0 |
| H1 | Font Size | .fs-h1 | --fs-h1 | --fs-h1-fluid | 3.0rem | 54px | 3.4444rem | 62.0 |
| Large | Font Size | .fs-lg | --fs-lg | --fs-lg-fluid | 3.6667rem | 66px | 4.2222rem | 76.0 |
| X-Large | Font Size | .fs-xl | --fs-xl | --fs-xl-fluid | 4.5rem | 81px | 5.0556rem | 91.0 |
| XX-Large | Font Size | .fs-xxl | --fs-xxl | --fs-xxl-fluid | 5.5rem | 99px | 6.1667rem | 111.0 |
| XXX-Large | Font Size | .fs-xxxl | --fs-xxxl | --fs-xxxl-fluid | 6.5rem | 117px | 7.5rem | 135.0 |
| Paragraph | Line Height | .lh-p | --lh-p | 1.5rem | 27px | |||
| Headings | Line Height | .lh-h | --lh-h | 1.25rem | 22px | |||
| Compact | Line Height | .lh-tight | --lh-tight | 1.15rem | 20px |
Fluid Font Size + Line Height Mapping
| Selector(s) | Font Variable | Line Height Variable |
|---|---|---|
| .fs-sm | --fs-sm-fluid | --lh-sm |
| .fs-b, a, b, i | --fs-b-fluid | --lh-p |
| .fs-li, li | --fs-li-fluid | --lh-p |
| .fs-p, p | --fs-p-fluid | --lh-p |
| h6, .fs-h6 | --fs-h6-fluid | --lh-h6 |
| h5, .fs-h5 | --fs-h5-fluid | --lh-h5 |
| h4, .fs-h4 | --fs-h4-fluid | --lh-h4 |
| h3, .fs-h3 | --fs-h3-fluid | --lh-h3 |
| h2, .fs-h2 | --fs-h2-fluid | --lh-h2 |
| h1, .fs-h1 | --fs-h1-fluid | --lh-h1 |
| .fs-lg | --fs-lg-fluid | --lh-lg |
| .fs-xl | --fs-xl-fluid | --lh-xl |
| .fs-xxl | --fs-xxl-fluid | --lh-xxl |
| .fs-xxxl | --fs-xxxl-fluid | --lh-xxxl |
Line Height & Letter Spacing Utility Classes
| Class | Variable | Type | REM | PX |
|---|---|---|---|---|
| .lh-sm | --lh-sm | Line Height | 1.3rem | 20.8px |
| .lh-p | --lh-p | Line Height | 1.5rem | 24px |
| .lh-6 | --lh-6 | Line Height | 1.1rem | 17.6px |
| .lh-5 | --lh-5 | Line Height | 1.2rem | 19.2px |
| .lh-4 | --lh-4 | Line Height | 1.3rem | 20.8px |
| .lh-3 | --lh-3 | Line Height | 1.4rem | 22.4px |
| .lh-2 | --lh-2 | Line Height | 1.5rem | 24px |
| .lh-1 | --lh-1 | Line Height | 1.6rem | 25.6px |
| .lh-lg | --lh-lg | Line Height | 1.7rem | 27.2px |
| .lh-xl | --lh-xl | Line Height | 1.8rem | 28.8px |
| .lh-xxl | --lh-xxl | Line Height | 2rem | 32px |
| .ls-sm | --ls-sm | Letter Spacing | 0.005rem | 0.08px |
| .ls-md | --ls-md | Letter Spacing | 0.01rem | 0.16px |
| .ls-lg | --ls-lg | Letter Spacing | 0.015rem | 0.24px |
| .ls-xl | --ls-xl | Letter Spacing | 0.02rem | 0.32px |
| .ls-xxl | --ls-xxl | Letter Spacing | 0.03rem | 0.48px |
| .ls-xxxl | --ls-xxxl | Letter Spacing | 0.04rem | 0.64px |