Setting to reduce huge h1 heading font size

[redhorse]

Use case or problem

The font size of h1 is huge. This takes too much screen space and is ugly. Having to type three or more # to get a decent looking font size is annoying.

Proposed solution

Please implement a setting to set the font sizes of the headings. Please make sure to also change the size in the editing preview.

Current workaround

Maybe with a CSS file, but at least for the preview I failed.

[rigmarole]

For the moment, I’m moving this to Help. There is already the possibility to resize any element with CSS.

But in the meantime, can you show a screenshot by what you mean by huge and ugly, to eliminate the possibility that this is a theme glitch in the recent version upgrade?

What theme are you using? Do you have any CSS snippets enabled?

[Olondre]

You can use this CSS Snippet for that:

/* << ------------------ Reading View ------------------ >> */
	.markdown-preview-view h1 {
		font-size: 18px !important;
	}

/* << ------------ Source View / Live Preview ------------ >> */
	.cm-s-obsidian .cm-header.cm-header-1 {
		font-size: 18px !important;
	}

If you want to change the font-size of any subsequent header simply copy the css and change the h1 to h2 and so on. Same with .cm-header-1.

[pmbauer]

Pending OP’s screenshot, it’s much more portable and simpler to use the new css vars. This avoids having to make multiple selectors for live preview and reading view. Also !important should be avoided and prefer em over px

This snippet is taken from app.css and the numbers can be tweaked as needed.

body {
  --h1-size: 2em;
  --h2-size: 1.6em;
  --h3-size: 1.37em;
  --h4-size: 1.25em;
  --h5-size: 1.12em;
  --h6-size: 1.12em;
}

[redhorse]

Hi! Thanks for your answers!

Well, I guess “huge and ugly” is quite subjective. I am talking about this:

My guess is that quite a lot of users find this unnecessary large. Thank you very much for the app.css-snippet. But also IMHO having to work with code to change this will keep the majority of the users from changing this.

[redhorse]

I would propose a slider in the settings, which would increase or decrease the size of all headings compared to normal text by a percentage.

This is especially relevant on mobile with very limited screen space.

[redhorse]

For others who want this:
You need: Add custom styles - Obsidian Help

My preferred size is the following. I find this makes a big difference on mobile.

body {
  --h1-size: 1.50em;
  --h2-size: 1.30em;
  --h3-size: 1.20em;
  --h4-size: 1.12em;
  --h5-size: 1.12em;
  --h6-size: 1.12em;
}

[pmbauer]

If you don’t want your proposal to get lost, you might consider creating a feature request.

There are literally hundreds of vars like this in app css and which ones deserve UI widgets in appearance is pretty subjective though.

There are alternative themes and many use the style settings plugin to customize some of these variables with a UI.

[anon63144152]

I have looked through the app.css file and used the developer tools to select items but I just can’t figure out how to add spacing above and below all headers in both editing and reading modes.

Padding or a margin of about 0.75 em would be perfect. Anyone know how to achieve this in v1.0 of Obsidian?