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




Name Size Line Height Usage


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


32px 40px Widget Headers


24px 30px Secondary Headers, Modal Headers


20px 25px Secondary Headers


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


Line Length

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.


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.