How to modify font size h1-h6 on website level

[Macinga]

Hi, i read over 10 answer on topic “font size” before this new topic, however, i can not find simple answer, how can i modify font size Paragraph with H1 to H6 on website level (ICON). Please, navigate me, thanks, Paul

[lely]

Hi Pavol,

By default on all stacks, header sizes are relative to the body content’s base font size you have set on Theme Options > Typography.

I can see you have set it up to 14px. Right now, your homepage is a blog page, and on icon stack, using Masonry layout, heading is set to be 175% of 14px. Different headline have different settings. Feel free to edit your based font size.

On cases you don’t want to follow this predefined font size, there is responsive text options which will also cause the font size of the headers to become bigger or smaller as you set. You may need to check your Responsive text settings and manage it in Settings > Responsive Text.

To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/6
http://demo.theme.co/integrity-1/shortcodes/responsive-text/3

Hope this helps.

[Macinga]

Hi Lely, thanks for fast answer, not simple answer not only me, but your colleges do not follow predefined font size too (look to demo post, they are use first headline H3 and not H1, H2, H3… just start with H3… that is solution for NEW blog, but not for a lots old importing post with correct Headings using…). Ok, i am looking for responsive text, but I can not find. I can not find “page settings”, look to other picture. Simple, I have only blog posts. btw your first link is Error 404. And second link do not understand pls just simple answer. Answer “not possible” is simple too.

[mldarshana]

Hi Paul,

You would need to use shortcode since it’s standard content with headlines. For example (http://demo.theme.co/integrity-1/shortcodes/custom-headline/). Also typography setting only works as fallback setting for classic headlines and texts. On the other hand, V2 elements has its own setting that you can configure separate from theme options typography.

To setup responsive text feature properly, please refer to the following video walk-through (https://www.youtube.com/watch?v=UXPhObp296c) and implement it accordingly.

Let us know if that helps.
Thanks!

[Macinga]

Hi Darshana, video is great for new page building. However i am looking solution for old posts. Thanks. Paul

[lely]

Hi Paul,

If you intend to change font size of headings on old post and doesn’t want to edit each post, another option aside from using responsive shortcode is custom CSS. Try adding the following CSS on Theme Options > Global CSS. This CSS will target headlines of single post only.

.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; 
}

Please adjust the values accordingly. To make those CSS more responsive, please check this guide.

[Macinga]

Hi Lely, thanks for simple and helpful answer. And great inspiration link too. Paul

[Prasant]

You are most welcome.