How to change environment's font size?

Question

Is there a way to change the environment font size in Visual Studio Code? Stuff like IntelliSense box, debug panel, file names, etc.

I know how to change the editor's font size but I cannot figure out how to change the environment font size. So I wonder if you can change it somehow.

All these answers also change the editor font size. How can I change the environment font size without the editor? — mark-hahn, Nov 01 '19 at 18:41
Surprising how much non answers get up voted. An answer to the OP question is just not be found here. Yet so many repeat the same answer to the exact same, yet different question from the OP. — Pedro Rodrigues, Nov 09 '19 at 16:09
Astonishing the number of posts that aren't answering the actual question but how to change the font size — Manu Artero, Apr 14 '21 at 15:04
Use CTRL+ and CTRL- to zoom the IDE, you dont have to look for the setting... for whoever reads this after reading the answer below... — Rmaxx, May 10 '21 at 19:19
User Arleme finally posted correct approach to solving the problem on July 16, 2021. You have to manually tinker with `c:/Users//AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.desktop.main.css` file. Looks like different sections of vscode have their font-size defined in different places. Also, increasing the font-size does not increase padding or line height, so merely increasing font-size is not enough. MS needs to develop a setting for this. — Vanity Slug - codidact.com, Nov 05 '21 at 11:56
[Link to the best, most correct answer of all](https://stackoverflow.com/questions/33701933/how-to-change-environments-font-size#answer-68405296) by Arleme. — Vanity Slug - codidact.com, Nov 05 '21 at 12:01
I just looked into increasing size of filenames. Line height for each file is defined in-line in "style" attribute. As far as I can tell it is (close to) impossible to achieve what OP as asking. It will require developers baking this feature into vscode or maybe an extension. Not sure if extension can do something like that, though. — Vanity Slug - codidact.com, Nov 05 '21 at 12:11

Benjamin Pasero · Accepted Answer · 2016-04-15T05:26:48.273

479

Currently it is not possible to change the font family or size outside the editor. You can however zoom the entire user interface in and out from the View menu.

Update for our VS Code 1.0 release:

A newly introduced setting window.zoomLevel allows to persist the zoom level for good! It can have both negative and positive values to zoom in or out.

edited Apr 15 '16 at 05:26

answered Nov 15 '15 at 07:18

Benjamin Pasero

113,622
14
75
54

if you zoom out and wonder why the cursor is disappearing, check if you have it set to "thin line". Setting it to "line" will correct the problem, at least for down to 60% zoom. – Michael Johnston Oct 20 '18 at 19:08
4

Window zoom has a downside, it can trigger "fuzzy fonts" in terminal for instance: https://github.com/microsoft/vscode/issues/84194 – sandos Nov 14 '19 at 09:36
12

Use CTRL+ and CTRL- to zoom the IDE, you dont have to look for the setting... – Rmaxx May 10 '21 at 19:18
It works. But it won't change the font size in the drop down menus. That is set by the operation system (at least on Mac OS X). – asmaier Sep 28 '22 at 19:21

score 238 · Answer 2 · edited Jun 28 '17 at 07:44

238

Just copy "editor.fontSize": 18 into your setting.json of the editor.

Pressing Control+Shift+P and then typing "settings" will allow you to easily find the user or workspace settings file.

edited Jun 28 '17 at 07:44

garyh

2,782
1
26
28

answered Apr 01 '16 at 07:54

Edwin

2,613
1
9
2

45

This work well, but not the same as OP want, to resize whole things not only in text editor – Thaina Yu Dec 24 '16 at 07:39
@StepanSuvorov see my new answer below, i know it comes late though, cheers! – Carlos Valencia Jan 05 '17 at 16:44
@randomguy04 still don't see shortcut for changing size in your answer – Stepan Suvorov Jan 06 '17 at 12:19
this worked for me, I wanted to increase the font size of the open file only, not the sidebar, so I did the above and set increase font size to a defined hotkey. – Sam Feb 05 '21 at 21:05
This is correct. ✓ – Guy Lepage Apr 18 '23 at 14:13

score 237 · Answer 3 · edited Dec 26 '22 at 00:54

237

In Visual Studio Code, by pressing Ctrl+ and Ctrl- you can change the overall font size of the IDE. This helps faster than changing settings in every session.

edited Dec 26 '22 at 00:54

starball

20,030
7
43
238

answered Mar 22 '17 at 05:52

Alegozalves

2,419
1
12
4

15

note, this modifies user settings "window.zoomLevel": 1, – Damian Green Feb 21 '18 at 14:01
4

In the most recent version, zoom in is ```Ctrl + =``` – Ryan Walker Apr 02 '18 at 01:55
Than you. This is what I was looking for. – RaviLobo Jun 14 '22 at 11:56

score 103 · Answer 4 · answered Jun 02 '18 at 03:04

103

Try playing around with a combination of the following user settings:

{
  "editor.fontSize": 18,
  "window.zoomLevel": 1.5,
}

answered Jun 02 '18 at 03:04

Andrei Pokrovsky

3,590
3
26
17

3

this should be added into the accepted answer. Very concise and on point – F.S. Oct 30 '19 at 17:39
9

`"window.zoomLevel": 1.5` is a very good choice for old guy like me – e2a Nov 22 '19 at 17:59
2

All the bad answers here with a ton of upvotes, this is finally the right approach. – Mark Jun 26 '20 at 03:22
If you want the text smaller choose a negative number: `"window.zoomLevel": -0.5` – sophiemachin Sep 15 '21 at 08:57
+1. Using keyboard shortcuts modifies this value by 1 (integer). Didn't know it could be set to decimals/floats. – akinuri Mar 27 '23 at 08:58

Carlos Valencia · Answer 5 · 2017-08-30T19:50:59.467

22

As of mid 2017 To quickly get to the settings files press ctrl + shift + p and enter settings, there you will find the user settings and the workspace settings, be aware that the workspace settings will override the user settings, so it's better to use the latter directly to make it a global change (workspace settings will create a folder in your project root), from there you will have the option to add the option "editor.fontSize": 14 to your settings as a quick suggestion, but you can do it yourself and change the value to your preferred font size.

To sum it up:

ctrl + shift + p
select "user settings"
add "editor.fontSize": 14

edited Aug 30 '17 at 19:50

answered Jan 05 '17 at 16:43

Carlos Valencia

6,499
2
29
44

21

this does NOT answer OP's question. OP specifically asks for changing environment font size, not editor font. – F.S. Oct 30 '19 at 17:38
Thanks for the Feedback @Chris, however I do think it answers the question and has the necessary information. if you want it to have it per environment, change the workspace settings rather than the user settings and, your specifi env settings will be persisted in the `.vscode` folder – Carlos Valencia Nov 04 '19 at 09:56
12

The OP asks for the `environment`, as in everything in the GUI that is not in the text editor, `Stuff like IntelliSense box, debug panel, file names, etc`. I could be wrong, but I don't think OP refers to the env that you are talking about – F.S. Nov 04 '19 at 23:42

score 21 · Answer 6 · edited Aug 26 '18 at 03:30

21

You can Zoom In and Zoom Out the entire user interface from the View menu.

Right now i'm using version 1.21.1 and there in view menu you can get the Zoom in and Zoom out option which are the 2nd and 3rd last options. You can do it by using Ctrl + + and Ctrl + -.

You can reset the zoom at any time by selecting Reset Zoom option.

edited Aug 26 '18 at 03:30

Neithan Max

11,004
5
40
58

answered Apr 04 '18 at 10:14

shankar upadhyay

883
12
18

1

Here the entire user interface means the VSCode editor. – shankar upadhyay May 31 '18 at 11:34
Yeah, that scales the entire window, which is perfect if you have a high resolution screen – klapshin Apr 02 '19 at 03:38

score 16 · Answer 7 · edited Aug 26 '18 at 04:45

16

After Pressing Control+Shift+P as suggested by @Edwin:

Look for Workspace Settings:

Then "Place your settings in the file to the right to overwrite...default and user settings," or click the UserSettings tab to adjust the window.zoomLevel if that is the desired action.

edited Aug 26 '18 at 04:45

eyllanesc

235,170
19
170
241

answered Jul 12 '17 at 16:22

usefulBee

9,250
10
51
89

Aniruddha · Answer 8 · 2020-03-28T09:26:50.473

In Visual Studio Code, the font-size can be easily changed from the Settings tab.

The simplest way to do this is to press Ctrl + Shift + P and then type 'Settings'. This will show you a few results. Choose 'Settings(UI)'. The Settings tab will get opened in the editor. Now you can change the font settings from here. This will only affect the editor's font.

Or, you can also click on the settings icon on the left bottom of the window and search for font from there.

In order to change the font size of the entire environment, you may consider pressing ctrl++. This will work like zooming into the whole environment, resulting in an increased font-size.

score 12 · Answer 9 · edited Apr 09 '19 at 11:19

According to the changelog of version 1.2, new commands were added to zoom in and out only the font but the entire UI.

Changelog: https://code.visualstudio.com/updates/v1_24#_font-zoom-commands

Use the following keybindings to replace the default global zoom actions:

on macOS:

{ "key": "cmd+numpad_add",      "command": "editor.action.fontZoomIn" },
{ "key": "shift+cmd+=",         "command": "editor.action.fontZoomIn" },
{ "key": "cmd+=",               "command": "editor.action.fontZoomIn" },
{ "key": "cmd+numpad_subtract", "command": "editor.action.fontZoomOut" },
{ "key": "shift+cmd+-",         "command": "editor.action.fontZoomOut" },
{ "key": "cmd+-",               "command": "editor.action.fontZoomOut" },
{ "key": "cmd+numpad0",         "command": "editor.action.fontZoomReset" },
{ "key": "cmd+0",               "command": "editor.action.fontZoomReset" },

on Windows and Linux:

{ "key": "ctrl+numpad_add",      "command": "editor.action.fontZoomIn" },
{ "key": "shift+ctrl+=",         "command": "editor.action.fontZoomIn" },
{ "key": "ctrl+=",               "command": "editor.action.fontZoomIn" },
{ "key": "ctrl+numpad_subtract", "command": "editor.action.fontZoomOut" },
{ "key": "shift+ctrl+-",         "command": "editor.action.fontZoomOut" },
{ "key": "ctrl+-",               "command": "editor.action.fontZoomOut" },
{ "key": "ctrl+numpad0",         "command": "editor.action.fontZoomReset" },
{ "key": "ctrl+0",               "command": "editor.action.fontZoomReset" },

Try this: 1. Ctrl+Shift+P -> 2. Search for (Preferences: Open Keyboard Shortcuts) -> 3. At the top right end of Keyboard Shortcuts [Tab], Next to the Split Editor Button there is the Open Keyboard Shortcuts(JSON) button to open keybindings.json file -> 4. Paste the above commands in that keybinding.json file and save -> 5. Now test the above key combinations to change the just only font size in VS code without changing the UI size — Binaya Shrestha, Sep 22 '22 at 07:49

PythonAndPascal · Answer 10 · 2019-05-21T18:48:31.250

(VS Code 1.33.1 on Windows 7)

Zoom all (UI and editor): CTRL + +, CTRL + -.

Zoom editor: CTRL + Mouse Wheel.

See below how i fixed it.

As suggested by @Edwin: Pressing Control+Shift+P and then typing "settings" will allow you to easily find the user or workspace settings file.

My settings file is found here: "C:\Users\You_user\AppData\Roaming\Code\User\settings.json"

My file looks like this:

{
    "editor.fontSize": 12,
    "editor.suggestFontSize": 6,
    "markdown.preview.fontSize": 0,
    "terminal.integrated.fontSize": 10,
    "window.zoomLevel": 0,
    "workbench.sideBar.location": "left",
    "editor.mouseWheelZoom": true
}

kxnyshk · Answer 11 · 2022-10-01T18:25:46.630

10

Press Ctrl + Shift + P and go to Settings -> Preferences: Open Settings (JSON) -> settings.json Copy and paste the following code lines:

"editor.fontSize": 15,
"window.zoomLevel": -1,

Save and close the file Ctrl + S this will get your work done. You can also experiment it by changing those values.

edited Oct 01 '22 at 18:25

answered Jul 14 '22 at 21:28

kxnyshk

167
2
9

score 9 · Answer 12 · answered Mar 21 '18 at 17:24

A Simple approach to change the Font Size in Visual Studio Work Environment :

Go To : File -> Preferences -> Settings OR Press CTRL+, i.e. CTRL + COMMA.

This will open settings.json.

You can see 3 tabs there :

User Settings
Workspace Settings
Folder Settings

Go to User Settings and Add this :

{
"editor.fontSize": 16
}

Now just save and close the file.

In above code, 16 represents the font size. Increase of Decrease as per your wish.

score 8 · Answer 13 · answered Sep 21 '17 at 12:59

8

I have mine set to "editor.fontSize": 12,

Save the file, you will see the effect right the way.

Enjoy !

answered Sep 21 '17 at 12:59

code-8

54,650
106
352
604

8

that's not what was asked for – JohnC Jan 25 '18 at 23:40

score 8 · Answer 14 · edited Aug 27 '19 at 09:15

8

Took me ages to work out what I'd accidentally done when my code window went huge:

Zoom out = Ctrl + Shift + , (comma)

Zoom in = Ctrl + Shift + . (full stop/period)

Not actually an answer to the posted question at all but I think someone like me will end up here because of the symptoms!

edited Aug 27 '19 at 09:15

Gaurav Mall

2,372
1
17
33

answered Aug 27 '19 at 08:42

Richard Nixon

839
6
9

score 7 · Answer 15 · answered Mar 12 '18 at 07:07

As of now (March 2018) & version 1.21.0, you can go to Settings, search for 'zoom' and change "editor.mouseWheelZoom": false which is false by default to true. This will allow to zoom in/out on VS Code using control button and mouse - ctrl + scrollUp/scrollDown. For changing the fontSize of the overall working space/screen of VS Code, refer to Alegozalves's answer above.

score 7 · Answer 16 · edited Jul 23 '19 at 06:38

7

Press Ctrl, Shift, P at the same time, a menu will appear, search for Editor Zoom in. After selecting that, the font will get larger by some degree.

Repeat this until you achieve your desired font size.

edited Jul 23 '19 at 06:38

Udhav Sarvaiya

9,380
13
53
64

answered Oct 18 '18 at 04:14

Shamsul Arefin

1,771
1
21
21

Udhav Sarvaiya · Answer 17 · 2019-07-23T06:41:27.473

There are many options to change the font size in the Visual studio code(version:1.36.1), Editor

Option 1:

Go To: File > Preferences > Settings > select User tab > Text Editor > Font > Font Size

Font Size: Change font size in pixels as per your requirement

Option 2:

Press Ctrl + P

Search: settings.json, Open file and add this line in settings.json file:

{
    "editor.fontSize": 20
}

Note: Save file after changes

Option 3:

Press Ctrl + Shift + P

Search: Editor Font Zoom In

Just click on it, your font size will be increased

Search: Editor Font Zoom Out

Just click on it, your font size will be decreased

this is the fifth answer that does not answer the question in the same way — WestCoastProjects, Jun 18 '21 at 15:05

score 4 · Answer 18 · answered May 15 '23 at 22:22

4

FOR MAC

command with + command with -

FOR WINDOWS

control with + control with -

answered May 15 '23 at 22:22

Mohammad Atif Aftab

684
8
10

score 3 · Answer 19 · answered Jul 16 '21 at 07:41

3

If you really want to change the environment's font, edit the css in

c:/Users/etech/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.desktop.main.css

Just put at the end of the file your custom CSS :

body{
   font-size : 15px !important
}

answered Jul 16 '21 at 07:41

rootkit7628

119
4

2

This is the closest to correct answer. You **have to** tinker with `workbench.desktop.main.css` file to increase environment font. – Vanity Slug - codidact.com Nov 05 '21 at 11:55

score 2 · Answer 20 · edited Mar 24 '22 at 05:26

2

On windows, in 2022 I will use,

CTRL + + to zoom in and CTRL + - to zoom out the environment.

edited Mar 24 '22 at 05:26

Suraj Rao

29,388
11
94
103

answered Mar 24 '22 at 05:19

Vikram Sapate

1,087
1
11
16

score 1 · Answer 21 · edited Jul 23 '19 at 06:36

1

Press Ctrl and use the mouse wheel to zoom In or Out.

edited Jul 23 '19 at 06:36

Udhav Sarvaiya

9,380
13
53
64

answered Mar 18 '19 at 07:41

Brave

371
1
3
10

You can Zoom In and Zoom Out the entire user interface from the View menu. But question is how to change font size – Apr 09 '19 at 11:21

score 1 · Answer 22 · answered Dec 16 '19 at 09:13

1

Open VS Code
Type command CTRL + SHFT + P
Type Settings
Settings file will open.
Now under User > Text Editor > Font, find Font Size
Enter your desired font size

That's it.

answered Dec 16 '19 at 09:13

hammadshahir

350
4
7

4

This is not what the question was about. It was about the environment font (menus etc), not the text editor font. – larsch Sep 22 '20 at 09:56
1

This is not what the question is about. You're telling us how to configure editor font size, not the environment/shell font size. – Paul-Sebastian Manole Sep 24 '20 at 14:27

score 1 · Answer 23 · answered Apr 11 '23 at 17:07

I realize this response is very "late in the game", but I think I have a solution that actually addresses the OP's original question on how to increase the font of the menus. It would appear that VSCode sets its Menu font size based on the operating system. The "fix" I am about to describe will change the font size of ALL apps, not just VSCode so use accordingly. This is Windows specific, but there may be corresponding setting(s) for Linux and Mac. Press the Windows key and search for Settings, from there search for Ease of Access display settings. From there use the slider to "Make Text Bigger" and then click Apply. This will take several seconds to Apply and all screens will be blue while the change is taking affect.

score 0 · Answer 24 · answered Dec 09 '20 at 17:59

0

There is a setting window.zoom that can enlarge the entire window content including the top menus and side nav tree. Setting this to 1 on a 4k monitor makes the content similar to a 1080p monitor of the same physical size.

answered Dec 09 '20 at 17:59

Michael Latta

47
1
4

score 0 · Answer 25 · answered May 21 '23 at 12:35

0

If you want to increase the font size of your code without increasing the entire editor.. you can enable editor.mousewheelzoom

Now hold CTRL and mouse wheel to zoom-out or zoom-in

answered May 21 '23 at 12:35

Mano Mangaldas

61
1
2

score -3 · Answer 26 · answered Dec 07 '20 at 03:28

-3

File --> Preferences --> Settings --> User --> Font --> Font Size Enter the Font size. You can sync these settings with your Git Hub or Microsoft TFS.

https://code.visualstudio.com/docs/getstarted/settings

answered Dec 07 '20 at 03:28

Madhusudhana Reddy Nadamala

77
1

3

Please re-read the question. The question is asking about changing the font size for the *whole environment*, not just the editor (where they also say they already know how to change the editor font size), and the latter has already been covered in multiple previous answers. – Hoppeduppeanut Dec 07 '20 at 04:59

How to change environment's font size?

26 Answers26

Option 1:

Option 2:

Option 3:

Linked

Related