How to change H1 & H2 appearance

Support
#1

I’d like to know how I can make H1 & H2 appear the same size & font in my blogs? I am not good with code so could you guide me through how to adjust this? I have tried simply adjusting font and size in the post editor but they appear differently when in preview mode despite being the same font and size in the editor.

#2

Hi,

There is currently no setting to set the font size globally.

You will need to do it using CSS

You can add the code below in Theme Options > CSS

/* blog page */
.blog h1 {
    font-size:30px;
}
.blog h2 {
   font-size:25px;
}

/* single post page */
.single-post h1 {
    font-size:30px;
}
.single-post h2 {
   font-size:25px;
}

Change the font sizes as you like.

Thanks

#3

Thank you very much.

#4

You’re welcome.

#5

Could you advise, what code do I need to do the same as above but for pages instead of posts?

#6

Hey @lauramoore1976,

For pages, you can add this:

 /* page */
.page  h1 {
    font-size:30px;
}
.page  h2 {
   font-size:25px;
}

Just note that, by using the CSS codes given here, you understand that you are setting a fixed value to your headlines thus making them non-responsive. Further custom development is required to achieve that and we could not continue on providing that because that is outside the scope of our support. Please see our Terms.

X does not have specific font size options for the different levels of headlines. It has predesigned percentage based sizes.

Because it uses a percentage unit, you can make it bigger or smaller by setting the Root Font Size in Theme Options > Typography. As you will see in there, the Root Font Size has a responsive setting (Stepped or Scaling). Once you’ve set it, all regular text in the theme including text in the Classic elements will be responsive while retaining symmetry.

Thanks.

#7

Thank you - when I attempt to do that in the typography it isn’t really working the way I want. The font space seems different in H1 to H2 so they look very different not just on font size but spacing and H2 appears bigger and better than H1. Could be that I dont understand how to do it properly but wasn’t sure it that was just the way it was?

#8

Hi There,
Thanks again for asking!

For spacing, you can use same line height for every heading.

Example CSS.

 /* page */
.page  h1 {
    line-height: 1.2;
}
.page  h2 {
   line-height: 1.2;
}

Hope this helps!

#9

Hey Laura,

Your description of the issue sounds like h1 and h2 are in different areas. For example, the Post Title’s font size is different than the h1 in the content though they are both h1s. Compare the screenshot I provided previously with this

It would be best that you understand how Typography setup works than having to code your way to your design.

It would also be best that you give us the URL of the page or post and screenshots of the differences you see so we can advise you on where it should be configured in the theme.

Thanks.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.