Shrink size of Headings on template

Support
#1

I’ve used X and Pro for years. My #1 complaint is that the headings are too large relative to the body text, and that the default body text size in the templates is too small. So I usually increase the size of the fonts using the Content Font Size control in the Typography panel. ( I like about 1.3 EM or REM for body fonts.)

But this zooms up the heading font H1 etc way too large. This looks especially bad on mobile devices. Frankly, I’d like the size of Heading 1 to be the size of Heading 3 and go down from there.

Is there a way to adjust the heading sizes universally in the theme to make them smaller? I’ve never found a control for that.

#2

Hi John,

Thank you for writing in, yes, the headlines (h1 - h6) default font-size can be adjusted, please add this to Theme Options > CSS

h1, .h1 {
  font-size: 150%;
}

h2, .h2 {
  font-size: 130%;
}

h3, .h3 {
  font-size: 110%;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  font-size: 100%;
}

Feel free to adjust those values as you see fits.

Cheers!

#3

Thank you, this solves my problem and gives me the control I need with headings.

#4

You’re always welcome John!

Cheers.

#5

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