Definition
Typography is the use of different combinations of font families and text styles to create a visual hierarchy and highlight essential information, while making sure the text is easy to read throughout the user interface.
Usage
Firefox relies on fonts provided by the user's operating system. Not only do operating systems fonts provide a familiar environment to the user, but custom fonts takes up space within applications, increasing bundle sizes, and lowering performance.
Our type scales vary across Desktop, iOS, and Android. Therefore, refer to their respective sections for guidelines on how to use them.
Accessibility
To ensure visual accessibility, use colors that provide appropriate contrast between foreground and background. We strive to meet AAA contrast requirements and consider AA the minimum passable standard.
|
Minumum contrast |
AAA |
AA |
|---|---|---|
|
Regular text |
7:1 |
4.5:1 |
|
Large scale text |
4.5:1 |
3:1 |
Additionally, avoid using underlines to add emphasis to text as they are reserved for links.
Change log
|
Date |
Version |
Notes |
|---|---|---|
|
Jul 12, 2023 |
1.0.0 |
Introduced typography overview. |