[ UI Enhance ] Choose a more suitable font for the view

TeemuKoivisto / prosemirror-dev-toolkit

Injectable developer tools for ProseMirror rich-text editors implemented in Svelte and TypeScript.

https://teemukoivisto.github.io/prosemirror-dev-toolkit/

MIT License

117 stars 6 forks source link

[ UI Enhance ] Choose a more suitable font for the view #57

Open ShenQingchuan opened 1 year ago

ShenQingchuan commented 1 year ago

First of all, thank you for the amazing plugin! It's pretty useful and awesome!

As a multi-device user, I used to have a Windows PC. Now, I have a MacBook for daily work and an Ubuntu Linux PC for my side projects. However, I have noticed that the font rendering of this DevTool isn't quite well while developing.

Maybe we can choose FiraCode, JetBrains Mono... etc ? Monospaced fonts can effectively enhance the appearance of a webpage, especially we're displaying many editor states and data ... You can take the style of Chrome DevTools as a reference.

ShenQingchuan commented 1 year ago

These kinds of tree / list view is monospaced font :

which is a screenshot from Chrome DevTool. I guess it might be: Monaco or Menlo.

I think even if we only use the default monospaced fonts of each operating system, the effect will be very good. However, personally I really don't like the bottom fallback font monospace.

Windows: Consolas
Mac: Monaco or Menlo
Ubuntu and any other Linux has their own default monospaced font based on its DE(desktop enviorment).

TeemuKoivisto commented 1 year ago

Hey @ShenQingchuan and thanks!

I'm all up for it, never was a particular fan of the font 🙂. Not so straightforward always to change these as the defaults, as you said, can look quite a bit different. I'll try out some of the system fonts you've listed and see if they suffice or do I have to import a font.