feat: add per-area font customization (fontFamily + fontSize)

[xiaolai]

Summary

Adds user-configurable fontFamily and fontSize settings for every workbench area, following the per-area customization plan proposed by @daiyam. All settings are tagged experimental to signal that custom fonts may break layout depending on the font used.

New Settings

Setting	Type	Default	Description
workbench.experimental.fontSize	number	13	Global workbench font size (6-32px)
workbench.sideBar.experimental.fontFamily	string	""	Side bar font family (both primary and secondary)
workbench.sideBar.experimental.fontSize	number	13	Side bar font size (existing, now with experimental prefix)
workbench.statusBar.experimental.fontFamily	string	""	Status bar font family
workbench.statusBar.experimental.fontSize	number	12	Status bar font size
workbench.tabs.experimental.fontFamily	string	""	Editor tabs font family
workbench.tabs.experimental.fontSize	number	13	Editor tabs font size
workbench.bottomPane.experimental.fontFamily	string	""	Bottom panel font family
workbench.bottomPane.experimental.fontSize	number	13	Bottom panel font size
workbench.activityBar.experimental.fontFamily	string	""	Activity bar font family
workbench.activityBar.experimental.fontSize	number	16	Activity bar font size

Demo

Implementation

Three patches, each building on the previous:

Patch 1 — feat-workbench-zz-area-font-family

• Registers all per-area fontFamily settings plus workbench.experimental.fontSize
• Each area gets an apply*FontFamily() method that sets/removes a CSS custom property on the part's container
• onDidChangeConfiguration listeners provide live updates without reload
• Global --vscode-workbench-font-size on the workbench root, inherited by all areas as a fallback

Patch 2 — feat-workbench-zz-area-font-size-core

• Adds fontSize for statusbar (base 12), activitybar (base 16), panel (base 13), and global workbench
• Coefficient-based proportional scaling in src/vs/base/common/font.ts: a FONT object holds all derived pixel values, and update*Size() functions recalculate them using pre-computed ratios (e.g., 22/12 for statusbar height). At default sizes, values are identical to upstream's hardcoded constants
• Static constants (StatusbarPart.HEIGHT, ActivitybarPart.ACTION_HEIGHT) converted to getters reading from FONT
• Shared inspectFontSize() helper detects user-set vs. default values
• Grid relayout triggered after statusbar size changes; activitybar font applied before show() for correct initial sizing
• Three-tier CSS fallback: area-specific → global → hardcoded default
• Comprehensive test suite (font.test.ts, 482 lines)

Patch 3 — feat-workbench-zz-area-font-size-tabs

• Adds workbench.tabs.experimental.fontSize for editor tabs
• EDITOR_TAB_HEIGHT and TAB_WIDTH constants converted to getters reading from FONT
• All hardcoded pixel values in tab CSS (22px, 35px, 38px, 80px, 120px) replaced with CSS variables
• Tab relayout triggered on font size change

Motivation

Users frequently request customizable font sizes and families for better readability. Prior solutions were limited to zooming the entire interface or manual CSS editing. This exposes per-area configuration directly in Settings, supporting accessibility workflows.

Background

This began as a sidebar font size patch based on microsoft/vscode#270851, which was rejected by Microsoft with "In this area we do not accept PRs, thanks" despite 18 positive reactions. It has since been expanded per @daiyam's plan to cover all workbench areas with both fontFamily and fontSize.

Testing

• font.test.ts: 482-line test suite covering default values, proportional scaling, boundary values (min 6 / max 32), reset behavior, and cross-area independence
• Manual verification of live updates across all areas

[daiyam]

Thank you for the PR. Ya, it fixes an issue with VSCode.

Shouldn't it also change the title, action icons, inputs?

Here the changes I would see:

• workbench.sideBar.fontSize should change all sidebars (definitely)
• workbench.sideBar.left.fontSize: only the left sidebar (main might be better)
• workbench.sideBar.right.fontSize: only the right sidebar (aux might be better)

It would be nice if we could also change the tabs font size.

[daiyam]

@xiaolai Can you make the changes?

[daiyam]

@codingus-g Could give your feedback? Thx

[setanarut]

This can be combined with my suggestion. It's possible to change the entire Workbench font. -> #2647

[daiyam]

The big problem of this PR is that MS has hard coded the font size and its derivated heights or weights.

I almost want to merge workbench.sideBar.fontSize and workbench.secondarySideBar.fontSize to simplify the replacement of those hard coded numbers.

@setanarut It must be why they don't allow custom font since it might break things.
I will provide another PR with the workbench.experimental.fontFamily setting. I'm adding the experimental to make it clear that it could break things depending on the used font.

[xiaolai]

Hi @daiyam,

First of all, I sincerely apologize for the long silence — I should have responded much sooner, and I appreciate your patience and continued engagement with this PR.

I've just pushed a commit that addresses the feedback from your review. Here's a detailed breakdown of the changes:

Bug Fix: CSS Variable Name Mismatch

The auxiliary bar's CSS (auxiliaryBarPart.css) was reading from --vscode-workbench-secondary-sidebar-font-size, while the TypeScript code in auxiliaryBarPart.ts was setting --vscode-workbench-sidebar-font-size. This meant the auxiliary bar's base font-size was never actually being applied (it always fell back to the 13px default). This is now fixed — both sidebars use the same --vscode-workbench-sidebar-font-size variable, consistent with the single unified setting.

Auxiliary Bar Parity

• Added line-height: 1.4em to .part.auxiliarybar > .content, matching the primary sidebar's styling.
• Added title h2 font-size scaling (* 0.846) for the auxiliary bar, so the panel title text also scales properly — matching what was already in place for the primary sidebar.

Composite Bar Tab Font Size (New)

Per your suggestion about tab font size, I've added a new diff section for paneCompositePart.css that scales all pixel-based properties in the composite bar / view container tabs. This covers:

• Tab label font-size (11px → calc(var * 0.846154))
• Composite bar line-height (27px → calc(var * 2.076923))
• Tab padding (left/right 10px, top/bottom 2px — all scaled)
• Icon tab height and dimensions (35px height, 16×16 icons — all scaled)
• Action label padding (2px → scaled)
• Badge content (font-size, padding, min-width, height, line-height — all scaled)
• Header/footer padding (4px → scaled)
• Empty pane message margin (12px → scaled)

All coefficients follow the same base-13 system (px_value / 13) used throughout the patch, so at the default 13px everything renders identically to the original.

Setting Description Update

Updated the description from "Controls the font size used for content inside the primary side bar" to "Controls the font size used for content inside the side bars" — reflecting that the single setting applies to both sidebars, which aligns with your Feb 17 comment about simplifying the approach.

---

Please let me know if there's anything else you'd like me to adjust. Thank you again for the thorough review and for keeping this PR alive — I really appreciate it.

[daiyam]

@xiaolai Thanks for the updates.

I'm thinking to go beyond sidebars and to have the following settings:

• workbench.experimental.fontFamily (already added)
• workbench.experimental.fontSize
• workbench.sideBar.experimental.fontFamily
• workbench.sideBar.experimental.fontSize (already added)
• workbench.statusBar.experimental.fontFamily
• workbench.statusBar.experimental.fontSize
• workbench.tabs.experimental.fontFamily
• workbench.tabs.experimental.fontSize
• workbench.bottomPane.experimental.fontFamily
• workbench.bottomPane.experimental.fontSize
• workbench.activityBar.experimental.fontFamily
• workbench.activityBar.experimental.fontSize

So each panes can be customized

[xiaolai]

Thanks @daiyam! I've implemented the per-area font customization settings according to the plan you outlined (v3-), across three patches. Here's how they work:

Patch 1: feat-workbench-zz-area-font-family

Adds per-area fontFamily settings plus a global fontSize:

• workbench.experimental.fontSize — Sets a global --vscode-workbench-font-size CSS variable on the workbench root. Each area's CSS uses this as its middle fallback (e.g., var(--vscode-workbench-statusbar-font-size, var(--vscode-workbench-font-size, 12px))), so setting the global affects all areas that haven't been individually overridden.
• workbench.sideBar.experimental.fontFamily — Applied to both the primary sidebar and auxiliary bar (secondary sidebar) via --vscode-workbench-sidebar-font-family. Both sidebars share the single setting since they share the same content model.
• workbench.statusBar.experimental.fontFamily — Sets --vscode-workbench-statusbar-font-family on the statusbar part container.
• workbench.tabs.experimental.fontFamily — Sets --vscode-workbench-tabs-font-family on the editor title area.
• workbench.bottomPane.experimental.fontFamily — Sets --vscode-workbench-panel-font-family on the panel content area.
• workbench.activityBar.experimental.fontFamily — Sets --vscode-workbench-activitybar-font-family on the activitybar part.

Each fontFamily setting follows the same pattern: a TypeScript apply*FontFamily() method reads the config, sets or removes a CSS custom property on the part's container, and a onDidChangeConfiguration listener triggers live updates.

Patch 2: feat-workbench-zz-area-font-size-core

Adds per-area fontSize for statusbar, activitybar, panel, and the global workbench. The core challenge is that VS Code hardcodes pixel values for heights, widths, and layout constants derived from font sizes. This patch solves that with a coefficient-based proportional scaling system in src/vs/base/common/font.ts:

• A shared FONT object holds all derived pixel values (e.g., statusBarSize22 for the 22px status bar height, activityBarSize48 for the 48px action height).
• Each area has an update*Size(size) function that recalculates all derived values using pre-computed coefficients (e.g., 22/12 for statusbar height, 48/16 for activitybar action height). At the default size, all values are identical to upstream's hardcoded constants.
• Static constants like StatusbarPart.HEIGHT = 22 and ActivitybarPart.ACTION_HEIGHT = 48 are converted to getters that read from FONT, so layout code automatically picks up the new sizes.
• A shared inspectFontSize() helper checks whether the user has explicitly set a value (via user/workspace/folder settings) — if not, the CSS variable is removed so the cascade falls through to the global or default.
• After updating the status bar font size, this._onDidChange.fire() notifies the grid layout system that the height constraint has changed, triggering a relayout.
• Activity bar font size is applied before show() so the composite bar initializes with the correct dimensions.
• Includes a comprehensive test suite (font.test.ts, 482 lines) covering default values, proportional scaling, boundary values, reset behavior, and cross-area independence.

Patch 3: feat-workbench-zz-area-font-size-tabs

Adds workbench.tabs.experimental.fontSize for editor tabs. This is separate because tabs have the most hardcoded pixel values scattered across CSS:

• Tab heights: EDITOR_TAB_HEIGHT (35px normal, 22px compact) → converted to getter reading from FONT.tabsSize35 / FONT.tabsSize22.
• Tab widths: TAB_WIDTH (38px compact, 80px shrink, 120px fit) → getter reading from FONT.tabsSize38 / FONT.tabsSize80 / FONT.tabsSize120.
• All hardcoded 22px, 35px, 38px, 80px, 120px values in editortabscontrol.css, editortitlecontrol.css, and multieditortabscontrol.css are replaced with CSS variables (e.g., var(--vscode-workbench-tabs-compact-height, 22px), var(--vscode-workbench-tabs-fit-width, 120px)).
• After a font size change, updateTabHeight() and groupView.relayout() are called to reflow the editor area.

All settings use the experimental tag as you suggested, and the three-tier CSS fallback chain (area-specific → global → hardcoded default) ensures each area can be customized independently while still inheriting from the global setting.

Please let me know if you'd like any adjustments.

[daiyam]

Wow! Thx
I was planning to add the new settings over this week-end.

[daiyam]

@xiaolai One of the patch was broken (https://github.com/VSCodium/vscodium/actions/runs/22249352749/job/64382366232) and it seems the patches were produced on the stable version of VSCode instead of the insider.

You need to use the flag -i in ./dev/build.sh -i to get the insider version.
Also, use ./dev/patch.sh patches/feat-experimental-font.patch or ./dev/patch.sh feat-experimental-font (https://github.com/VSCodium/vscodium/blob/master/CONTRIBUTING.md#add-a-new-patch) to make your edits. Thx

I've merged all your patches since its the same feature. It's easier to manage.

I've made the conscious choose to have the properties for the font size to be always generated.

[xiaolai]

Thanks @daiyam for merging and fixing the patches! Noted on using -i for insider and ./dev/patch.sh for future patches. Appreciate you consolidating them into one as well.

[daiyam]

It's available at https://github.com/VSCodium/vscodium-insiders/releases/tag/1.110.01381-insider
Feel free to open an issue if you are finding problems...