# Typography
macOS | SF Pro Text | 13 |
Window | Segoe UI | 12 |
Linux | Ubuntu | 15 |
Font | Font size | Usage Examples |
H0 bold
|
Default + 12 | Rich text headers. See the "What’s New" page example below. |
H1 bold
|
Default + 9 | |
H2
|
Default + 5 | |
H2 bold
|
Small page header. Examples: Plugin name, GitHub timeline header | |
H3
|
Default + 3 | Accent body text |
H3 bold
|
Headers in dialogs with a small number of elements (Customize page on Welcome screen, Login page in Get from VCS dialog) | |
H4 bold (Default bold) |
Default |
Header in dialogs with a large number of elements (Run configurations dialog), notification header, breadcrumbs in settings, header in navigation popup, accent elements in lists and trees. Use Group header to divide the page on groups, but not to draw too much attention to the headings. |
Default
|
Default | Labels, inputs, links, trees, tables and other controls; text outputs, notifications, shortcuts |
Paragraph |
Default Line height default + 3 |
Multiline description text |
Medium
|
macOS: Default - 1 Win: Default Linux: Default - 1 |
Tool window header, navigation bar, editor breadcrumbs, editor tabs (small on macOS) |
Medium bold
|
Module in the navigation bar | |
Small
|
macOS: Default - 2 Win: Default Linux: Default - 2 |
Status bar, tool window buttons, inline help, help text in tooltips, separators in lists |
Name | Font size | Usage |
Default | Default | Editor |
Small | Default - 1 | Line number |
Name | Light | Dark | Usage | Color key |
Default | 000 | |
Labels, inputs, trees, etc. |
.foreground keys for various UI controls.
Examples:
|
Info panel | |
|
Inline help, shortcuts |
Label.infoForeground
|
Info input | |
|
Additional info in lists (paths, counters), placeholder |
Component.infoForeground
|
Disabled | |
|
Disabled labels, disabled links |
.disabledForeground and .disabledText keys for various UI controls.
Examples:
|
Selected | FFF on |
FFF on |
Selected text |
.selectionForeground keys for various UI controls.
Examples:
|
Link | |
|
Links |
Use the component LinkLabel
Color keys:
|
Error | |
|
Inline errors text |
Label.errorForeground
|