Typography

Arranging type to be legible, readable, and appealing when displayed. The arrangement involves selecting typefaces, sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), etc.

Font Sets

Consistent and accurate usage of our approved typefaces reinforce our brand identity.

  • Sans
    Aa

    Source Sans Pro

    • ABCDEFGHIJKLMNOPQRSTUVWXYZ
    • abcdefghijklmnopqrstuvwxyz
    • (.,;:'"$#@!&*) 0123456789
  • Serif
    Aa

    Source Serif Pro

    • ABCDEFGHIJKLMNOPQRSTUVWXYZ
    • abcdefghijklmnopqrstuvwxyz
    • (.,;:'"$#@!&*) 0123456789
  • Websafe
    Aa

    Arial

    • ABCDEFGHIJKLMNOPQRSTUVWXYZ
    • abcdefghijklmnopqrstuvwxyz
    • (.,;:'"$#@!&*) 0123456789

Google Fonts Embed

Example Google Fonts head link markup for use in your application or sample prototype.

<link href="//fonts.googleapis.com" rel="preconnect" />
<link href="//fonts.gstatic.com" rel="preconnect" />
<link href="//fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;600;700;800;900&family=Source+Serif+Pro:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />

Live Demo

🚧 WORK IN PROGRESS!
Example typography content with various combinations in action.