#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

#23

@nathschlaegeryou cannot have 1 css file for all your vaults, you nedd 1 for each vault. So, you’ll have to adjust the font in each css file.

#24

Hi!

Thanks for your response. I did that. My folder structure is like \Obsidian\vault1. I have sic vaults (working on re-arranging that and copied the obsidian.css into every vault and changed the font-size from 16px to 18px. Obsidian does not care about that.

I strongly assume this has something to do with settings which I might have not fully understood by now :slight_smile:
Thanks,
Peter

#25

@nathschlaeger: in Settings, tab Appearance, have you enabled Custom CSS?