Web Elements & Styles

Accessibility

Web content that is themed with UND styles should follow UND's accesesibility policies.

Focus Styles

All elements need appropriate focus styles. The following focus style is UND's standard focus treatment.

  outline: 2px dashed;
			outline-offset: .25rem;

Accessible Color Contrast

This Text Color Contrast Grid for UND can help prevent the common issue of low contrast due to the usage of our brand green on white which only satisfies accessible color contrast at large text sizes (18px and bold or 24px).

The darker green #00662c should only be used to meet contrast requirements for green text on white or light gray backgrounds at sizes 24px and under. Our brand green #009A44 should be used in all other cases.

Basic Typography

UND uses rem based on a 16px root size.

Body text links should be underlined and #00662c.
The underline can be removed on :hover.

Text Alignment

Text alignment guidance for UND is in line with guidance from Typography | U.S. Web Design System (USWDS)

Left align text in almost all cases. Left aligned text is easier to read because it gives the eye a constant starting point.

Headings

Most headings use the following margins: margin: 1.2em 0 0.5em;. Be aware that some headings (like the h1) have different margins.

Example Heading 1

h1 = is a fluid font size, 43px to 72px, and #000.

The following CSS can be used to achieve fluid type for the h1 element.

h1 { margin: 0 0 0.67em 0; font-size: 43px; }

			@media ( min-width: 320px ) {
			h1 { font-size: calc(43px + 29 * (100vw - 320px) / 1120); }
			}

			@media ( min-width: 1440px ) {
			h1 { font-size: 72px; }
			}

Example Heading 2

h2 = 2.25rem, #009a44

Example Heading 3

h3 = 1.625rem, #009a44

Example Heading 4

h4 = 1.25rem, #000

Example Heading 5

h5 = 1.125rem, #000

Example Heading 6

h6 = 1rem, #000

CSS Font Stacks

Trade Gothic	`'Trade Gothic', 'Oswald Medium', 'Oswald', Arial, sans-serif`
Sentinel Medium	`'Sentinel SSm A', 'Sentinel SSm B', 'Trocchi', 'Georgia', serif`
Helvetica Neue	`'Helvetica Neue', 'Helvetica', Arial, sans-serif`

Fallback Fonts

UND's fallback fonts, Oswald Medium and Trocchi, are available from Google Fonts and typography websites like FontSquirrel. Arial is a websafe font that does not need to be imported.

Official Font	Fallback Font
Trade Gothic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789	Oswald Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Sentinel Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789	Trocchi Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Helvetica Neue ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789	Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Official Font

Fallback Font

Trade Gothic