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 |
|---|---|---|
| 400 | normal | The quick red fox jumped over the lazy brown dog |
| 600 | semi-bold | The quick red fox jumped over the lazy brown dog |
| 700 | bold | 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-normal | 400 |
$indi-font-weight-semi-bold | 600 |
$indi-font-weight-bold | 700 |
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 |