Typography

Typography is an effective tool that adds visual tone to complement our applications and help them stand out. Iowa's brand fonts reflect our personality and help reinforce our identity.

Fonts

Roboto

Our primary font is Roboto, which is activated with the font-sans CSS class. Roboto is our workhorse font and can be used for any purpose including subheads, body text, and controls.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789

The quick brown fox jumps over the lazy dog

Zilla Slab

Zilla Slab is our accent font and activated with the font-serif class. Its slab-serif body provides a pleasant contrast to the clean lines of Roboto, allowing designers to create a strong visual hierarchy.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789

The quick brown fox jumps over the lazy dog

Antonio

Antonio is an important font on collegiate and departmental sites. It is UIDS' primary headline font and is seen on their call-to-action buttons. The brand manual states that Antonio is "best when used large" and emphasizes that Antonio should never be used as body text. AIS Components exposes Antonio through the font-caps class, but we have found it is usually not a good fit for administrative applications. Consider using Antonio on landing pages or for targeted pieces of data that need to stand out. When using font-caps on a button, the button should be size="xl" or larger.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789

The quick brown fox jumps over the lazy dog

Headings

Users are able to best navigate and understand applications that have a strong information architecture and visual hierarchy. Users should be able to scan a page and quickly understand what the primary function is along with identifying available sections and actions.

We want our applications to have both a strong informaton architecture and a strong visual hierarchy that allow our users to quickly understand and navigate

Details coming soon.