# Typography
Clear typography is critical to the effective communication of hierarchy within UrbanFootprint's products.
### General Guidelines
* Ensure sufficient contrast between text color and background color.
* Type should be light and well-spaced for legibility.
* Use bold type weights sparingly, but apply to titles and elements that should be emphasized within a line of text.
## Typefaces
### Interface text
Our primary interface typeface is `Roboto`. The font features friendly and open curves, which contribute to easy readability.
{% hint style="info" %}
Download [Roboto](https://fonts.google.com/specimen/Roboto) from Google Fonts under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)
{% endhint %}
.png?alt=media\&token=b2ec2bc1-5347-4211-9bdd-7ac258625d19)
### Accent text
Our accent typeface is `Roboto Mono`. Roboto Mono can be used in tables for consistent spacing and to differentiate numeric values from non-numeric text.
{% hint style="info" %}
Download [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono#standard-styles) from Google Fonts under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)
{% endhint %}
%20copy.png?alt=media\&token=80518ab7-d014-438a-9075-1e7e3136deb8)
## Sizing
A successful type hierarchy establishes the order of importance of elements on a page. Consistent scaling, weights, and capitalization are used to create distinction between heading levels and provide users with familiar focus points when scanning text.
| Text | Class | Properties |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------- |
| .png?alt=media&token=5b29d6d9-7968-4bd2-82d0-9f75bb6572c9)
| `text-xs` | font-size: 1rem
line-height: 1.5rem
|
| %20copy.png?alt=media&token=70c6fc6e-bc43-4756-b31a-3c990c991448)
| `text-sm` | font-size: 1rem
line-height: 1.5rem
|
| %20copy%202.png?alt=media&token=2c94a941-9a59-41b3-87bf-6c11e2913d35)
| `text-base` | font-size: 1rem
line-height: 1.5rem
|
| %20copy%203.png?alt=media&token=ec80c00f-1f3e-4b8e-ae71-fdba255c5ce1)
| `text-lg` | font-size: 1.125rem
line-height: 1.75rem
|
| %20copy%204.png?alt=media&token=1a2f207d-7dba-42b2-aca0-9858e187cd21)
| `text-xl` | font-size: 1.25rem
line-height: 2rem
|
## Alignment
Typography should typically be left aligned. Left aligned text is easier to read than centered text for paragraphs.
## Line height
Line height for most text should be 150% relative to the size of the text. For very small labels or very large headers, line height can scale appropriately,
.png?alt=media\&token=28758351-3475-4528-b192-fe6fc5682eef)
## Spacing
White space is important as it creates balance and harmony. It is also commonly used to lead the user/reader from one element to another. Spacing between typographic elements should be spaced out enough to feel light, but still remain close enough to show proper relationships between elements.
## Accessibility
### Text contrast
All text should be legible and meet color contrast standards to ensure that content is accessible by everyone, regardless of any disability or user device. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a **4.5:1** color contrast between text and background for normal text, and **3:1** to large text.
{% hint style="info" %}
To learn more, refer to the .
{% endhint %}
### Accessible Text Combinations
Black text is recommended for use on lighter backgrounds, and white text on dark backgrounds.
{% hint style="info" %}
To test text and background color combinations, you can use [webaim.org/resources/contrastchecker](https://webaim.org/resources/contrastchecker/) (among many other open source tools available online)
{% endhint %}
| Text | Background | Contrast Ratio ↓ |
|---|
| Text | Background | Contrast Ratio ↓ |
 | #FFFFFF | #000000 | .png?alt=media&token=44be55bd-20ed-4db6-8c94-68390782a715) |
.png?alt=media&token=e4cd7f64-76ed-4136-9d88-015b11972b55) | #000000 | #FFFFFF | |
 | #000000 | #F5F7FB | .png?alt=media&token=8421b769-688d-41c6-82d8-a8fb9f619260) |
 | #FFFFFF | #1E2135 | .png?alt=media&token=4a829b7f-264a-4f6b-bce6-19a3c23732e3) |
 | #FFFFFF | #1D4ED8 |  |
.png?alt=media&token=5432f7f8-4032-48e2-baf8-97cd33a1c317) | #1D4ED8 | #FFFFFF | |
 | #1D4ED8 | #F5F7FB |  |
 | #000000 | #607D9C | .png?alt=media&token=0c5081d6-a525-4221-a6eb-b9aa64883006) |
### Inaccessible Combinations
The following combinations are examples of text where the contrast ratio with the background color is too low. These combinations should never be used in interface components.
| Text | Background | Contrast Ratio ↓ |
|---|
| Text | Background | Contrast Ratio ↓ |
 | #FFFFFF | #607D9C | .png?alt=media&token=11c8f9f0-d5ab-44f3-bc10-ae6b07bf35f8) |
 | #000000 | #1D4ED8 |  |
 | #1D4ED8 | #607D9C |  |
### Using background opacity
Using text opacity instead of using grey text and icons on top of colored backgrounds, create better contrast by displaying white or black text with reduced opacity.
For example, black text displayed at 75% opacity on a light blue background gives the text an appearance of black, with a hint of UF blue.
.png?alt=media\&token=ef05f45c-e3b9-4483-aaf7-f41dde565c1f)
Use a light background color behind dark text to preserve contrast.
.png?alt=media\&token=95b31f0d-cb77-468a-aa6c-c372d6aa66bc)
Don't use a dark background color behind dark text, as it reduces contrast.
###
### Dark text on light backgrounds
Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels:
• High emphasis text has an opacity of 87%
• Medium-emphasis text and hint text have opacities of 60%
• Disabled text has an opacity of 38%
.png?alt=media\&token=659d9ace-ab41-4d42-ae87-de522b8e2e53)