Allow to change the font size and font of the workbench

At the moment, we can only change the font size / font of the editor. If we want to change the font size, we need to use a roundabout method of "zooming in / out". It would be nice if this could be adjusted through the preferences.

Further to this, it seems weird that if I want larger fonts outside of the editor I have to zoom in each time I restart.

pls see #291 for the zooming issue (in general pls do not create combo issues 😄 )

+1

v1.4.0 seemed to make the file explorer fonts larger/bolder, making it harder to traverse a large directory

+1

Over 10 years. Unbelievable.

Claude (@claude)

Claude (@claude) fix this pls!

Over 10 years. Unbelievable.

Well, there's some obscure AI feature that needs more tweaking. How can you expect them to think about accessibility?!

Over 10 years. Unbelievable.

Well, there's some obscure AI feature that needs more tweaking. How can you expect them to think about accessibility?!

:^) I value the effort to go further along with the trend, but this is the issue #519, it has been here since the beginning, I think it's time to ditch the vscode.

i guess vscode is not relevant in AI era anymore anyways so...

Oh wow, I can't believe it's not a thing. The new tabs were changed in a way that trips my myopia, so I wanted to change workbench.editor.tabFontSize or workbench.editor.tabFontFamily or workbench.editor.tabFontWeight, but... that's not a thing? How? Why?

After 10 years, still no native setting. For anyone who needs this now and doesn't want to rely on extensions, I've been using a local shell script that directly injects CSS into the installed workbench.desktop.main.js file.

It:

Modifies the global workbench font family and size
Also adjusts explorer, menu bar, and status bar separately
Does not require cloning VS Code or building from source
Leaves the official PR (workbench: add configurable font size and font family settings (#519) #319151) untouched – this is just a local hack

The script runs in seconds, works on macOS/Linux/Windows (Alpine Linux included), and I re‑run it after every VS Code update.

I'm sharing it as a temporary workaround, but I still strongly believe this should be a native preference. Please, Microsoft – add a proper workbench.fontFamily and workbench.fontSize setting. This is a fundamental accessibility and customization feature.

For reference, the patch script (silent, auto‑detects the JS file) is:

#!/bin/bash
FONT_FAMILY="\"SF Pro Display\", \"Segoe UI\", system-ui"
FONT_SIZE="16px"
EXPLORER_SIZE="14px"
MENUBAR_SIZE="13.5px"
STATUSBAR_SIZE="12px"

JS_FILE=$(find / -name "workbench.desktop.main.js" 2>/dev/null | head -1)
if [ -z "$JS_FILE" ] || [ ! -f "$JS_FILE" ]; then exit 1; fi

cp "$JS_FILE" "${JS_FILE}.backup" 2>/dev/null
INJECT="document.head.appendChild(Object.assign(document.createElement('style'),{textContent:'.monaco-workbench .part>.content{font-size:$FONT_SIZE!important;font-family:$FONT_FAMILY!important;}.monaco-workbench .explorer .monaco-list .monaco-list-row{font-size:$EXPLORER_SIZE!important;font-family:$FONT_FAMILY,inherit!important;}.monaco-workbench .menubar{font-size:$MENUBAR_SIZE!important;font-family:$FONT_FAMILY,inherit!important;}.monaco-workbench .statusbar{font-size:$STATUSBAR_SIZE!important;font-family:$FONT_FAMILY,inherit!important;}'}));"

sed -i.bak "\$ s/\(.*\)\}/\1$INJECT\n}/" "$JS_FILE" 2>/dev/null
rm -f "${JS_FILE}.bak" 2>/dev/null



---

Just updated 1.131.0. Still no workbench font configuration. However you can enable new VS Code pet. They literally rather work on some pet than on this basic accessibility feature.

I'm sure most developers want pet in editor than to be able to read text normally.

#319151

We have hope boys, 12 years later.

A concrete accessibility/readability use case is the sidebar UI of AI coding-agent extensions. These extensions often present long chat and review content in a WebviewView (for example, coding assistants such as Codex, Kilo Code, and Claude Code).

window.zoomLevel is currently the only reliable workaround, but it scales the entire workbench: the editor chrome, Explorer, terminal, menus, and all other UI. I would like to increase the reading size of sidebar/panel content while keeping the rest of the workbench at its current scale.

Please consider a workbench/sidebar font-size setting, or a documented VS Code CSS variable/API that webview views can opt into, so extension authors can reliably honor the user's preferred reading size. It should be independent of editor.fontSize and global window zoom.

Please do something about this, if you don't have eyes healthy, this is real problem. I don't want to waste space on window decoration chrome and so on. Just to set custom font size for explorer and chat (with input window).

I opened #340334 for the side bar content portion of this request. It adds workbench.sideBar.fontFamily and workbench.sideBar.fontSize for both primary and secondary side bars, with live updates and reset support. The PR includes browser tests; broader workbench font customization remains outside its scope.

Could a maintainer link it in the Development section as a related contribution?

This worked for me on VS Code 1.141.0, commit:

2a59476c9bfcb90b3ddc372c36762471b7dfad1c

The result is:

Explorer font size: 20px
Explorer row height: 36px
File/folder icon size: 22px

Note that CSS alone can change the text size, but it does not reliably change the Explorer's actual virtualized row height. For that, I also had to modify the Explorer's ITEM_HEIGHT value in VS Code's bundled JavaScript.

1. Install Custom CSS and JS Loader

Install the VS Code extension:

Custom CSS and JS Loader

Publisher:

be5invis

2. Create the CSS file

Create:

C:\VSCodeStyles\explorer.css

with:

/* Explorer text: 20px, row height: 36px */
.monaco-workbench .explorer-folders-view .explorer-item {
  font-size: 20px !important;
  height: 36px !important;
  line-height: 36px !important;
}

/* Rename input */
.monaco-workbench .explorer-folders-view .explorer-item .monaco-inputbox {
  height: 36px !important;
  font-size: 20px !important;
}

.monaco-workbench .explorer-folders-view .explorer-item .monaco-inputbox > .ibwrapper > .input {
  height: 34px !important;
  font-size: 20px !important;
}

/* File/folder icons: 22px */
.monaco-workbench .explorer-folders-view .explorer-item.monaco-icon-label::before {
  height: 36px !important;
  width: 22px !important;
  background-size: 22px !important;
  background-position: left center !important;
  font-size: 22px !important;
  padding-right: 8px !important;
}

Make sure the file is really named:

explorer.css

and not:

explorer.css.txt

3. Add the CSS file to VS Code settings

Open:

Preferences: Open User Settings (JSON)

and add:

"vscode_custom_css.imports": [
  "file:///C:/VSCodeStyles/explorer.css"
]

If vscode_custom_css.imports already exists, add the path to the existing array instead of creating another property.

Do not enable the extension yet.

4. Find `workbench.desktop.main.js`

Locate your VS Code installation directory.

Typical locations are:

%LOCALAPPDATA%\Programs\Microsoft VS Code

or:

C:\Program Files\Microsoft VS Code

Then locate:

resources\app\out\vs\workbench\workbench.desktop.main.js

Some installations may contain an additional version/commit directory before resources.

Back up this file before modifying it.

5. Change the Explorer's real row height

Completely exit VS Code.

Open workbench.desktop.main.js in another editor that can handle large files.

For VS Code 1.141.0, search for this exact minified fragment:

FDt=class s{static{this.ITEM_HEIGHT=22}getHeight(o){return s.ITEM_HEIGHT}getTemplateId(o){return aie.ID}}

Replace it with:

FDt=class s{static{this.ITEM_HEIGHT=36}getHeight(o){return s.ITEM_HEIGHT}getTemplateId(o){return aie.ID}}

The only actual change is:

ITEM_HEIGHT=22

to:

ITEM_HEIGHT=36

Do not globally replace every 22 or every ITEM_HEIGHT.

If this exact fragment cannot be found, stop and inspect the current VS Code version first. The minified code may be different in another build.

If VS Code is installed under Program Files, administrator privileges may be required to save the file.

6. Enable the custom CSS

Start VS Code and run:

Enable Custom CSS and JS

Then restart VS Code when prompted.

If necessary, completely close all VS Code windows and start it again.

The Explorer should now use approximately:

font: 20px
row height: 36px
icons: 22px

Changing the values later

For the font size, change the font-size values in explorer.css.

For the icon size, change:

width: 22px;
background-size: 22px;
font-size: 22px;

For the row height, keep the CSS height and the JavaScript ITEM_HEIGHT synchronized.

For example, if changing the row height to 40px, change both:

ITEM_HEIGHT=40

and the relevant CSS 36px values to 40px.

After changing only the CSS, run:

Reload Custom CSS and JS

and restart VS Code.

Important notes

VS Code updates may overwrite workbench.desktop.main.js, so this modification may need to be reapplied after an update.

Do not copy an old modified workbench.desktop.main.js over a newer VS Code version.

Modifying VS Code installation files or loading custom CSS may also trigger an installation integrity warning.

workbench: address font scaling review feedback (#519)

workbench: add list density and tree font family settings (#519)

Navigation Menu

Repository navigation

Allow to change the font size and font of the workbench #519

597 remaining items

1. Install Custom CSS and JS Loader

2. Create the CSS file

3. Add the CSS file to VS Code settings

4. Find `workbench.desktop.main.js`

5. Change the Explorer's real row height

6. Enable the custom CSS

Changing the values later

Important notes

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Allow to change the font size and font of the workbench #519

Description

Activity

skube commented on Dec 3, 2015

egamma commented on Dec 3, 2015

conceptualspace commented on Aug 5, 2016

bobrocke commented on Mar 6, 2017

nishantgeorge commented on Apr 14, 2017

597 remaining items

fleps commented on Jun 26, 2026

MurzNN commented on Jun 26, 2026

toridoriv commented on Jun 26, 2026

anotherglitchinthematrix commented on Jul 2, 2026

Q1CHENL commented on Jul 5, 2026

NatoBoram commented on Jul 12, 2026

devops2626 commented on Jul 13, 2026

tomkr4l commented on Jul 29, 2026

Sourgin commented on Aug 1, 2026

iron-water commented on Sep 3, 2026

jan-valek commented on Sep 3, 2026

Fs2qFtoS commented on Oct 7, 2026

jackie-weiwei commented on Oct 10, 2026

1. Install Custom CSS and JS Loader

2. Create the CSS file

3. Add the CSS file to VS Code settings

4. Find workbench.desktop.main.js

5. Change the Explorer's real row height

6. Enable the custom CSS

Changing the values later

Important notes

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

4. Find `workbench.desktop.main.js`