127

Querying for fontsize in User Settings window yields only settings for:

  • editor panes,
  • suggest widget,
  • markdown preview,
  • integrated terminal

As you can see below:

enter image description here

Doing the same for sidebar gives even poorer results:

enter image description here

Having fonts of different sizes in editor panes and sidebar looks... let's settle with: not too nice. Have I just found the greatest omission of this awesome tool?

Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
z33k
  • 3,280
  • 6
  • 24
  • 38

8 Answers8

208

Just want to add to the discussion, If you set:

"window.zoomLevel": "your number",

In my case I started with zero, you can use that as sort of a baseline:

"editor.fontSize": 14,
"editor.tabSize": 2,
"terminal.integrated.fontSize": 14,
"window.zoomLevel": 0,
"[Log]": {
  "editor.fontSize": 14
},

And then tweaked until I was happy.

E.g. you want to increase the sidebar font size keeping editor font size unchanged: set "window.zoomLevel": 0.5 and "editor.fontSize": 18. Look at the result. Play with both values to get the result you like.

starball
  • 20,030
  • 7
  • 43
  • 238
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
  • 9
    The only thing missing from this answer is where to find the settings file. I was able to set the zoom level via the following: `Sidebar > Manage > Settings > Window > Zoom Level`. Then `Text Editor > Font > Font Size` – B2K Apr 22 '20 at 14:32
  • 4
    @B2K Hi there! If you go to `Code > Preferences > Settings` you'll go to the GUI/pane for Settings, but then go to the top right, you'll see three icons, click the first one (from the left ) and it will take you to the `settings.json` file. – Antonio Pavicevac-Ortiz May 01 '20 at 14:38
  • 1
    Alternative you can just hit `⌘=` to zoom, then adjust font. – temporary_user_name May 18 '20 at 18:58
  • 2
    while this works, it is not the correct answer, because the question asks to increase font size only, while this answer increases the bars, menu sizes and actually everything that is not text related. – makkasi Jun 17 '21 at 07:05
  • 1
    @makkasi I think the point is that you can't edit the sidebar directly, but you can edit the "base" UI size and then edit the other text sizes to your preferences, which nearly reduces to the same thing. The downside, as you remark, is that there are side effects, but it does change the operative sidebar font size. – ruffin Sep 10 '21 at 14:24
  • 1
    `"editor.fontSize"` is very helpful! Upvoted. I wrote more about just the zoom level here: [Everything there is to know about VSCode window zoom: zoom in and out, reset zoom, use fractional values](https://stackoverflow.com/a/76519384/4561887), including resetting to default, using fractional values, etc. – Gabriel Staples Jul 28 '23 at 00:24
61

Mihai Chelaru's answer presents a way to do more than just adjust the sidebar's font size. This, however, comes with a price of a bit of fiddling, possibly more than you'd be ready for, if the only thing you were interested in was the simple act of changing the sidebar's font size. So here's a simpler solution.

Just zoom the whole VS Code's UI in or out with CTRL++ or CTRL+- respectively and than adjust font sizes we do have control over in settings.json file, i.e.:

  • editor.fontSize,
  • editor.suggestFontSize,
  • markdown.preview.fontSize,
  • terminal.integrated.fontSize

so everything matches. That's it.

Mihai Chelaru
  • 7,614
  • 14
  • 45
  • 51
z33k
  • 3,280
  • 6
  • 24
  • 38
  • 4
    I do this way also. However, sidebar's font either becomes 10 or 12, not 11 which I like. So I set the editor and terminal font size to 13, zoom out 1. The editor becomes 11, sidebar becomes 10. I can live with that at the moment. – oyalhi Oct 14 '18 at 12:18
31

This has been a feature request for some time. The short answer is right now there's no VSCode setting that allows you to customize the sidebar font size. There is a hacky workaround solution proposed by @lindesvard in the same issue thread that involves using the Custom CSS and JS Loader extension to load in a custom CSS file that modifies the sidebar styling if you're willing to experiment with it.

To get this working follow the Getting Started section in the extension details, then add URLs to your custom files to the "vscode_custom_css.imports": [""] array. (Note that on Windows mine looks like the following: "vscode_custom_css.imports": ["file:///C:\\dev\\vscode-styling.css"])

Below are before and after adding the CSS mentioned by @PSVapour in a later comment:

Original Modified

Note that this also affects the command palette font.

Mihai Chelaru
  • 7,614
  • 14
  • 45
  • 51
  • 12
    Good answer. I'll only add that there's also a simpler workaround of zooming out with `CTRL`+`-` to make all fonts smaller and then adjusting the ones we have control over accordingly. This however has a downside of scaling down also other UI elements like editor panes' tabs. It suited me, but your mileage may vary. – z33k Jul 21 '18 at 16:31
  • 1
    Yes, that's a far simpler alternative indeed. Perhaps you could post it as an answer to give it more visibility. – Mihai Chelaru Jul 21 '18 at 16:47
  • i followed every bits mentioned in, https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css and copy and paste the following to custom css file but it did not work ..monaco-tree-row.has-children { font-weight: 500; margin: 8px; color: #eee; font-size: 14px; } .monaco-tree-row { font-weight: 300; margin: 5px; font-size: 12px; color: #bbb; } – Dila Gurung Jan 18 '21 at 06:31
18

Apart from @Mihai Chelaru's answer, I found another plugin which helped me dealing with this issue. The name of the plugin is CustomizeUI.

CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:

"customizeUI.stylesheet": {
    ".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},

Again, this plugin is meant to do more than just changing the font size of the sidebar. But it has some minor advantages over Custom CSS and JS Loader. Like:

  • It won't show Unsupported on the title-bar or won't show any error message like Your installation is corrupted.

  • You do not have to reload settings every time VS Code is updated.

ruddra
  • 50,746
  • 7
  • 78
  • 101
  • 2
    This is the best answer. It is the easiest. Also it doesn't increase the size of the icon bar, neither of the top bar. This way I don't lose space. Thank you. – makkasi Jun 17 '21 at 07:18
  • 1
    Be aware it looks like there is a bug currently with this extension: https://github.com/microsoft/vscode/issues/184805 – Gordon Fogus Jul 07 '23 at 15:46
6

You can zoom in and zoom out:

zoom in:

Ctrl + +

zoom out:

Ctrl + -

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
  • 1
    sometimes the editor font is larger than the sidebar menu, actually, it is by default and your solution increases everything making the editor font extremely large. – NMukama Oct 20 '22 at 14:03
0

Change the font size with keyboard shortcuts using the FontSize Shortcuts plugin. On a Mac, I am able to focus on the terminal or the editor and change the font size of those areas independently of each other. https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts

Alan David Garcia
  • 1,523
  • 2
  • 14
  • 23
0

Mihai's answer above works well. He notes that the CSS from here has the side effect of changing the command palette font too.

I only wanted to specify the font size for the debugger sidebar tab. At the time of writing (VS Code version 1.74.3), this custom CSS instead affects only the debugger sidebar tab:

.debug-pane,
.debug-pane .scope,
.debug-pane .expression {
  font-size: 14px !important
}
Ralph Furley
  • 11
  • 2
-1

"window.titleBarStyle":"native", and Toggle Memu Bar off

陈六生
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 18 '23 at 14:42