Markdown text size too small by default. Would like ability to change font size of markdown rendering

[IanMatthewHuff]

Was playing around a bit, and didn't see a way to set this. Both Editor Font Size and Markdown Preview Font Size didn't look to change it. Per chat with @rebornix this might be a few feature to add.

Note: "this is a normal line" is the markdown cell.

[miguelsolorio]

I would consider this a "bug" since the markdown.preview.fontSize setting says:

Controls the font size in pixels used in the Markdown preview.

@mjbvz is there an ETA on when this would be added to an iteration? I keep seeing this come up in user feedback.

[DonJayamanne]

There's also a feature request #123149
Different font sizes for output (not just markdown)

[mjbvz]

Not in favor of reusing that setting for notebooks. I believe we should add a new setting for notebook markup/outputs

What do people want this setting to do? Scale everything? Or just the body text?

[miguelsolorio]

I think the same way the current setting scales everything. I think having separate settings is fine, same for output as long as it inherits from the notebook default.

[aschoettler]

@mjbvz

What do people want this setting to do? Scale everything? Or just the body text?

It would be nice to have a setting to scale everything (headers/text/etc) so that when editor.fontSize is larger for visibility, all the rendered markdown can be independently scaled up so that the markdown & code cells look proportional. For example, this would allow scaling the markdown so that rendered code blocks / inline code match the scale of actual code cells.

[snoop2head]

I am desperately waiting for an update for this feature. I changed "Markdown > Preview: Font Size" to be same as "Editor: Font Size" but it seems like it's not the feature that I expected.

I think making independent settings will be better for users to make things customizable.

[wenkangmq]

If it's not this small people would not have noticed it. Just make it larger before adding customization feature for this.

[greazer]

I changed the title of this to reflect the very common complaint that markdown text by default is too small, which seems to be the main driver in wanting to customize the size.

Personally, I'm having a hard time seeing how the current default is that much smaller. Doing a close comparison in Photoshop of the following image shows that VS Code renders markdown about one pixel smaller for capital letters than that of Jupyter. VS Code's version is also shorter in length. For reference, the coding font size is identical.

So indeed VS Code by default is smaller, but is this enough to be driving the complaints? Are there other variables that make this difference much larger? For example, the above was captured on Windows. Maybe Mac or Linux is different?

[wenkangmq]

To me the problem is that the default font size for markdown is smaller than that of the code's and output's.

When people add markdown, they mean to say important things like their conclusions from the output etc, so the default markdown text should at least be the same with code and output font size, not smaller.

One workaround is to set the editor font size to 12, then use "ctrl+=" to enlarge everything, then markdown text would be easier to read, but then the menu and other stuff are all going to be larger...

So I think it's best to just make the default markdown text size larger (at least the same with code), or give people a custom setting for it like the "editor font size".

[ezk84]

I'd like to add that as well as it being too small relative to the code and output text by default, in cases where I've deliberately set the editor's font size larger (to accommodate a secondary screen without also scaling the UI) the Markdown output then also looks completely out of place.

So it's not enough to set the default to a larger font size, but that size should either change in proportion to the current editor font size, or there should be a setting that allows for tweaking the two independently of each other.

[greazer]

Note that while there isn't the ability to change the notebook markdown font size separately, the current vscode-insider builds have increased the default size. For many of you this may be sufficient. However, keeping this issue open for possibly adding a the separate setting.

[FedericoDM]

I would just like to make a comparison with Databrick's Python Notebooks Markdown Feature:

With VSCode's Jupyter Notebook Markdown Feature:

I do think a separate setting would be best for users who would like to have a bigger Markdown font size (which, in my case, is much better for my eyesight and helps me a lot in commenting the code and separating it in blocks).

[snoop2head]

Agree with @FedericoDM !

Attached image is comparing
VSCode rendered Jupyter Notebook(left) vs Colab rendered Jupyter Notebook(right).

As you can see, two of each code blocks' and results' font size are similar.
However, markdown text of the VSCode is barely visible... Much smaller than of Colab's.
I hope we can have separate customizable markdown fontsize feature for Jupyter Notebook!

Sidenote 1: Markdown > Preview: Font Size of VSCode settings doesn't seem to affect Jupyter Notebook's Markdown features.
Sidenote 2: VSCode Editor's Font Size is 16, font family is Menlo, Monaco, 'Courier New', monospace

[tilohauke]

H1. In my case, the font size is way too small (13px). I have a high resolution tablet display. As far as I can see, this comes from the default font size of the editor. See screenshot.

[jasperhyp]

Totally agree with the above comments. Adding this feature would be very helpful. At least the default font size can be increased a bit to match that of Google Colab's, which helps people with relatively moderate vision.

[ZijianWang-ZW]

Please consider changing the font size in the next version. Now it is too small for reading.

[greazer]

Thanks for all the feedback here. We do understand that having a separate setting to adjust the size of markdown text in a cell would be ideal. However, our resourcing situation is such that it's not as high priority of a work item to get done. PR's are welcome! :)

However, an in-the-meantime fix is to simply change the default size of the text as we did earlier. Given the following screenshot you can see the size of the VS Code font is pretty close to that of Jupyter Notebook. Both use font a font height that's similar to that of the code block fonts.

It does look like the font kerning and family may be different between VS Code and Jupyter because VS Code's text appears a bit more "squished". It's also gray by default vs black. That certainly doesn't help the situation.

But then there's Google Colab. It is obviously using a much larger default font size. In fact, it's markdown text size is significantly larger than the code itself.

All this said, we can certainly bump the default size a bit more to make it similar to that of Colab. However, that wouldn't likely fix the problem that @tilohauke screen-shotted above where the markdown text is significantly smaller than that of the code. @tilohauke, what is the code behind your screenshot?

[Nufflee]

The tiny Markdown font size makes Jupyter Notebooks in VS Code pretty much unusable, especially on 2K or even 4K displays. As pointed out in this comment, the font size uses a CSS variable that is not possible to change in the settings.

The only viable workaround I found was using the DevTools to change the variable every time I start up VS Code but that is not sustainable. Example screenshot attached.

[LiangChen3519]

Hi, I found the good way to adjust the font related problems is using inline CSS command. For example:

• Normal text (e.g. some explanations or your conclusions)
  before applying css:
  
  after applying css:
  
  it is easy that you can adjust the font family, font size , font color or other formats. yes indeed, you may learn some about css, but you only need to focus on few common html elements, for example, a, p, h1~4.
• Latex symbols and math formulas
  original:
  

u just need '\huge' or '\large' or '\Huge' command:

Hopefully, it is useful.

[mjbvz]

The next insiders build adds a new notebook.markup.fontSize setting which controls the size of rendered markdown

It defaults to 120% of your editor font size (so 12px editor font size == 14.4px). We may adjust the default value based on feedback