Create easily digestible breaks in your content using headings. This will help your audience determine where they need to go to find the information they need on each page.
Basic Headings
By default headings use the font Montserrat and are black in color.
Welcome to Undergraduate Studies
Understanding Your Curriculum
Virtual Campus Tours
Faculty & Staff
Student Groups
Resources
Accessible Headings
- Headings should always appear in numerical (rank) order. Using headings out of order can be confusing for screen-readers & assistive technologies.
- It is okay to skip heading ranks when closing subsections, for instance, an
<h2>beginning a new section, can follow an<h4>as it closes the previous section. <h1>is generally reserved for the page title or the marquee title on a landing or homepage.- To avoid accessibility concerns you can use faux headings where needed.
Read more about accessibility and headings from the Web Accessibility Initiative.
Heading Colors
In addition to the default black, you can also choose between 3 other alternate colors to fit your UI needs; .red, .gray and .white.
Welcome to Undergraduate Studies
Understanding Your Curriculum
Alternate Headings
The font Vitesse can be used as an alternate by using the .alt class on any heading. Alt Headings can be used in conjunction with color classes.