Zettlr should follow the system interface font

[tannenfreund87]

Description

Before I clutter this report: #4856 (comment)

Zettlr aims to follow the system UI as close as possible, so the app looks native on Mac, Windows, or Linux. The solution is easy on Mac and Windows, as users can't change the system font any more. The current font stack in Zettlr looks like this:

Zettlr/source/common/vue/window/assets/generic.less

Line 16 in 53a18fe

// Generic styles that apply to all platforms

// Generic styles that apply to all platforms
body {
  label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

And like this:

Zettlr/source/common/vue/window/WindowChrome.vue

Line 264 in 53a18fe

body {

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif;

This approach falls apart on the Linux platform. I have Segoe UI installed, so the above font stack gives me "Segoe UI" in some parts of the interface, like Menus or parts of the settings window. "Liberation Sans" (a metric compatible replacement for Helvetica and Arial) in other parts of the interface, like sidenotes, or parts of the settings window. Even, after uninstalling "Segoe UI", I get my interface in a mix of "Roboto" and "Liberation Sans" instead of "Noto Sans", the default interface font on KDE.

I propose to switch to the CSS property font-family: system-ui, if the text is meant to represent a user interface and font-family: sans-serif if the text is meant to represent a body of text. font-family: system-ui is implemented in chromium since a few years, and because of that, also in Electron:
https://chromestatus.com/feature/5640395337760768

It should give the user "SF Pro Text" (UI) and "Helvetica" (body text) on Mac, "Segoe UI" (UI) and "Arial" (body text) on Windows and whatever the distributor or user has set on Linux. Usually "Ubuntu", "Noto Sans" and "Cantarell" for the UI and "Liberation Sans" or "Nimbus Sans" for body text. "Oxygen", as specified in the current font stack, for example hasn't been used by KDE since over 10 years.

If users see some pixelated, blurry or otherwise unreadable font, it's their own fault for setting something strange. It's not in the scope of Zettlr to fix the user's settings.

Reproducing

• Be on Linux platform
• Open Zettlr
• Zettlrs interface looks different from the rest of your desktop

Zettlr Version

Stable (most recent version)

Specify version

3.0.5

Installation Method

From the Website or GitHub

Your Platform

• Windows
• macOS
• Linux

Architecture

• Intel 64bit
• ARM 64bit

Operating System Version

Operating System: openSUSE Tumbleweed 20240427 KDE Plasma Version: 6.0.4 KDE Frameworks Version: 6.1.0 Qt Version: 6.7.0 Kernel Version: 6.8.6-1-default (64-bit) Graphics Platform: X11 Processors: 8 × AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx Memory: 13.5 GiB of RAM Graphics Processor: AMD Radeon Vega 8

Additional Information

No response

[boring-cyborg]

Thanks so much for opening up your first issue here on the repository! 🎉
We would like to warmly welcome you to the community behind the app! ☺️
We'll check in soon and have a look at your issue. In the meantime, you can
check your issue and make sure it aligns with our contribution guidelines!
Here's the comprehensive list:

NOTE: Please do not share screen captures of buggy behavior on YouTube.
If you have uploaded a video on YouTube and linked it already, don't
worry! But, we would like to ask you to remove the video from YouTube
and upload it directly to GitHub instead, by editing your comment.
Read more here.

Enhancements

An enhancement takes a feature and improves or alters its behaviour. Please
make sure to argue how your proposition will aid non-technical text workers,
and why it can't be emulated easily with other features or apps!

Feature requests

Feature requests introduce whole new features into the app. This requires a
lot of work, so these might be turned down if the implementation costs
supersede the benefits we expect to see from implementing it. Please do not
be disappointed if that happens. It likely has nothing to do with your great
request but simply with us and our missing resources!

You can of course always ask someone to implement this feature, because a PR
with a working new feature has much higher chances of being merged! :)

Bug reports

Please note that one of the main reasons for why bug reports cannot be
addressed is that there's not enough information for us to find and fix the
bug you describe, so make sure you try to pinpoint the bug as close as
possible.

The ideal bug report for us has two qualities:

1. The bug is always reproducible, at least within a certain context.
2. We know exactly what specifically goes wrong, and there is consensus on
   what should happen instead.

Please note that if you encounter behaviour that does not align with your
expectations of what would happen, this might as well be simply intended
behaviour and we need to simply clarify why the behaviour is the way it is.
This is not to be considered a bug and such issues may be closed! Suggest an
enhancement instead!

But now, have a great day and thank you again!

[tannenfreund87]

You decided against font-family: system-ui according to the reasons laid out in that line:

Zettlr/source/common/less/fonts.less

Line 22 in 452c7be

// we should not use it ever: https://infinnie.github.io/blog/2017/systemui.html

The advice in the blogpost is obsolete. The problem with pixelated system fonts was only ever a problem on Windows. And not current versions of Windows, but XP, and Vista and 7 in "Classic Mode". I don't know if current versions of Zettlr even run on Windows 7 and XP. Whoever is running these outdated versions of Windows has bigger issues then pixelated fonts.

From https://infinnie.github.io/blog/2017/systemui.html:

For example, on Windows 8.1/Windows 10 in Simplified Chinese, the system-ui font family evaluates to Microsoft YaHei UI, which, it turns out, not only lacks many font weights that Segoe UI has (say semibold), but has letters and numbers a little larger and bolder to match the Chinese text than what could have been designed with

This is exactly the expected and wanted behaviour! We want Zettlr to display the UI in the system font! Even if it doesn't have a "semibold", because the rest of the UI also doesn't have.

[nathanlesage]

Huh, interesting -- that's how old that line is. Definitely worth reconsidering, yes.

[nathanlesage]

Just tried system-ui out on macOS, and as expected did it change nothing (since apple-system is already equivalent on macOS). I would be interested in seeing some screenshots before/after with custom CSS from Windows and various Linux distributions before fully committing to this. Ideally using the most recent beta, since nothing will change until the next release.

[tannenfreund87]

I modified the CSS as minimally as possible. I haven't checked all menus or windows or settings. This is on Windows, I will check Linux later:

body {
  font-family: system-ui, sans-serif;
}

body div.application-menu {
  font-family: system-ui, sans-serif;
  font-size: 9pt;
}


body .main-editor-wrapper .cm-content{
  font-family: sans-serif;
}

This is how the modified interface looks like: All menus, menubar, sidebars are in the system-user-interface-font, in this case "Segoe UI". The main editor in the systems sans-serif font, in this case "Arial". I reduced the size of the menu font to 9pt, which is the standard on Windows since Vista (Aero), Windows Classic uses Tahoma 8 pt. Windows Classic is not available anymore without hacks since Windows 8:

Compare to the current, unmodified interface:

In the unmodified interface, on Windows, we have a mix of Segoe UI and Arial. The menu is in Segoe UI, albeit slightly too large, the menubar, the sidebars, the word counter are in Arial, which is not meant for the user interface.

Other apps, like Zotero, use "Segoe UI" for all of their interface:

So do okular (Qt6-based):

And notepad (native win32 app, notice the incomplete high-dpi scaling):

This is all on Windows 10, I don't have Windows 11 to test. Windows 11 switched to "Segoe UI Variable" at some point, but I don't know, how this is exposed to browsers or Electron.