THIS FORUM IS DEPRECATED

It will be disabled at any point in the future. Please post your discussions to any of these alternative available channels:

* GitHub Discussions: https://github.com/Zettlr/Zettlr/discussions
* Zettlr Subreddit: https://www.reddit.com/r/Zettlr
* Discord: https://discord.gg/PcfS3DM9Xj

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!

Preview

Bordeaux Theme with my changes

Code

/* 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;
} 
Tagged:
Sign In or Register to comment.