Typography

UI System Font

Typography is one of the pillars that any user experience is built upon. One of the philosophies of Iris is to meet users where they are and to provide a comfortable and familiar interaction in our application. In modling that goal, the typography in Iris utilizes system fonts to ensure a seamless engagement based on the device. Below are the fonts that are used by each of the individual platforms:

macOS and iOS

Windows

Android

Usage

Name Size Line Height Usage

Hero

44px 55px Large web banner image, prominently placed front and center

H1

32px 40px Widget Headers

H2

24px 30px Secondary Headers, Modal Headers

H3

20px 25px Secondary Headers

H4

18px 22.5px Secondary Headers
Body(base) 16px 20px Body
Small 14px 17.5px Button text, secondary info copy, tool tip copy

For implementation information please see Utility Classes/Font

Examples

Line Height

Recommended line length is 50-75 characters. Keeping your text box to a width of 500 pixels will ensure optimal readibilty.

  • Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text.
  • Too narrow – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm.

Baseline

Weights and styles are an important UX element. Bold and italic help readers to see structure and to skim the text more efficiently. Use font weight to call out the most important information.