#2

@3mbry0: there will always be a slight difference between the Edit and Preview modes, even if you use identical font families, which you do.

Remember that it is not possible to create an exact WYSIWYG set-up.

Another thing is that if you open your CSS in an editor, then search for “font” you might find the slight adjustments, although I am not sure if you’re not looking for the non-existent.

#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