Typography

Typography involves selecting and adjusting typefaces, sizes, spacing, and layout to make text legible, understandable, and visually appealing. Good typography enhances the user experience by establishing a visual hierarchy and clearly communicating concepts.

Overview

Use this library to find the typography you need and learn when and how to use it, ensuring consistency across all USAC products.

Font

Source Sans 3

Use the Source Sans 3 font family for web properties and applications. Designed for optimal readability with a modern, clean design, this sans-serif typeface is versatile and web-friendly. It is also open-source, aligning with USAC's mission to provide connectivity and access for everyone. As a free font available through Google Fonts it is easy to download and use.

NAME WEIGHT SPECIMEN
400normal
The quick red fox jumped over the lazy brown dog
600semi-bold
The quick red fox jumped over the lazy brown dog
700bold
The quick red fox jumped over the lazy brown dog

Tokens

Use these tokens for font families as a reference and for variable use.

VARIABLE NAME VALUE
$indi-font-family-sans-serif'Source Sans 3', sans-serif
$indi-font-weight-normal400
$indi-font-weight-semi-bold600
$indi-font-weight-bold700

Hierarchy

Use this as a baseline of headings for creating effective hierarchy within your layouts.

Omit vertical spacing that can disrupt display within tight component designs by using these mixins. To add vertical spacing between headings, text, and other elements, apply Space concepts such as stacking as exhibited by the Long Form Text component.

All text styles should be Source Sans 3.

Headings

MIXIN/OUTCOME < 600px (mobile) 600px to 1023px (tablet) 1024px + (desktop) WEIGHT/COLOR
heading-level-1-display()
H1 Display
32/38px 44/52px 56/64px 600/#FFFFFF
heading-level-1()
Heading 1
28/34px 32/38px 44/52px 600/#0052EB
heading-level-2()
Heading 2
24/32px 28/34px 32/38px 600/#262626
heading-level-3()
Heading 3
20/26px 24/32px 28/34px 600/#262626
heading-level-4()
Heading 4
18/24px 20/26px 24/32px 600/#262626
heading-level-5()
Heading 5
16/20px 18/24px 20/26px 700/#262626
heading-level-6()
Heading 6
16/20px 18/24px 20/26px 600/#262626
heading-level-7()
Heading 7
14/18px 16/20px 16/20px 700/#262626
heading-level-8()
Heading 8
14/18px 16/20px 16/20px 600/#262626

Body

MIXIN/OUTCOME < 600px (mobile) 600px to 1023px (tablet) 1024px + (desktop) WEIGHT/COLOR
body-level-1()
Body 1
Body 1
18/24px 20/26px 24/32px 400 or 600 /
#262626
body-level-2()
Body 2
Body 2
16/20px 18/24px 20/26px 400 or 600 /
#262626
body-level-3()
Body 3
Body 3
16/22px 16/22px 18/28px 400 or 600 /
#262626
body-level-4()
Body 4
Body 4
14/18px 16/20px 16/20px 400 or 600 /
#262626
body-level-5()
Body 5
Body 5
14/18px 14/18px 14/18px 400 or 600 /
#262626

Sizes

Use size tokens in your style to match Indigo's text element sizing. Font size and line height tokens are available for all headings, body styles, lists, and inputs.  

Each text style has three sizes: extra small (XS) for mobile, small (S) for tablets, and large (L) for desktops.

Refer to the source code for a complete list of font-related tokens.

VARIABLE NAME VALUE
$indi-font-size-heading-level-1-display-xs 32px
$indi-line-height-heading-level-1-display-xs38px
$indi-font-size-heading-level-1-display-s44px
$indi-line-height-heading-level-1-display-s52px
$indi-font-size-heading-level-1-display-l56px
$indi-line-height-heading-level-1-display-l64px

Web Fonts

To use this font family in your website or app, include the Google Web Font <link> below in the <head> section of your document.