Hello everyone,
Please can you tell me how (or if) I can change the font size within the H1 and H2 headers. When I use it, the default font size is too large and it makes the page design unbalanced. Could some one just give me a bit of advice on this please?
if you are using a Styles Page in Classic you can change the classes from the menu below.
You can also do it manually with the code
<h1>text</h1>
<h2>text</h2>...
Note: classes size depends on the theme you are using, check the theme options.
Thanks so much for replying to my question. Unfortunately, I don’t have that settings page available to me on my theme. I had a mooch on the forum and found an old post from @teefer where he had written some CSS for someone. I’ve played with that and I think it’s worked ok. 
what theme are you using on classic?
with CSS you can do something.
also a link to the site would be helpful.
Hi,
Thanks for getting back to me.
Here’s my website..
The CSS code I ‘made’ works ok for my laptop and iMac, but it’s a bit big on my phone, is there a work around do you think…?
Here’s the code that I’m using
h2 {
font-size: 1.40rem;
font-weight: 600;
}
h1 {
font-size: 3.0rem;
font-weight: 800;
}
The theme is called ‘Artful’.
Thanks for your input, D 
Artfull classes:
/*Artful classes*/
h1, h2, h3, h4, h5, h6 {
margin-bottom: .5rem;
font-family: Oswald;
font-weight: 700;
line-height: 1.3;
color: inherit
}
.h3, h3 {font-size: 2rem}
.h4, h4 {font-size: 1.25rem}
.h5, .h6, h5, h6 {font-size: 1rem}
Paste this code ( or only h1 ) in setting/code/css to edit all pages and change the h1 font size.
Thanks so much for your swift reply.
I think I’m being a bit stupid…
When I put that code in to the CSS area, the H1 and H2 text became huge.
In the code that I added from @teefer post that I found, I was happy with the font size on the laptop and the imac. Sadly the type is too big for the phone screen. Should the code that you kindly provided for me (I don’t know code, sorry) allow me to have the facility to have the H1 be 3.0rem on large screens but then reduce on phones, or is that not a possiblity…? Thanks, D
h2 { font-size: 1.40rem; font-weight: 600; } h1 { font-size: 3.0rem; font-weight: 800; }
Use the code below and edit the font size. you can also edit the breakpoint value.
CSS Media Queries based on the screen width
/* ipad portrait */
@media only screen and (max-width: 768px) {
h2 { font-size: 1.40rem; font-weight: 600; } h1 { font-size: 3.0rem; font-weight: 800; }
}
/* mobile */
@media only screen and (max-width: 500px) {
h2 { font-size: 1.20rem; font-weight: 600; } h1 { font-size: 2.0rem; font-weight: 800; }
}
That’s perfect - thank you so much!
Just a little bit of extra help from anyone having the same issues as me…
@willwood sent me this message which looks to solve the Heading resizing issues in a very slick way for different sized screens.
—————
You could experiment with some alternative units of measurement for the font sizes, instead of rems.
.h3, h3 {font-size: 1.5vw}
.h4, h4 {font-size: 1.25vw}
.h5, .h6, h5, h6 {font-size: 1vw}
vw = viewport width. 1vw is equivalent to 1% of the screen width. So it gives you some nice proportional font scaling for different screen widths.
Some people prefer vh instead (viewport height).
There are two called vmin and vmax, which take account of the minimum or maximum size of the screen.
Some more information can be read about them all here: CSS Viewport Units: vh, vw, vmin, and vmax — SitePoint
I should also mention there is also something called clamp() where you can set the minimum, desired and maximum size of fonts. It is a very powerful way to do font sizing, although it might be overkill for what you need to do here. So I’ll hold-off explaining that one. The ones above are likely to be suffice for what you want to do and are relatively easy to experiment with.