Changing the size of h1, h2 etc. in blogpost

[wonderacademie]

h1 is too big right now, how/where do i make it smaller?
is that something that can be edited in customizer or does it has to be done in css part?
txs

[Prasant]

Hello @wonderacademie,

Thanks for writing in!

Please take a look at the solution shared in following threads:

Change font sizes

How to modify font size h1-h6 on website level

Thanks.

[wonderacademie]

thank you. but i dont have pro, i have X. And that part is missing after the … in the first copy.
and i would like it to be responsive of course and not just for one post but for all. Did i maybe miss the answer?

[friech]

Hi @wonderacademie,

Theme Options is available on both X and PRO, so it does not matter which theme you’re on.

Headlines (h1 to h6) have a percentage base size by default, h1 has 400% this is why h1 are huge by default, this percentage will be base of the parent div font size, if the parent div has no font-size the inheritance continues to take place this way amongst ancestors up until the root font size. Root Font Size can be set under Theme Options > Typography, but this is not the solution that you’re looking for since this will affect the headlines and body copy sitewide.

If you only want to adjust the font-size on the blog posts, please add this to Theme Options > CSS

.single-post h1 {
    font-size: 40px; 
}
.single-post h2 {
    font-size: 35px; 
}
.single-post h3 {
    font-size: 30px; 
}
.single-post h4 {
    font-size: 25px; 
}
.single-post h5 {
    font-size: 20px; 
}
.single-post h6 {
    font-size: 18px; 
}

Feel free to adjust those values as you see fits.

Hope it helps,
Cheers!

[wonderacademie]

@friech

.single-post h1 {
font-size: 40px;
}
.single-post h2 {
font-size: 35px;
}
.single-post h3 {
font-size: 30px;
}
.single-post h4 {
font-size: 25px;
}
.single-post h5 {
font-size: 20px;
}
.single-post h6 {
font-size: 18px;
}

Thanks! That does the trick. Wonderful.

2 additional questions:

1. am i right that this is the h1 that is advised to use because google gives these more “value” that eg h4? (in which case it might be wise to go through the rest of the blogs and change my h4’s to h1’w. i only went to h4 to avoid those HUGE fonts on my site.
2. what is the css code for giving a bit more space between the headline and the standard text?

[Prasant]

Hello @wonderacademie,

Thanks for updating the thread.

@wonderacademie

1. am i right that this is the h1 that is advised to use because google gives these more “value” that eg h4? (in which case it might be wise to go through the rest of the blogs and change my h4’s to h1’w. i only went to h4 to avoid those HUGE fonts on my site.

Yes, H1 is the tag that search engines uses as search ranking signal. For more information please take a look at following resources:

https://www.searchenginejournal.com/how-important-is-h1-tag-for-seo/261547/

@wonderacademie

2. what is the css code for giving a bit more space between the headline and the standard text?

Please add following CSS under X > Theme Options > CSS:

.single-post h1, .single-post h2, .single-post h3, .single-post h4, .single-post h5, .single-post h6 {
    margin-bottom: 20px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.