diff --git a/images/ui/typography/typography_example_1.png b/images/ui/typography/typography_example_1.png
new file mode 100644
index 00000000000..68c4fa47c54
Binary files /dev/null and b/images/ui/typography/typography_example_1.png differ
diff --git a/images/ui/typography/typography_example_1_dark.png b/images/ui/typography/typography_example_1_dark.png
new file mode 100644
index 00000000000..b1bd74e41fb
Binary files /dev/null and b/images/ui/typography/typography_example_1_dark.png differ
diff --git a/images/ui/typography/typography_example_2.png b/images/ui/typography/typography_example_2.png
new file mode 100644
index 00000000000..497623af992
Binary files /dev/null and b/images/ui/typography/typography_example_2.png differ
diff --git a/images/ui/typography/typography_example_2_dark.png b/images/ui/typography/typography_example_2_dark.png
new file mode 100644
index 00000000000..afcbc3e67b4
Binary files /dev/null and b/images/ui/typography/typography_example_2_dark.png differ
diff --git a/images/ui/typography/typography_example_4.png b/images/ui/typography/typography_example_4.png
new file mode 100644
index 00000000000..08a8b10f376
Binary files /dev/null and b/images/ui/typography/typography_example_4.png differ
diff --git a/images/ui/typography/typography_example_4_dark.png b/images/ui/typography/typography_example_4_dark.png
new file mode 100644
index 00000000000..618f8684206
Binary files /dev/null and b/images/ui/typography/typography_example_4_dark.png differ
diff --git a/images/ui/typography/typography_example_5.png b/images/ui/typography/typography_example_5.png
new file mode 100644
index 00000000000..7dca62954ae
Binary files /dev/null and b/images/ui/typography/typography_example_5.png differ
diff --git a/images/ui/typography/typography_example_5_dark.png b/images/ui/typography/typography_example_5_dark.png
new file mode 100644
index 00000000000..58d3f5e74d3
Binary files /dev/null and b/images/ui/typography/typography_example_5_dark.png differ
diff --git a/topics/ui/principles/typography.md b/topics/ui/principles/typography.md
index 06fb06f9c7a..88326d9913d 100644
--- a/topics/ui/principles/typography.md
+++ b/topics/ui/principles/typography.md
@@ -10,11 +10,11 @@
 
 </tldr>
 
-## IDE font
+## UI font
 
-The system fonts are used for the IDE user interface by default. The default font sizes are below:
+[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.
 
-<table style="header-column">
+<!--<table style="header-column">
   <tr>
     <td>  macOS  </td>
     <td> SF Pro Text  </td>
@@ -30,10 +30,9 @@ The system fonts are used for the IDE user interface by default. The default fon
     <td> Ubuntu </td>
     <td> 15 </td>
   </tr>
-</table>
-
+</table>-->
 
-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.
+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.
 
 Use the built-in text styles from the table below whenever possible.
 
@@ -49,63 +48,34 @@ Use the built-in text styles from the table below whenever possible.
   <td width="53%"> Usage Examples </td></tr>
 
   <tr>
-    <td> H0 bold <p><code>JBFont.h0().asBold()</code></p></td>
-    <td> Default + 12 </td>
-    <td>
-        Rich text headers. See the "What’s New" page example below.
-    </td>
-  </tr>
-
-  <tr>
-    <td> H1 bold <p><code>JBFont.h1().asBold()</code></p></td>
-    <td> Default + 9 </td>
-    <td> </td>
-  </tr>
-
-  <tr>
-    <td>H2 <p><code>JBFont.h2()</code></p></td>
-    <td> Default + 5 </td>
-    <td> </td>
-  </tr>
-
-  <tr>
-    <td> H2 bold <p><code>JBFont.h2().asBold()</code></p></td>
-    <td> </td>
+    <td> H1 <p><code>JBFont.h1().asBold()</code></p></td>
+    <td> Default +5 </td>
     <td>
-        Small page header. Examples: Plugin name, GitHub timeline header
+        Main page header. Example: Plugin name
     </td>
   </tr>
 
   <tr>
-    <td> H3 <p><code>JBFont.h3()</code></p></td>
-    <td> Default + 3 </td>
+    <td> H2 <p><code>JBFont.h2().asBold()</code></p></td>
+    <td> Default +3 </td>
     <td>
-        Accent body text
+        Small page header. Example: Headers in a plugin description
     </td>
   </tr>
 
   <tr>
-    <td>H3 bold <p><code>JBFont.h3().asBold()</code></p></td>
-    <td> </td>
-    <td>
-        Headers in dialogs with a small number of elements (Customize page on Welcome screen, Login page in Get from VCS dialog)
-    </td>
-  </tr>
-
-  <tr>
-    <td> H4 bold (Default bold) <p> <code>JBFont.h4().asBold()</code></p> <p> <code>JBFont.regular().asBold()</code></p> </td>
+    <td> Default <p><code>JBFont.regular()</code></p></td>
     <td> Default </td>
     <td>
-        <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>
-        <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>
+        Main UI font. Examples: Labels, inputs, links, trees, tables, and other controls
     </td>
   </tr>
 
   <tr>
-    <td> Default <p><code>JBFont.regular()</code></p></td>
+    <td> Default semibold <p> <code>JBFont.regular().asBold()</code></p> </td>
     <td> Default </td>
     <td>
-        Labels, inputs, links, trees, tables and other controls; text outputs, notifications, shortcuts
+        <p>Header in dialogs, popups, notifications, tool windows, Got It tooltips</p>
     </td>
   </tr>
 
@@ -113,7 +83,7 @@ Use the built-in text styles from the table below whenever possible.
     <td> Paragraph </td>
     <td>
          <p>Default</p>
-         <p>Line height default + 3</p>
+         <p>Line height default +3</p>
     </td>
     <td>
         Multiline description text
@@ -122,62 +92,66 @@ Use the built-in text styles from the table below whenever possible.
 
   <tr>
     <td>Medium <p><code>JBFont.medium()</code></p></td>
+    <td>Default –1</td>
     <td>
-        <p>macOS: Default - 1</p>
-        <p>Win: Default</p>
-        <p>Linux: Default - 1</p>
-    </td>
-    <td>
-        Tool window header, navigation bar, editor breadcrumbs, editor tabs (small on macOS)
+        Help text
     </td>
   </tr>
 
   <tr>
-    <td> Medium bold <p><code>JBFont.medium().asBold()</code></p> </td>
-    <td> </td>
+    <td> Medium semibold <p><code>JBFont.medium().asBold()</code></p> </td>
+    <td>Default –1</td>
     <td>
-        Module in the navigation bar
-    </td>
-  </tr>
-
-  <tr>
-    <td> Small <p><code>JBFont.small()</code></p> </td>
-    <td>
-        <p>macOS: Default - 2</p>
-        <p>Win: Default</p>
-        <p>Linux: Default - 2</p>
-    </td>
-    <td>
-        Status bar, tool window buttons, inline help, help text in tooltips, separators in lists
+        Group headers in popups
     </td>
   </tr>
 </table>
 
 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.
 
-Use the underlined text style for hovered links.
+### Examples in UI
+
+Run popup:
+
+![](typography_example_1.png){width=706}
+
+Plugin page:
+
+![](typography_example_2.png){width=706}
 
 ## Editor font
 
-JetBrains Mono font is used by default for the Editor.
+[JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) font is used by default for the Editor.
 
 <table>
-<tr><td> Name </td>
-<td> Font size </td>
+<tr><td width="20%"> Name </td>
+<td width="20%"> Font size </td>
 <td> Usage </td>  </tr>
   <tr>
     <td> Default </td>
     <td> Default </td>
-    <td> Editor </td>
+    <td> Code in the editor, code snippets, completion popup, and documentation popup </td>
   </tr>
   <tr>
     <td> Small </td>
-    <td> Default - 1 </td>
-    <td> Line number </td>
+    <td> Default –1 </td>
+    <td> Line number in the editor</td>
   </tr>
 </table>
 
-## Colors
+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.
+
+### Examples in editor
+
+Line numbers in the gutter and code in the editor:
+
+![](typography_example_4.png){width=706}
+
+Editor font and paragraph UI font in the documentation popup:
+
+![](typography_example_5.png){width=706}
+
+<!--## Colors
 
 The IDE text colors are in the table below. The editor text colors are managed by the editor color theme.
 
@@ -298,19 +272,4 @@ The IDE text colors are in the table below. The editor text colors are managed b
         <code>Label.errorForeground</code>
     </td>
   </tr>
-</table>
-
-## Examples
-
-What’s New page that appears in the Editor tab:
-
-![](whats_new.png){width=802}
-
-Plugin page in the Settings dialog:
-
-![](plugins.png){width=439}
-
-Log in to GitHub page in the dialog:
-
-![](github.png){width=587}
-
+</table>-->