react-client
react-client copied to clipboard
hedgedoc
Adapt font size and line height in code editor
Which part of the project should be enhanced? The typography of the code editor.
Is your enhancement request related to a problem? Please describe. The quotient of font size and line spacing is close to one which makes it harder to follow a line and strains the eyes. I propose to decrease the font size and increase the line spacing. For example, GitHub uses a 12px font with a 20px line height. According to this typography guide a quotient of 120% to 145% is recommended. I think for monospace fonts this quotient should even be a little higher than that. At least for GitHub it is nearly 170%.
Note that I don't propose that the font size should be configurable, since it can be adjusted by browser zoom quite well.
Describe the solution you'd like Adapt the font settings to have a better proportion of font height and line height.
Describe alternatives you've considered Both settings could be configurable. Still, I propose to adapt the default.
Additional context Here is the current default:
Here are the GitHub settings with 12px font height and 20px line height:
I don't propose these particular settings. It is just an example to show the difference. To see the effect, try to read the text quickly in both.
Just to add my personal preference. I think that 14px font size and 22px line height look very good. Font-wise I would like to propose a conservative choice like Consolas or Windows, SF Mono on Mac and monospace otherwise. I think that no webfont should be used when it does not add to the overall readability to save bandwidth and reduce loading time.
We already agreed that the new frontend will use Fira Code because of it's readability and ligature support .
The ligatures are helpful in my opinion and I also find the Fira Code very readable.
Here is the ui-test example with 14px font size, 22px line height and without the strange letter-spacing settings 😍
