How to change environment's font size?

Visual Studio-CodeVscode Settings

Visual Studio-Code Problem Overview


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.

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

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.

Solution 2 - Visual Studio-Code

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.

enter image description here

Solution 3 - Visual Studio-Code

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. Hope it helps...

Solution 4 - Visual Studio-Code

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

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

Solution 5 - Visual Studio-Code

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:

  1. ctrl + shift + p

  2. select "user settings"

  3. add "editor.fontSize": 14

Solution 6 - Visual Studio-Code

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.

Solution 7 - Visual Studio-Code

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

  1. Look for Workspace Settings:

enter image description here

  1. 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.

enter image description here

Solution 8 - Visual Studio-Code

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" },

Solution 9 - Visual Studio-Code

(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
}

Solution 10 - Visual Studio-Code

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 :

  1. User Settings
  2. Workspace Settings
  3. 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.

Solution 11 - Visual Studio-Code

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.

enter image description here

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.

Select Settings(UI)

Solution 12 - Visual Studio-Code

enter image description here

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

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

enter image description here

Enjoy !

Solution 13 - Visual Studio-Code

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.

Solution 14 - Visual Studio-Code

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!

Solution 15 - Visual Studio-Code

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.

Solution 16 - Visual Studio-Code

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

Solution 17 - Visual Studio-Code

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

Solution 18 - Visual Studio-Code

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

That's it.

Solution 19 - Visual Studio-Code

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.

Solution 20 - Visual Studio-Code

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
}

Solution 21 - Visual Studio-Code

On windows, in 2022 I will use,

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

Solution 22 - Visual Studio-Code

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

enter image description here

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSul AgaView Question on Stackoverflow
Solution 1 - Visual Studio-CodeBenjamin PaseroView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeEdwinView Answer on Stackoverflow
Solution 3 - Visual Studio-CodeAlegozalvesView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeAndrei PokrovskyView Answer on Stackoverflow
Solution 5 - Visual Studio-Coderandomguy04View Answer on Stackoverflow
Solution 6 - Visual Studio-Codeshankar upadhyayView Answer on Stackoverflow
Solution 7 - Visual Studio-CodeusefulBeeView Answer on Stackoverflow
Solution 8 - Visual Studio-CodeipeluffoView Answer on Stackoverflow
Solution 9 - Visual Studio-CodePythonAndPascalView Answer on Stackoverflow
Solution 10 - Visual Studio-CodeAnkit PandeyView Answer on Stackoverflow
Solution 11 - Visual Studio-CodeAniruddhaView Answer on Stackoverflow
Solution 12 - Visual Studio-Codecode-8View Answer on Stackoverflow
Solution 13 - Visual Studio-CodeShamsul Arefin SajibView Answer on Stackoverflow
Solution 14 - Visual Studio-CodeRichard NixonView Answer on Stackoverflow
Solution 15 - Visual Studio-CodeAbhishek KView Answer on Stackoverflow
Solution 16 - Visual Studio-CodeUdhav SarvaiyaView Answer on Stackoverflow
Solution 17 - Visual Studio-CodeBraveView Answer on Stackoverflow
Solution 18 - Visual Studio-CodehammadshahirView Answer on Stackoverflow
Solution 19 - Visual Studio-CodeMichael LattaView Answer on Stackoverflow
Solution 20 - Visual Studio-Coderootkit7628View Answer on Stackoverflow
Solution 21 - Visual Studio-CodeVikram SapateView Answer on Stackoverflow
Solution 22 - Visual Studio-CodeMadhusudhana Reddy NadamalaView Answer on Stackoverflow