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

hsdk123 · 2015-11-24T00:52:13Z

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.

skube · 2015-12-03T13:31:45Z

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.

egamma · 2015-12-03T20:22:28Z

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

conceptualspace · 2016-08-05T16:33:17Z

+1

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

bobrocke · 2017-03-06T16:37:48Z

+1

nishantgeorge · 2017-04-14T12:52:12Z

+1

dodalovic · 2017-05-05T05:53:23Z

👍

cgiacomi · 2017-05-05T11:18:39Z

👍

bobrocke · 2017-05-05T11:28:38Z

Does the new UI theming interface give access to the font size?

kentor · 2017-05-17T16:19:31Z

In addition, I would like to increase the line spacing in the explorer. File names are way too close to each other and is fatiguing to look at.

xster · 2017-05-18T22:46:51Z

Ha, I was gonna suggest exposing line height so I could decrease it and pack more files into each screen.

timc13 · 2017-06-12T21:19:21Z

just to add another reason:

changing the Explorer to a monospaced font is easier to read when scanning for files

mzabuawala · 2017-06-21T11:41:48Z

+1

Please add support for changing font size of EXPLORER window.

nrthbound · 2024-06-18T07:15:00Z

Uhh @bhavyaus, does you mistakingly closing and reopening the issue means someone might actually do something about this after 10 years and hundreds of comments here?

tang-nn · 2024-06-21T15:15:11Z

😊😊😊
Please provide this feature!!!

Please provide this feature!!!

😒😒😒😒

bhavyaus · 2024-06-26T16:58:55Z

@nrthbound apologies. Thanks for catching this. We've been dealing with a lot of spam lately and this issue was accidentally closed.

nrthbound · 2024-06-26T17:13:47Z

@bhavyaus Okay, but what about the implementation of this? Is there some reason you guys keep skipping over this? It's got more comments and requests than anything else. Like, what else do we have to do to get the ball rolling on this? It's been years and there has been zero movement on one of the most requested features to solve huge accessibility issues. Zed has since been released, and re-written from scratch during the time this request has been waiting. What is the holdup?

mariushx · 2024-06-29T12:37:22Z

/* SidePanel */
:root {
       /* you can change these values */
	--vscode-pane-view-font-family: var(--monaco-monospace-font);
	--vscode-pane-view-font-size: 15px;
}
.monaco-pane-view {
  font-family: var(--vscode-pane-view-font-family);
  font-size: var(--vscode-pane-view-font-size) !important;
}
.monaco-pane-view h3 {
  font-family: var(--vscode-pane-view-font-family);
  font-size: calc(var(--vscode-pane-view-font-size) - 2px) !important;
}
.monaco-highlighted-label {
  font-family: var(--vscode-pane-view-font-family);
  font-size: calc(var(--vscode-pane-view-font-size) - 1px) !important;
}
.monaco-workbench .monaco-list-row .expression .value {
   font-family: var(--vscode-pane-view-font-family);
   font-size: calc(var(--vscode-pane-view-font-size) - 1px) !important; 
}

Until they find time to fix this for a quick workaround you might want to add these values at the end of the CSS file located at: C:\Users{user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css.

louwrentius · 2024-07-01T16:26:38Z

/* SidePanel */
:root {
       /* you can change these values */
	--vscode-pane-view-font-family: var(--monaco-monospace-font);
	--vscode-pane-view-font-size: 15px;
}
.monaco-pane-view {
  font-family: var(--vscode-pane-view-font-family);
  font-size: var(--vscode-pane-view-font-size) !important;
}
.monaco-pane-view h3 {
  font-family: var(--vscode-pane-view-font-family);
  font-size: calc(var(--vscode-pane-view-font-size) - 2px) !important;
}
.monaco-highlighted-label {
  font-family: var(--vscode-pane-view-font-family);
  font-size: calc(var(--vscode-pane-view-font-size) - 1px) !important;
}
.monaco-workbench .monaco-list-row .expression .value {
   font-family: var(--vscode-pane-view-font-family);
   font-size: calc(var(--vscode-pane-view-font-size) - 1px) !important; 
}

Until they find time to fix this for a quick workaround you might want to add these values at the end of the CSS file located at: C:\Users{user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css.

Thanks for sharing this! ~~I'm trying to find out how to do this on Mac, can't find said file.~~

 /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

The suggested code change does seem to have an affect, but the key issue is that a list of files starting with 01,02 and so on doesn't align properly when you get to:

09
10
11

As the '1' does take up less space. It feels like the 'font ligatures' setting that you fortunately can disable in the editor is affecting the font in the file explorer.

slifty · 2024-07-01T16:45:39Z

This must be pretty tricky to implement 😅

Just wanted to voice some support in 2024 since I'd love to be able to set the explorer to use a monospace font.

silverling · 2024-07-28T04:20:11Z

Hey guys, I came across a very good extension. By using Apc Customize UI++ Extension, the most parts of VS Code can be customized. Open the developer tools (Help > Toggle Developer Tools) to inspect any element you want to customize. For example, you can use CSS Selector to modify any stylesheet in your settings.json.

"apc.stylesheet": {
    /* Sidebar*/
    ".monaco-workbench .part.sidebar > .content": "font-family: 'Cascadia Code', 'Noto Sans CJK SC'; font-size: 12px;",

    /* Tab */
    ".monaco-workbench .part.editor > .content .title.tabs": "font-family: 'Cascadia Code', 'Noto Sans CJK SC'; font-size: 12px;",
    ".monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a": "font-family: 'Cascadia Code', 'Noto Sans CJK SC'; font-size: 12px;",

    /* Titlebar */
    ".monaco-workbench .part.titlebar": "font-family: 'Cascadia Code', 'Noto Sans CJK SC'; font-size: 12px;",
    ".monaco-workbench .part.titlebar .monaco-action-bar.vertical": "font-family: 'Cascadia Code', 'Noto Sans CJK SC'; font-size: 12px;",

    /* Statusbar */
    ".monaco-workbench .part.statusbar": "font-family: 'Cascadia Code', 'Noto Sans CJK SC'; font-size: 12px;",
    
},

This extension has lots of other features. Just check it out.

id-aditya · 2024-07-30T15:28:30Z

@silverling Thanks for sharing that, I'm one of the very mature user of that extension, try this config if it's of some use to you or some newcomer:

/*----------------------------------------------------------------------------*/
/*widget*/
.monaco-editor .peekview-widget .head .peekview-title {
  font-family: var(--text-type);
  font-size: var(--text-size);
}

.monaco-workbench .part > .content {
  font-family: var(--text-type);
  font-size: var(--text-size);
}

.monaco-findInput .monaco-inputbox {
  font-family: var(--text-type);
  font-size: var(--text-size);
}

.search-view .query-details.more h4 {
  font-family: var(--text-type);
  font-size: var(--text-size);
}

.monaco-editor .find-widget .monaco-findInput .input {
  font-family: var(--text-type);
  font-size: var(--text-size);
}

.monaco-editor .find-widget > .find-part {
  font-family: var(--text-type);
  font-size: var(--text-size);
}

/*----------------------------------------------------------------------------*/
/*explorer-rows*/
.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-tl-row > .monaco-tl-twistie {
  opacity: 0;
}

.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row[aria-expanded="false"] {
  color: #00470033;
}

.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row[aria-expanded="true"] {
  color: #004700FF;
}

.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row {
  color: #7F000033;
}

/*----------------------------------------------------------------------------*/
/*explorer*/
.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows span {
  font-family: var(--text-type);
  font-size: var(--text-size);
}

.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows {
  margin-left: -45px;
}

.explorer-folders-view .monaco-list-row {
  padding-left: 0;
}

/*----------------------------------------------------------------------------*/
/*sidebar-header*/
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item {
  font-family: var(--text-type);
  font-size: var(--text-size);
  text-transform: lowercase;
}

.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar {
  line-height: calc(var(--text-size) * 2);
  height: calc(var(--text-size) * 2);
}

.monaco-action-bar .action-label {
  font-size: var(--text-size);
}

.monaco-workbench .part > .composite.header-or-footer,
.monaco-workbench .part > .composite.title {
  padding: 0 var(--text-size) 0 var(--text-size);
  border-bottom: 1px solid #EFEFEFFF;
}

.monaco-workbench .part.sidebar > .title > .title-label h2 {
  font-family: var(--text-type);
  font-size: var(--text-size);
  text-transform: lowercase;
}

.monaco-workbench .part > .title > .title-actions {
  line-height: calc(var(--text-size) * 2);
  height: calc(var(--text-size) * 2);
}

.monaco-workbench .part > .title > .title-label {
  line-height: calc(var(--text-size) * 2);
  height: calc(var(--text-size) * 2);
}

.monaco-workbench .part > .title {
  line-height: calc(var(--text-size) * 2);
  height: calc(var(--text-size) * 2);
  background-color: #FFFFFFFF;
}

/*----------------------------------------------------------------------------*/
/*sidebar-sub-header*/
.monaco-pane-view .pane > .pane-header h3.title {
  font-family: var(--text-type);
  font-size: var(--text-size);
  text-transform: lowercase;
}

.monaco-workbench .part > .title > .title-label {
  padding-left: 0;
}

.monaco-workbench .part > .title {
  padding-right: 0;
  padding-left: 0;
}

/*----------------------------------------------------------------------------*/
/*tab*/
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-compact {
  max-width: 10px;
  min-width: 10px;
  width: 10px;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-label a,
.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a {
  font-family: var(--text-type);
  font-size: var(--text-size);
  line-height: var(--text-line);
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.close-action-off:not(.sticky-compact) {
  padding-right: var(--text-size);
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
  font-family: var(--text-type);
  font-size: var(--text-size);
  line-height: calc(var(--text-size) * 2);
  height: calc(var(--text-size) * 2);
  padding-left: var(--text-size);
  border-bottom: 1px solid #EFEFEFFF;
  box-sizing: border-box;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container {
  font-family: var(--text-type);
  font-size: var(--text-size);
  line-height: calc(var(--text-size) * 2);
  height: calc(var(--text-size) * 2);
}

/*----------------------------------------------------------------------------*/
/*statusbar-text*/
.monaco-workbench .part.statusbar {
  font-family: var(--text-type);
  font-size: var(--text-size);
  text-transform: lowercase;
}

/*----------------------------------------------------------------------------*/
/*scrollbar-shadow-panel*/
.monaco-scrollable-element > .shadow.top {
  box-shadow: #00000000 0 0 0 0 inset;
  height: 0;
}

/*scrollbar-shadow-tab*/
.monaco-editor .scroll-decoration {
  box-shadow: #00000000 0 0 0 0 inset;
  height: 0;
}

/*----------------------------------------------------------------------------*/
/*icon-activitybar-extension*/
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) {
  font-size: var(--text-size);
}

/*icon-activitybar-inbuilt*/
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.codicon {
  font-size: var(--text-size);
}

/*icon-statusbar-custom*/
.custom-statusbar .monaco-workbench .part.statusbar > .items-container > div.statusbar-item span.codicon {
  font-size: var(--text-size);
}

/*icon-statusbar*/
.monaco-workbench .part.statusbar > .items-container > .statusbar-item span.codicon {
  font-size: var(--text-size);
}

/*icon-sidebar*/
.monaco-action-bar .action-item .codicon {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

/*icon*/
.monaco-workbench .codicon[class*=codicon-] {
  font-size: var(--text-size);
}

/*----------------------------------------------------------------------------*/
.linux,
.mac {
  --monaco-monospace-font: var(--text-type);
  font-family: var(--text-type);
  font-size: var(--text-size);
}

:root {
  --text-type: 'PragmataPro Mono', monospace;
  --text-size: 15px;
  --text-line: 1;
}

PS: Make sure to replace the text PragmataPro Mono with the name of mono space font you want to use.

tomkra · 2024-08-09T06:39:20Z

I think this issue is missing accessibility label so it can be included in accessibility issues query so It can be planned in month Iteration plan accessibility issues.

Font size and font family are definitelly part of accessibility issues and I think the label should be added.

Iainmon · 2024-08-09T06:43:08Z

What if everyone here just opens a new issue with a similar title? It would certainly get someone's attention.

Iainmon · 2024-08-09T06:44:35Z

Finally!! Now that you're here, see the comment above.

DanBrown47 · 2024-08-09T06:48:47Z

What if everyone here just opens a new issue with a similar title? It would certainly get someone's attention.

Keep it civil

Freemoneys31 · 2024-08-10T06:47:39Z

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.

https://medium.com/@moneysfreed/atlantas-hottest-underground-unsigned-artist-3ab0a32d5780 ![AB1D70F4-FC2D-4187-AD66-F187B9F3C546](https://github.com/user-attachments/assets/881ed395-ae9e-4b1b-9653-4373afe42aff) [File_000.png.pdf](https://github.com/user-attachments/files/16568751/File_000.png.pdf)

meadowsys · 2024-08-11T20:38:44Z

Font size and font family are definitelly part of accessibility issues and I think the label should be added.

oh 100% for sure (but there is no one here from microsoft that can add it... heh)

id-aditya · 2024-08-12T20:13:41Z

They're skeptical that this request will end up breaking the UI. They didn't plan the UI correctly initially like everyone else.

They need to be brave enough to implement this, not having this feature has made VSCode not so fun, those who are forced will never know the feel good feeling of being able to customize UI font family and size, it adds to productivity as well.

I escaped the matrix by using APC Customize UI+ extension but many especially newcomers to the editor will never taste it.

Those who wanna know how beautiful the IDE can become if we have this feature enabled:

khalby786 · 2024-09-04T06:45:26Z

Dear VSCode,

In 2015, I was 9 years old. Young and blissfully ignorant of the world outside. I was a mere 9-year-old kid back then, probably still in elementary school, dreaming of the day I'd be old enough to complain about things like font choices in code editors. I was a mere 9-year-old kid back then, where my biggest concern was going back home and watching Transformers episodes on TV.

I am now 18 years old—a full-fledged adult. Over these years, the world has undergone seismic shifts: we've seen new leaders rise and fall, memes come and go, technology evolve beyond our wildest imaginations, and even weathered a global pandemic.

Meanwhile, my personal journey has been nothing short of a tragic epic. I’ve lived through the darkest recesses of adolescence, survived the existential crises of my teenage years, and watched as the spark of youthful optimism withered into weary resignation. The hopes and dreams of my early childhood have crumbled, giving way to a profound sense of existential dread. I witnessed the rise and fall of countless civilizations with my own eyes. My own personal growth has felt like an endless cycle of trying to reinvent myself, only to face the cold, indifferent reality that some things, like this font request, never evolve.

Amid all this tumult and transformation, one constant has remained unchanged: the unresolved request for an interface font update in VSCode. Even when the tides of the world changed, when the tables turned, and the coins flipped; when my parents disowned me and I turned to an addicted life of video games and StackOverflow threads, this GitHub issue was the only thing that stayed strong with me and open throughout all the traumatizing times.

Here’s to a decade of waiting and hoping. As the world moves forward, let’s not forget the humble font request that has withstood the test of time. While everything else around us evolved—society, technology, even my maturity level—VSCode's persistence to not add this feature still stays strong in my heart. If my 9-year-old self could witness this touching moment, I'm sure he'd be proud.

Sincerely,
A recovering developer

russeg · 2024-09-13T02:28:33Z

The lack of acknowledgement from the VS Code team makes me think this is not a technical issue, but something else. I mean, what is the insurmountable programming problem that this is still not implemented?

Maybe we should contact Guinness Book of World Records to suggest this as the hardest programming task in the universe?

This is really mind boggling.

mitsukuri · 2024-09-13T10:53:23Z

@russeg Why bother implementing font customization when all $takes are on neuroimplants and direct brain-to-AI interface) For the short transitory period when those brains are still needed for SkyNet's maintenance.. (Sarcasm, just in case)

DanBrown47 · 2024-09-13T15:28:35Z

10 വർഷത്തെ കാത്തിരിപ്പാ

ismailarilik · 2024-09-14T14:41:48Z

I am planning to look at this issue but I just wonder what the challenges are. Does it require a bunch of changes? Isn't a PR like this enough: #144365 (probably with a revision) If someone mentor me, I would be glad and have a chance to handle what is necessary for this long-waited issue.

ismailarilik · 2024-09-15T11:46:41Z

I am planning to look at this issue but I just wonder what the challenges are. Does it require a bunch of changes? Isn't a PR like this enough: #144365 (probably with a revision) If someone mentor me, I would be glad and have a chance to handle what is necessary for this long-waited issue.

TL; DR: This project (microsoft/vscode) is open source but not free; let's fork it and fix long-waited issues there.

Just gave up. The story behind the PR #144365 is strange: When it was ready, it is kept up-to-date and waited for a feedback or approval from maintainers but doesn't get any response. Maintainers (Microsoft) don't even review a PR which should probably fix an issue which is much wanted by the community for a long time. This is weird, right? Yes, if this project was driven by community's wishes. But this is not the situation here. The issues here are prioritized by if they would bring any profit directly. But hey, this must be the case, right? Microsoft is a non-non-profit company.

So if I open a PR to fix this issue, it won't even be reviewed. So what can we do? I think we should fork this repo and implement long-waited features there. Actually there is a popular fork named VSCodium but they are probably not interested to maintain a fork of vscode. But I am gonna open this issue there anyway and try to explain why we need to maintain a fork.

If you wanna support me just upvote this comment and that comment.

manuartero · 2024-09-16T07:14:29Z

maybe Cursor does consider this ? 🤔

jrieken added help wanted Issues identified as good community contribution opportunities feature-request Request for new features or functionality labels Nov 24, 2015

egamma modified the milestone: Backlog Dec 10, 2015

bpasero added the workbench label Apr 7, 2016

bpasero changed the title ~~Change font size of outside editor~~ Allow to change the font size of the workbench Apr 7, 2016

bpasero self-assigned this Apr 7, 2016

bpasero removed the help wanted Issues identified as good community contribution opportunities label Apr 7, 2016

bpasero mentioned this issue May 30, 2016

Allow modification of sidebar font size #3702

Closed

bpasero removed their assignment Aug 17, 2016

bpasero changed the title ~~Allow to change the font size of the workbench~~ Allow to change the font size and font of the workbench Feb 10, 2017

This was referenced Feb 10, 2017

Request to enable font customization for other non-editor window #10605

Closed

Font size for the side panel cannot be changed #10660

Closed

bpasero mentioned this issue Mar 12, 2017

I want to change the font size of sidebar #22448

Closed

bpasero mentioned this issue May 5, 2017

Support to theme the entire workbench #3112

Closed

alexdima mentioned this issue May 21, 2017

Weird color changes when moving cursor over line numbers bar #26115

Closed

marcoms mentioned this issue Jun 21, 2017

Add some API to support GUI customization #1833

Open

Xanewok mentioned this issue Jul 17, 2017

RLS analysis makes everything on the bottom bar jiggle rust-lang/vscode-rust#81

Closed

bhavyaus reopened this Jun 18, 2024

benibenj mentioned this issue Jun 25, 2024

About the sidebar font size can be customized appeal #208628

Closed

rzhao271 mentioned this issue Jul 25, 2024

Global font size modifier #223766

Closed

id-aditya mentioned this issue Jul 30, 2024

Add ability to reverse the sort order in explorer #149952

Merged

ismailarilik mentioned this issue Sep 15, 2024

We MUST maintain a fork VSCodium/vscodium#2030

Open

nrthbound mentioned this issue Sep 21, 2024

VS Code Tree View Font Options #229292

Closed

bpasero mentioned this issue Sep 26, 2024

Feat: Allow to change entire VSCode font system #229873

Closed

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

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

Comments

hsdk123 commented Nov 24, 2015

skube commented Dec 3, 2015

egamma commented Dec 3, 2015

conceptualspace commented Aug 5, 2016

bobrocke commented Mar 6, 2017

nishantgeorge commented Apr 14, 2017

dodalovic commented May 5, 2017

cgiacomi commented May 5, 2017

bobrocke commented May 5, 2017

kentor commented May 17, 2017 • edited Loading

xster commented May 18, 2017

timc13 commented Jun 12, 2017

mzabuawala commented Jun 21, 2017

nrthbound commented Jun 18, 2024

tang-nn commented Jun 21, 2024

Please provide this feature!!!

bhavyaus commented Jun 26, 2024

nrthbound commented Jun 26, 2024

mariushx commented Jun 29, 2024

louwrentius commented Jul 1, 2024 • edited Loading

slifty commented Jul 1, 2024

silverling commented Jul 28, 2024

id-aditya commented Jul 30, 2024 • edited Loading

tomkra commented Aug 9, 2024

Iainmon commented Aug 9, 2024

Iainmon commented Aug 9, 2024

DanBrown47 commented Aug 9, 2024

Freemoneys31 commented Aug 10, 2024

meadowsys commented Aug 11, 2024

id-aditya commented Aug 12, 2024

khalby786 commented Sep 4, 2024 • edited Loading

russeg commented Sep 13, 2024

mitsukuri commented Sep 13, 2024 • edited Loading

DanBrown47 commented Sep 13, 2024

ismailarilik commented Sep 14, 2024

ismailarilik commented Sep 15, 2024 • edited Loading

manuartero commented Sep 16, 2024

kentor commented May 17, 2017 •

edited

Loading

louwrentius commented Jul 1, 2024 •

edited

Loading

id-aditya commented Jul 30, 2024 •

edited

Loading

khalby786 commented Sep 4, 2024 •

edited

Loading

mitsukuri commented Sep 13, 2024 •

edited

Loading

ismailarilik commented Sep 15, 2024 •

edited

Loading