Overview

Typography uses text to clearly convey information to the user. Typography can organize and emphasize information through the effective use of such elements as text size, styling, and fonts.

Font stack

Unity Editor uses Inter as the primary font family on every platform. Inter is a font family designed to accommodate dense interfaces.

There are secondary fallback options that vary per OS that can be used if Inter cannot be used.

Download Inter

Inter - Google Fonts

fonts.google.com

Download Verdana

Verdana - MyFonts

www.myfonts.com

Download Lucida Grande

Lucida Grande - MyFonts

www.myfonts.com

Type scale

The Editor features a range of font sizing on elements and in menus.
Text styles are purposely limited to only a few font size options. The Unity Editor is a dense desktop software application and limiting the choice of font and styling options helps keep the interface cohesive and well defined.

Primary type scale - Inter

Below is the primary type scale for Inter font family, with the corresponding variable names and usage guides.

USS variables

Variable name

Usage

Font size

--unity-metrics-default-font_tiny_size

Smaller font sizes are available but should only be used when absolutely necessary.

9 px

--unity-metrics-default-
font_small_size

Use the small font size sparingly for labels inside grids and similar small areas. (Examples: Timeline track, Profiler track, helpbox text)

10 px

--unity-metrics-default-font_semi_small_size

Use the semi-small font size for search fields located inside toolbars.

11 px

--unity-metrics-default-font_normal_size

Use the standard font size for most text.

12 px

--unity-metrics-default-font_big_size

Use the big font size sparingly for list labels (Examples: Profiler)

14 px

--unity-metrics-default-font_very_big_size

Use the very big font size sparingly for window titles (Examples: Project Settings)

19 px

An example of all of Unity's font sizes using Inter.

Secondary type scale - Verdana and Lucida Grande

Below is the secondary type scale for Verdana & Lucida Grande font family, with the corresponding variable names and usage guides.

Secondary font families

Note that secondary fonts use slightly smaller type scale than Inter, to account for these fonts appearing larger in the same size.

USS variables

Variable name

Usage

Font size

--unity-metrics-default-font_tiny_size

Smaller font sizes are available but should only be used when absolutely necessary.

8 px

--unity-metrics-default-
font_small_size

Use the small font size sparingly for labels inside grids and similar small areas. (Examples: Timeline track, Profiler track, helpbox text)

9 px

--unity-metrics-default-font_semi_small_size

Use the semi-small font size for search fields located inside toolbars.

10 px

--unity-metrics-default-font_normal_size

Use the standard font size for most text.

11 px

--unity-metrics-default-font_big_size

Use the big font size sparingly for list labels (Examples: Profiler)

12 px

--unity-metrics-default-font_very_big_size

Use the very big font size sparingly for window titles (Examples: Project Settings)

16 px

Style

Indentation

For interfaces that have lists, convey nesting / parenting relationships by indenting sub-item labels (and therefore text).
‍
Examples of this appear in the arrangement of labels in the hierarchy, the Inspector, and the first tier of menus beneath their label (submenus have the same indentation as the initial menu).

Indentation in the Inspector window

Color variables

Base 1 - Default text colors

Console window showing different text colors

#

Common name

Variable name

Variable description

Light theme

Dark theme

1

Default Text

--unity-colors-default-text

The default text color

#090909

#D2D2D2

Default Text Hover

--unity-colors-default-text-hover

The default text color when the mouse pointer hovers over the text

#090909

#BDBDBD

2

Error Text

--unity-colors-error-text

The text color for error messages

#5A0000

#D32222

3

Link Text

--unity-colors-link-text

The text color for unvisited links

#4C7EFF

#4C7EFF

Visited Link Text

--unity-colors-visited_link-text

The text color for visited links

#AA00AA

#FF00FF

Warning Text

--unity-colors-warning-text

The text color for warning messages

#333308

#F4BC02

Base 2 - Windows and component text colors

Project Settings window showing different text colors

#

Common name

Variable name

Variable description

Light theme

Dark theme

1

Helpbox Text

--unity-colors-helpbox-text

The text color for a helpbox control

#161616

#BDBDBD

Highlight Text

--unity-colors-highlight-text

The text color for selected items or selected text

#0032E6

#4C7EFF

Highlight Text Inactive

--unity-colors-highlight-text-inactive

The text color for selected items or selected text when the control does not have focus

#FFFFFF

#FFFFFF

2

Label Text

--unity-colors-label-text

The text color for a label control

#090909

#C4C4C4

3

Label Text Focus

--unity-colors-label-text-focus

The text color for a label when it has focus

#003C88

#81B4FF

Preview Overlay Text

--unity-colors-preview_overlay-text

The text color for a preview control overlay

#FFFFFF

#DEDEDE

Window Text

--unity-colors-window-text

The text color for a window

#090909

#BDBDBD

Base 3 - Toolbar text colors

A Scene window showing different text colors used in toolbars.

#

Common name

Variable name

Variable description

Light theme

Dark theme

1

Tab Text

--unity-colors-tab-text

The text color for an Editor window tab

#090909

#BDBDBD

2

Toolbar Button Text

--unity-colors-toolbar_button-text

The text color for a toolbar button control

#090909

#C4C4C4

Toolbar Button Text Checked

--unity-colors-toolbar_button-text-checked

The text color for a toolbar button control when it is checked

#090909

#C4C4C4

Toolbar Button Text Hover

--unity-colors-toolbar_button-text-hover

The text color for a toolbar button control

#090909

#BDBDBD