Make all headings same size as lvl4 heading

I like the default theme of obsidian, however the heading sizes are way too big (both in edit mode and preview mode). I mostly used headings for outlines and links, so I don’t actually need them to look huge.

Is there any way to just make them all the same size as level-4 heading?

Much appreciated.

1 Like

Isn’t that CSS?

Hey, I changed mine by changing heading font size in obsidian.css, I can send you a message if you need help figuring out how to do it.

1 Like

Yeah, I was kind of hoping someone would give me the css (since I’m too lazy to figure it out).

1 Like

I’ll take that, too, please! I’m not positive how to target it in both dark and light modes (if they’re different) and in preview mode …

1 Like

since it may vary from theme to theme. I created a variation of my own theme with all headings same size as the rest of the text.

If anyone is interested in this version of my theme feel free to shoot me a message to https://santiyounger.com/contact/

Here’s what the theme looks like with all headings same size

@briansholis it also works on light mode and preview mode

Thanks! I found it myself at just about the same time. I appreciate you following up, @santi.

1 Like

Here is the CSS that should work across themes apart from Header 6 in preview which I can’t work out how to disable the colour change.

.markdown-preview-view h1 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h2 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h3 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h4 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h5 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h6 {
    font-size: 20px;
    line-height: 24px;
    color: --text-normal;
}

.cm-header-1 {
    font-size: 16pt;
}

.cm-header-2 {
    font-size: 16pt;
}

.cm-header-3 {
    font-size: 16pt;
}

.cm-header-4 {
    font-size: 16pt;
}

.cm-header-5 {
    font-size: 16pt;
}

.cm-header-6 {
    font-size: 16pt;
    color: --text-normal;
}
2 Likes

thanks for that @NotBoolean , it’s much cleaner that how I was dealing with it for my theme!

A bit of a side note, I can see from your screenshot that you managed to modify the original obsidian.css

I was stuck unable to access the default obsidian code

Where to find the original/default obsidian.css?

Let me know if you can copy your full obsidan.css it would help a lot!
Thanks

Everything you put in the obsidian.css will modify the default theme. So I don’t have access to the orignal css. I can view it to work out what’s going on using the techniques described in the Getting comfortable with Obsidian CSS post.

So if you put the code I posted above in a blank obsidian.css you will get what you see in my screenshots (bar a few extra css mods have that you can find on here).

Hope that helps.

1 Like

got you, that makes sense! thanks for clearing that up helps a lot

Thank you very much, it is soo much better now.

1 Like

Is there a way (or CSS code) to reduce all Headers size by a lot? I must start with h5 as the start right now because the h1 is so huge. I don’t know why the default setting must be like that