How to reduce the font size of H1, H2, H3

Illdy
1

How to reduce the font size of H1, H2, H3. And also manage space one size got reduce.

because previously I have reduced the size of H1 by adding below CSS code, but it has created big gap between heading and blog starting.

/Blog Header Size/
.blog-post-entry.markup-format h1 span {
font-size: 56px !important;
}

Then to reduce the gap I have added below CSS code but not working properly. (see attached highlighted in red colour)

/Reduce title gap/
.blog-post-entry.markup-format h2 {
padding: 0px 0px !important;
}

below is the link of my website post.

Kindly help me with proper reducing H1, H2, H3 font size.

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the font size and fix the gap by going to Appearance > Customize > Additional CSS and pasting it there.

You already have the font size CSS.


/*Gap issue*/
.blog-post-entry.markup-format h1 {
    margin: 0px 0px;
    height: 54px;
}

.blog-post-entry.markup-format h1 span {
    font-size: 31px !important;
}

.blog-post-entry.markup-format h2 span {
    font-size: 36px !important;
}

h3 {
    font-size: 17px;
}

Best Regards,
Support

3

Thanks for your reply on this,

could you also tell me the same about page? As above code is for post I want to reduce the size of page as well.

4

I have used this site got crashed…

/Gap issue/
.blog-post-entry.markup-format h1 {
margin: 0px 0px;
height: 54px;
}

.blog-post-entry.markup-format h1 span {
font-size: 31px !important;
}

.blog-post-entry.markup-format h2 span {
font-size: 36px !important;
}

h3 {
font-size: 17px;
}

5

see this link

6

What you mean in the site is crashed? i checked it and it works normally,
CSS code cannot break any site :slight_smile:

try this code is above codes doesn’t work
.blog-post-entry h1 span {
font-size: 35px !important;
}

Also, please clear cache after adding your codes

7

I want to reduce the entire site’s H1, H2, H3 fonts.

How to do that? (For pages as well as post)

8

Hi,

Please add this Custom CSS in Appearance -> Customize -> Additional CSS,

h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 30px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}

These are the built-in sizes, you can customize it according to your needs. This is for the heading tags from h1 to h6 that you used inside the page or post content only, other h1 to h6 won’t get affected by this, each of them need to target separately.

I suggest you to follow this tutorial and adjust the size according to your needs, Examine and edit CSS - Firefox Developer Tools | MDN then put the CSS in Appearance -> Customize -> Custom CSS.

Let us know,

Thanks,
laranz.

9

I have pasted this above CS code now see the attachment. It has created huge gap between two lines as highlighted in red line.

below is the link

10

Hello there,

That CSS would not cause a gap to happen.

Please try using this code to reduce the gap:


h1 {
    line-height: 60px;
}

Best Regards,
Support