We are currently planning to migrate to a different platform for the forum. We will announce this fact both here and on Twitter, once we have settled on a solution.

Typography customisation for default themes (→select a different font)

As a typography nerd, I wanted to change the look of the text that I am staring at for long hours and, after watching the great zettlr UI-customization tutorial, came up with the following improvements:

  • The width of the text column is now limited to 800px of your screen. This helps not to lose your line when reading what you wrote on a wide screen.
  • The formatting symbols of headings (#) are rendered as small, so they don't distract once they are there.
  • Three font-families are defined as global variables:
  1. a title font
  2. a body font
  3. a monospace font for code

I personally chose IBM Plex Sans as my well-readable body font and the related IBM Plex Mono as the title and monospace font. You can either download and install these or you can also choose a font that is already on your system. Just replace the 'font name' in the --body-font, --title-font and --mono-font variables with the one you want (spelt exactly the way it is previewed in Office, for instance).

Hope this is useful for someone else!


Bordeaux Theme with my changes


/* define your body, title and monospace font here*/
:root {
 --body-font: 'IBM Plex Sans', sans-serif;
 --title-font: 'IBM Plex Mono', monospace;
 --mono-font: 'IBM Plex Mono', monospace;
/* Fonts */
body #editor .CodeMirror, body #editor .modal .dialog .code, body #editor .CodeMirror .cm-comment, body #editor .CodeMirror .cm-fenced-code, body #editor .CodeMirror .cm-formatting-task, body #editor .CodeMirror .cm-formatting-code-block, body #editor .CodeMirror .cm-formatting-list-ol, body #editor .CodeMirror .cm-formatting-list-ul, body #editor .popup .search input.regexp {
    font-family: var(--body-font);
.cm-header {
    font-family: var(--title-font);
.CodeMirror, body #editor .CodeMirror .cm-fenced-code {
    font-family: var(--mono-font);
/* ----- */
/* make heading hashtags (## h2) smaller */
.cm-formatting-header {
    font-size: small;
    font-family: var(--title-font);
/* limit the text column width to a maximum */
.CodeMirror-sizer {
    max-width: 800px;
Sign In or Register to comment.