#3

I would suggest opening up developer tools and inspecting the CSS properties being used. In theory, you should be able to get the font rendering to be the same. I’ve had issues with line height, but that’s something different. In your screenshot, it does look like an issue with color and font-weight, both of which can be overridden.

If you do not know how to use developer tools, here’s a post that’s helpful https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css/133

#4

@3mbry0: there has been a further development to hide even more markdown, so the WYSIWYG feel is now almost perfect. Have a look at this comment by @Piotr. Now it looks really good.

#5

add this to your css to make editor’s mode font thicker

.cm-s-obsidian .CodeMirror-line * {
    -webkit-font-smoothing: auto;
}
4 Likes
#6

@Piotr: man, you’re magic.

2 Likes
#7

Y’all are magic. Much thanks! :sob::sob:

#8

@3mbry0: last but not least, if you disable the line numbers in the Obs settings, your WYSIWYG perception is as good as you’ll get it without the real thing, assuming you have implemente @Piotr’s code.

#9

@Piotr: is it possible to exclude headers from getting that thicker font?

#10

Yes, it’s possible

.cm-s-obsidian {
    -webkit-font-smoothing: auto;
}

.cm-s-obsidian .cm-header {
    -webkit-font-smoothing: antialiased;
}
3 Likes
#11

@Piotr: as usual, thank you !!

#12

@Piotr: there is still a difference. 1st, there is the fatter headers in Edit mode:

fat
fat764×76 4.84 KB

Then there is the “fattening” disabled, as per your last code snippet:

not-fat
not-fat764×76 5.29 KB

And this is what the same header looks like in Preview:

prev
prev718×76 5.34 KB

I checked the colours in Edit and Preview, they have the same rgb values. But the headers in Preview are thinner.

Can that be fixed?

#13

Looking at your css file, you have different font-weight for headers in edit and preview mode.
Change this

.cm-header-1,
 .markdown-preview-view h1 {
     font-weight: 450;
     color: rgb(123, 108, 214);
     /* was(115, 98, 205); */
 }

into this

.cm-s-obsidian .cm-header-1,
 .markdown-preview-view h1 {
     font-weight: 450;
     color: rgb(123, 108, 214);
     /* was(115, 98, 205); */
 }

and do the same for all lower headers too (simply add .cm-s-obsidian for each). Currently this header style is overwritten in edit mode by original Obsidian css with font-weight: 600.

And after that remove

.cm-s-obsidian .cm-header {
    -webkit-font-smoothing: antialiased;
}
#14

@Piotr: yes, that works. Thanks a lot !

#15

Zero experience working with font smoothing here.

Is it OS dependent?
Best for dark background?

#16

@Kiroro: I am on macOS and using a light theme.

1 Like
#17

I have access only to mac, but there are multiple options that gives me the same effect, you can try with -webkit-font-smoothing: initial; or -webkit-font-smoothing: unset; or -webkit-font-smoothing: subpixel-antialiased;

Another reason might with this being overwritten by other styles if your using some custom theme, so try also with -webkit-font-smoothing: auto !important;

1 Like
#18

None of the options worked on win10. So in certain extent confirmed the above but I am glad that it is beneficial for mac users.

#19

Is this working on win10 -webkit-text-stroke: 0.3px; ?

#20

Noticeably thicker, with !important. :+1:

Side track:
I was wondering if there is a way to thin down fonts (yes, going opposite), for a cleaner look. I repeated the above by lowering the px but had no luck.

#21

depends on which built-in weights your font has, you can try smaller values: font-weight: 500;
and 400, 300, 200, 100

1 Like
Clutter free edit mode
#22

Dears!

Without any doubt, I am lost in this css thingy :slight_smile:

What I would like to achieve is (using the light version of red graphite theme is: I want to increase the size of normal font from 16px to 18px. So that it is in this size in every single vault I have for every note, in edit or previe mode. This is just, because I am old and need bigger fonts to be able to read my own shit.

So guys pleas help me to understand in which css file I have to do the magic and where to store it. Currently, I am having a css file in every vault - is this the place to change values? Or is it somewhere else? In the root directory there is no css file, only in the vaults.

Thanks for your support guys!
Peter