Typography

Clear typography is critical to the effective communication of hierarchy within UrbanFootprint's products.

General Guidelines

• Ensure sufficient contrast between text color and background color.

• Type should be light and well-spaced for legibility.

• Use bold type weights sparingly, but apply to titles and elements that should be emphasized within a line of text.

Typefaces

Interface text

Our primary interface typeface is Roboto. The font features friendly and open curves, which contribute to easy readability.

Download Roboto from Google Fonts under the Apache License, Version 2.0

Accent text

Our accent typeface is Roboto Mono. Roboto Mono can be used in tables for consistent spacing and to differentiate numeric values from non-numeric text.

Download Roboto Mono from Google Fonts under the Apache License, Version 2.0

Sizing

A successful type hierarchy establishes the order of importance of elements on a page. Consistent scaling, weights, and capitalization are used to create distinction between heading levels and provide users with familiar focus points when scanning text.

Text	Class	Properties
	text-xs	font-size: 1rem line-height: 1.5rem
	text-sm	font-size: 1rem line-height: 1.5rem
	text-base	font-size: 1rem line-height: 1.5rem
	text-lg	font-size: 1.125rem line-height: 1.75rem
	text-xl	font-size: 1.25rem line-height: 2rem

Alignment

Typography should typically be left aligned. Left aligned text is easier to read than centered text for paragraphs.

Line height

Line height for most text should be 150% relative to the size of the text. For very small labels or very large headers, line height can scale appropriately,

Spacing

White space is important as it creates balance and harmony. It is also commonly used to lead the user/reader from one element to another. Spacing between typographic elements should be spaced out enough to feel light, but still remain close enough to show proper relationships between elements.

Accessibility

Text contrast

All text should be legible and meet color contrast standards to ensure that content is accessible by everyone, regardless of any disability or user device. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text, and 3:1 to large text.

To learn more, refer to the http://www.section508.gov.

Accessible Text Combinations

Black text is recommended for use on lighter backgrounds, and white text on dark backgrounds.

To test text and background color combinations, you can use webaim.org/resources/contrastchecker (among many other open source tools available online)

	Text	Background	Contrast Ratio ↓
	#FFFFFF	#000000
	#000000	#FFFFFF
	#000000	#F5F7FB
	#FFFFFF	#1E2135
	#FFFFFF	#1D4ED8
	#1D4ED8	#FFFFFF
	#1D4ED8	#F5F7FB
	#000000	#607D9C

Inaccessible Combinations

The following combinations are examples of text where the contrast ratio with the background color is too low. These combinations should never be used in interface components.

	Text	Background	Contrast Ratio ↓
	#FFFFFF	#607D9C
	#000000	#1D4ED8
	#1D4ED8	#607D9C

Using background opacity

Using text opacity instead of using grey text and icons on top of colored backgrounds, create better contrast by displaying white or black text with reduced opacity.

For example, black text displayed at 75% opacity on a light blue background gives the text an appearance of black, with a hint of UF blue.

Use a light background color behind dark text to preserve contrast.

Don't use a dark background color behind dark text, as it reduces contrast.

Dark text on light backgrounds

Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels:

• High emphasis text has an opacity of 87%

• Medium-emphasis text and hint text have opacities of 60%

• Disabled text has an opacity of 38%