Log-in required.

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.

Typography · UX essentials

Basics of typography and text styling in the Editor.

UI localization accounts for text resizing in translated languages
US-0201
Blue plus sign icon indicating that clicking on this will expand this content
Only use link labels for opening external applications
Blue plus sign icon indicating that clicking on this will expand this content
All UI elements use the appropriate font
US-0216
Blue plus sign icon indicating that clicking on this will expand this content
UI uses appropriate font sizes
US-0217
Blue plus sign icon indicating that clicking on this will expand this content
Padding exists between text and other UI elements
US-0218
Blue plus sign icon indicating that clicking on this will expand this content
Text is aligned appropriately
US-0219
Blue plus sign icon indicating that clicking on this will expand this content

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.

Windows
Inter
Verdana
macOS
Inter
Lucida Grande
Linux
Inter
Verdana

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
--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
Illustration of various font sizes in the Project Settings window and the Proflier window.
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.

Icon of a red triangle to indicate a message of warning.
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
--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

Style

Alignment

Text in the Editor is left-aligned in windows, dialogs and most components including tabs, dropdowns, and menus. The only exception is in button labels, which are center aligned.

Input Field labels are also left-aligned on object fields or single-level values. Labels for individual values within a larger field (X and Y coordinates, for example) appear directly to the left of their boxes while their category label remains left-aligned. When entering information or placing an element into an input field the text will appear left-aligned as well.
For more information go to input field.

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).

Illustration of correct usage of indentation in the Inspector window
Indentation in the Inspector window

Line Height

Unity Editor uses 3 different line height styles.

USS variables
--unity-metrics-
single_line_small-height
The usual height for a small single-line Editor control, for example, a mini toggle or a mini text field
16 px
--unity-metrics-
single_line-height
The usual height for a single-line Editor control, for example, a one-line text field.
18 px
--unity-metrics-
single_line_large-height
The usual height for a large single-line Editor control, for example, an Inspector title bar label
20 px

Color variables

Base 1 - Default text colors

A Console window with labeled elements showing different text colors.
Console window showing different text colors
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

A Project Settings window with labeled elements showing different text colors.
Project Settings window showing different text colors
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 with labeled elements showing different text colors used in toolbars.
A Scene window showing different text colors used in toolbars.
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