How to set font-size for heading level 1 - 4

#1

Hello forum,

where can I change the font-size of h1, h2, h3, h4?

grafik
grafik912×522 18.5 KB

h3 is too small for me; h4 size looks like normal text…

These are my settings (theme tweaks) in theme ‘vanilla’ v 5.2.0:

grafik
grafik1221×289 18.6 KB

Thanks in advance.
Stefan

#2 
h3 {
 font-size:16px !important;
/* or font-size: 110% !important; */
/* or font-size: 1.2em !important; */
}

Have a play around until you find what you want.

#3

This has being discussed recently Typography: Headings in Tiddlywiki Vanilla and @pmario has a solution to “rebase heading’s”.

1 Like
#4

Create a tiddler eg: my-heading-styles
tag it: $:/tags/Stylesheet

and add some CSS definitions like this:

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

and so on. The default font-size of h1 is 2em;

H1 is the only heading that is changed by the TW vanilla style-sheet. All the other settings are browser default.

#5

There is absolutely no need to use !important … It’s not needed here and it is rarely needed at all. It should be avoided at all cost!

2 Likes
#6

There is more info about CSS units at: <length> - CSS: Cascading Style Sheets | MDN where you can lookup em, rem … and so on

#7

I didn’t expect to have to get into the weeds over this…

I wouldn’t know how to apply a metric to that claim.

Today, perhaps. However, the OP expressed a need to take control of the setting. A setting that is global in nature – the one case I believe where a global approach is valid.

Furthermore, the OP is not in control of TWs core CSS as it evolves. One of the intentions behind !important is to provide such.

That statement is better stated: “It should and can be avoided in most cases.”

!important is a dead end – that much is true. There’s no way back, so to speak. But until css rule nesting is fully adopted (it’s coming!) it’s the only choice in some circumstances, usually when addressing global and large grained values (e.g. HTML elements or those with #IDs) in third party code.

Just like there was nothing wrong with goto, there’s nothing wrong with !important, only in how it is used and misused.

And it’s okay if you disagree – at least now we both know how the other “thinks” :neutral_face:

#8

Thanks for feedback to @pmario and @CodaCoder.
I decided to implement the solution from @pmario. :+1:

#9

As I understand it !important may make sense when you want to force something to fix something broken, in production, in a hurry, but since it effectively breaks the fundamental concept of “cascading” it is likely to itself cause problems in the future. Best avoided, and used temporarily at most.

1 Like