Typography

Desktop

The font family used on desktop is dependent on the user's operating system. Segoe UI is commonly used on Windows, and SF Pro on macOS. On Linux, the font family highly depends on the desktop environment, with Noto Sans, Cantarell, and Ubuntu being very common. While these work for default choices, it is still important to keep in mind that other font families could be used, especially with regard to languages that use non-Latin characters.

Our type scale makes a distinction between two different UI areas known as chrome and in-content. While the in-content styles are consistent across operating systems, we have three seperate sets of values for the chrome, depending on whether the operating system is Windows, macOS, or Linux.

Refer to the Usage section below for guidance on how to work with typography in your designs.

Browser chrome

Overview of our browser chrome font scale

Overview of our browser chrome font scale

The browser chrome type scale is designed to closely mimic the system type sizes. As a result, it's important to note that the scale isn't always consistent. For example, on macOS, the text size for tabs is smaller than the base size in the chrome, whereas on Windows and Linux the size remains the same.

In-content

Overview of our In-content font scale

Overview of our In-content font scale

Type sizes for in-content text remain consistent across systems, with the base type size set to 15px. However, in-content type scaling is applied less consistently across various surfaces.

Notably, our New Tab page currently uses styles that align more closely with the chrome type scale, even though it is an In-content page.

Usage

When designing new surfaces, it is recommended to use the typography styles provided in Figma. If you require additional or different styles than those available in our design system, feel free to reach out to us during office hours.

For existing surfaces, we recommend utilizing the typography styles in Figma as well. However, it is essential to inform engineers to match the existing typography in the product, although slight visual differences to your design may occur.

We aim to align typography between design and code.

Icons

When designing for Desktop, avoid placing icons alongside text to emphasize meaning, particularly in menus and buttons. Instead, opt for descriptive text that clearly communicates the function of a menu item, label or headline. For interactive elements, you can also use an icon button, but ensure it won't confuse users.

null
null

This is considered a general guideline — especially for common actions like pinning, printing, deleting — but not a hard rule.

Common exceptions are:

  • Favicons next to website names.
  • Warning icons next to captions to draw attention to errors or problems.
  • As a means of distinguishing text when the other signifier is color.

If you think your user interface could benefit from having both text and icons for an item, talk to us.

Tokens

Right now, we maintain typography styles for Windows and macOS. These tokens are not implemented in Firefox for desktop yet, and are only currently applicable to Figma designs.

Windows

Win / In-content / Font / Body

Ag
Segoe UI Semibold 15px/150%
Default Bold
Used for bold text in about:pages.
Ag
Segoe UI Regular 15px/150%
Default
Used for text (paragraph) about:pages.
Ag
Segoe UI Regular 15px/150%, underline
Default Link
Used for text (link) in about:pages.
Ag
Segoe UI Semibold 13px/150%
Small Bold
Used for bold text (paragraph) in New Tab.
Ag
Segoe UI Regular 13px/150%, underline
Small Link
Used for text (link) in New Tab.
Ag
Segoe UI Regular 13px/150%
Small
Used for text link in New Tab.

Win / In-content / Font / Heading

Ag
Segoe UI Regular 22px/140%
Large
Used for headings in about:pages. (h1)
Ag
Segoe UI Semibold 17px/140%
Default
Used for headings in New Tab, subheadings about:pages, and bold text in onboarding modals. (h2)

Win / In-content / Font / Title

Ag
Segoe UI Light 26px/140%
Default
Used for title heading in error pages.

Win / Chrome / Font / Body

Ag
Segoe UI Regular 14px/150%
Default
Used for text (paragraph) in modals, panels, menus, and inputs.
Ag
Segoe UI Regular 14px/150%, underline
Default Link
Used for text (link) in modals, panels, and menus.
Ag
Segoe UI Semibold 12px/150%
Small Bold
Used for bold text in infobar and menu notifications.
Ag
Segoe UI Regular 12px/150%
Small
Used for text (paragraph) in infobar and menu notifications.
Ag
Segoe UI Regular 12px/150%, underline
Small Link
Used for text link in infobar and menu notifications.
Ag
Segoe UI Regular 9px/150%, upper
XSmall
Used for meta text in tabs.

Win / Chrome / Font / Heading

Ag
Segoe UI Semibold 14px/150%
Default
Used for headings in modals, panels, and menus. (h1)

macOS

Mac / In-content / Font / Heading

Ag
SF Pro Text Regular 22px/140%
Large
Used for headings in about:pages. (h1)
Ag
SF Pro Text Semibold 17px/140%
Default
Used for headings in New Tab, subheadings about:pages, and bold text in onboarding modals. (h2)

Mac / In-content / Font / Body

Ag
SF Pro Text Semibold 15px/150%
Default Bold
Used for bold text in about:pages.
Ag
SF Pro Text Regular 15px/150%
Default
Used for text (paragraph) in about:pages.
Ag
SF Pro Text Regular 15px/150%, underline
Default Link
Used for text (link) in about:pages.
Ag
SF Pro Text Semibold 13px/150%
Small Bold
Ag
SF Pro Text Regular 13px/150%
Small
Used for text in New Tab.
Ag
SF Pro Text Regular 13px/150%, underline
Small Link
Used for text (link) in New Tab.

Mac / In-content / Font / Title

Ag
SF Pro Text Light 26px/140%
Default
Used for title heading in error pages.

Mac / Chrome / Font / Heading

Ag
SF Pro Text Semibold 13px/150%
Default
Used for headings in modals, panels, and menus. (h1)

Mac / Chrome / Font / Body

Ag
SF Pro Text Semibold 13px/150%
Default Bold
Used for bold text in buttons, and bold text in modals, panels, and menus.
Ag
SF Pro Text Regular 13px/150%
Default
Used for text (paragraph) in modals, panels, menus, and inputs.
Ag
SF Pro Text Semibold 11px/150%
Small Bold
Used for bold text in Infobar and menu notifications.
Ag
SF Pro Text Regular 11px/150%
Small
Used for text (paragraph) in infobar and menu notifications.
Ag
SF Pro Text Regular 11px/150%, underline
Small Link
Used for text (link) in infobar and menu notifications.
Ag
SF Pro Text Regular 8.2px/150%, upper
XSmall
Used for meta text in tabs.