Skip to content

Commit 1b429ef

Browse files
helloeldarhelloeldar
committed
Merge branch 'eldar-designer/typography'
2 parents 632c966 + e33e79e commit 1b429ef

File tree

9 files changed

+50
-91
lines changed

9 files changed

+50
-91
lines changed

‎images/ui/typography/typography_example_1.png‎

19.8 KB
Loading

‎images/ui/typography/typography_example_1_dark.png‎

20.7 KB
Loading

‎images/ui/typography/typography_example_2.png‎

16.6 KB
Loading

‎images/ui/typography/typography_example_2_dark.png‎

17.8 KB
Loading

‎images/ui/typography/typography_example_4.png‎

24.4 KB
Loading

‎images/ui/typography/typography_example_4_dark.png‎

23.6 KB
Loading

‎images/ui/typography/typography_example_5.png‎

29.1 KB
Loading

‎images/ui/typography/typography_example_5_dark.png‎

45.4 KB
Loading

‎topics/ui/principles/typography.md‎

Lines changed: 50 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010

1111
</tldr>
1212

13-
## IDE font
13+
## UI font
1414

15-
The system fonts are used for the IDE user interface by default. The default font sizes are below:
15+
[Inter](https://github.com/rsms/inter) is used for the IDE user interface by default. The default font size is the same for all supported OS: 13.
1616

17-
<table style="header-column">
17+
<!--<table style="header-column">
1818
<tr>
1919
<td> macOS </td>
2020
<td> SF Pro Text </td>
@@ -30,10 +30,9 @@ The system fonts are used for the IDE user interface by default. The default fon
3030
<td> Ubuntu </td>
3131
<td> 15 </td>
3232
</tr>
33-
</table>
34-
33+
</table>-->
3534

36-
Users can change the default font size in Settings. If the default font size is changed, other font sizes used in the UI are scaled respectively.
35+
Users can change the default font in <control>Settings | Appearance</control>. If the default font size is changed, other font sizes used in the UI are scaled respectively.
3736

3837
Use the built-in text styles from the table below whenever possible.
3938

@@ -49,71 +48,42 @@ Use the built-in text styles from the table below whenever possible.
4948
<td width="53%"> Usage Examples </td></tr>
5049

5150
<tr>
52-
<td> H0 bold <p><code>JBFont.h0().asBold()</code></p></td>
53-
<td> Default + 12 </td>
54-
<td>
55-
Rich text headers. See the "What’s New" page example below.
56-
</td>
57-
</tr>
58-
59-
<tr>
60-
<td> H1 bold <p><code>JBFont.h1().asBold()</code></p></td>
61-
<td> Default + 9 </td>
62-
<td> </td>
63-
</tr>
64-
65-
<tr>
66-
<td>H2 <p><code>JBFont.h2()</code></p></td>
67-
<td> Default + 5 </td>
68-
<td> </td>
69-
</tr>
70-
71-
<tr>
72-
<td> H2 bold <p><code>JBFont.h2().asBold()</code></p></td>
73-
<td> </td>
51+
<td> H1 <p><code>JBFont.h1().asBold()</code></p></td>
52+
<td> Default +5 </td>
7453
<td>
75-
Small page header. Examples: Plugin name, GitHub timeline header
54+
Main page header. Example: Plugin name
7655
</td>
7756
</tr>
7857

7958
<tr>
80-
<td> H3 <p><code>JBFont.h3()</code></p></td>
81-
<td> Default + 3 </td>
59+
<td> H2 <p><code>JBFont.h2().asBold()</code></p></td>
60+
<td> Default +3 </td>
8261
<td>
83-
Accent body text
62+
Small page header. Example: Headers in a plugin description
8463
</td>
8564
</tr>
8665

8766
<tr>
88-
<td>H3 bold <p><code>JBFont.h3().asBold()</code></p></td>
89-
<td> </td>
90-
<td>
91-
Headers in dialogs with a small number of elements (Customize page on Welcome screen, Login page in Get from VCS dialog)
92-
</td>
93-
</tr>
94-
95-
<tr>
96-
<td> H4 bold (Default bold) <p> <code>JBFont.h4().asBold()</code></p> <p> <code>JBFont.regular().asBold()</code></p> </td>
67+
<td> Default <p><code>JBFont.regular()</code></p></td>
9768
<td> Default </td>
9869
<td>
99-
<p>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.</p>
100-
<p>Use <a href="group_header.md">Group header</a> to divide the page on groups, but not to draw too much attention to the headings.</p>
70+
Main UI font. Examples: Labels, inputs, links, trees, tables, and other controls
10171
</td>
10272
</tr>
10373

10474
<tr>
105-
<td> Default <p><code>JBFont.regular()</code></p></td>
75+
<td> Default semibold <p> <code>JBFont.regular().asBold()</code></p> </td>
10676
<td> Default </td>
10777
<td>
108-
Labels, inputs, links, trees, tables and other controls; text outputs, notifications, shortcuts
78+
<p>Header in dialogs, popups, notifications, tool windows, Got It tooltips</p>
10979
</td>
11080
</tr>
11181

11282
<tr>
11383
<td> Paragraph </td>
11484
<td>
11585
<p>Default</p>
116-
<p>Line height default + 3</p>
86+
<p>Line height default +3</p>
11787
</td>
11888
<td>
11989
Multiline description text
@@ -122,62 +92,66 @@ Use the built-in text styles from the table below whenever possible.
12292

12393
<tr>
12494
<td>Medium <p><code>JBFont.medium()</code></p></td>
95+
<td>Default –1</td>
12596
<td>
126-
<p>macOS: Default - 1</p>
127-
<p>Win: Default</p>
128-
<p>Linux: Default - 1</p>
129-
</td>
130-
<td>
131-
Tool window header, navigation bar, editor breadcrumbs, editor tabs (small on macOS)
97+
Help text
13298
</td>
13399
</tr>
134100

135101
<tr>
136-
<td> Medium bold <p><code>JBFont.medium().asBold()</code></p> </td>
137-
<td> </td>
102+
<td> Medium semibold <p><code>JBFont.medium().asBold()</code></p> </td>
103+
<td>Default –1</td>
138104
<td>
139-
Module in the navigation bar
140-
</td>
141-
</tr>
142-
143-
<tr>
144-
<td> Small <p><code>JBFont.small()</code></p> </td>
145-
<td>
146-
<p>macOS: Default - 2</p>
147-
<p>Win: Default</p>
148-
<p>Linux: Default - 2</p>
149-
</td>
150-
<td>
151-
Status bar, tool window buttons, inline help, help text in tooltips, separators in lists
105+
Group headers in popups
152106
</td>
153107
</tr>
154108
</table>
155109

156110
If none of the built-in sizes work and a custom one is needed, define it as the default size +/- constant value. Do **not** hardcode font sizes.
157111

158-
Use the underlined text style for hovered links.
112+
### Examples in UI
113+
114+
Run popup:
115+
116+
![](typography_example_1.png){width=706}
117+
118+
Plugin page:
119+
120+
![](typography_example_2.png){width=706}
159121

160122
## Editor font
161123

162-
JetBrains Mono font is used by default for the Editor.
124+
[JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) font is used by default for the Editor.
163125

164126
<table>
165-
<tr><td> Name </td>
166-
<td> Font size </td>
127+
<tr><td width="20%"> Name </td>
128+
<td width="20%"> Font size </td>
167129
<td> Usage </td> </tr>
168130
<tr>
169131
<td> Default </td>
170132
<td> Default </td>
171-
<td> Editor </td>
133+
<td> Code in the editor, code snippets, completion popup, and documentation popup </td>
172134
</tr>
173135
<tr>
174136
<td> Small </td>
175-
<td> Default - 1 </td>
176-
<td> Line number </td>
137+
<td> Default –1 </td>
138+
<td> Line number in the editor</td>
177139
</tr>
178140
</table>
179141

180-
## Colors
142+
Users can change the editor font in <control>Editor | Color scheme | Color Scheme Font</control>. If the default font size is changed, other font sizes used in the editor are scaled respectively.
143+
144+
### Examples in editor
145+
146+
Line numbers in the gutter and code in the editor:
147+
148+
![](typography_example_4.png){width=706}
149+
150+
Editor font and paragraph UI font in the documentation popup:
151+
152+
![](typography_example_5.png){width=706}
153+
154+
<!--## Colors
181155
182156
The IDE text colors are in the table below. The editor text colors are managed by the editor color theme.
183157
@@ -298,19 +272,4 @@ The IDE text colors are in the table below. The editor text colors are managed b
298272
<code>Label.errorForeground</code>
299273
</td>
300274
</tr>
301-
</table>
302-
303-
## Examples
304-
305-
What’s New page that appears in the Editor tab:
306-
307-
![](whats_new.png){width=802}
308-
309-
Plugin page in the Settings dialog:
310-
311-
![](plugins.png){width=439}
312-
313-
Log in to GitHub page in the dialog:
314-
315-
![](github.png){width=587}
316-
275+
</table>-->

0 commit comments

Comments
 (0)