Typography Customization

[dbrinda]

I don’t get how the new typography section of the customizer works. On my site, the headline is way too big and the body text is too small, but I can’t figure out how to adjust it.

The stepped vs. scaling is confusing…and adjustments to the sm, sx, md, lg, etc. don’t seem to be making any changes to the font sizing. The content size field adjusts everything proportionally but I don’t see how to adjust headline and body independently. There are controls within the heading section is for weight and space…no control of size like old customizer.

Is there a tutorial on how to use these new typography controls?

// Update, I found this CSS to customize the relative sizing of H1, H2, etc:

h1, .h1 {font-size: 300% !important;}
h2, .h2 {font-size: 250% !important;}
h3, .h3 {font-size: 200% !important;}
h4, .h4 {font-size: 150% !important;}
h5, .h5 {font-size: 100% !important;}
h6, .h6 {font-size: 100% !important;}

This seems to be working, but is there a way to specify that blog post titles use H2 size instead of H1?

[jade]

Hi there,

Please try this code:

.single-post h1.entry-title {font-size: 250% !important; }

Hope this helps.

[dbrinda]

Nope, not doing anything to adjust size.

[friech]

Hi Dave,

Please read this post how on you can make your text/headline responsive. I advise the 2nd approach which utilizes Root Font Size (Theme Options > Typography)

Regarding this:

@dbrinda

is there a way to specify that blog post titles use H2 size instead of

The custom CSS provided by Jade should work, please adjust the 250% value where you see it fits. If it does not work still, please provide us the direct link URL of the post where we can see the title that you’re referring to, there might be another styling that is applied to it.

And please avoid this as possible, this could cause complication to your headline font-size styling.

h1, .h1 {font-size: 300% !important;}
h2, .h2 {font-size: 250% !important;}
h3, .h3 {font-size: 200% !important;}
h4, .h4 {font-size: 150% !important;}
h5, .h5 {font-size: 100% !important;}
h6, .h6 {font-size: 100% !important;}

Thanks,

[dbrinda]

I removed that block of CSS and tried the code for Jade, but nothing happens. I changed the 250% to different values but nothing on the page is changing size.

I read the article but still don’t understand how the base fonts work. I change the values in the Customizer > Typography > Font Sizes, but nothing changes on the page. Where do you input the REM values to adjust the different sizes?

[friech]

Hi Dave,

Please provide us the link to you the site so we can take a closer look, there might be something that is overwriting the font-size of it. You can place it on a secure note if you don’t want to post it in public.

.First set your Root Font Size as Stepped and on px unit

Then on the elements with a text font-size option, set it to em unit.

So it will be calculated as:

On an extra large and large screen, you set the Root Font Size to 16px, and the text element font-size is 1.25em, that is:

16px * 1.25em = 20px your text font-size on desktop

On extra small and small screen you set the Root Font Size to 12px, so that is:

12px * 1.25em = 15px your text font-size on mobile

On other element (like Headline), you’ll see a Base Font option (that is because these elements have a couple of font-size option on it), just keep it to 1em.

Hope it helps,
Cheers!

[ruenel]

Hello There,

The default css codes will likely to apply for normal heading tags and the classic headline element. If you are using the v2 headline element, the css codes will not be followed because v2 headline element has its own default setting, the base font and font size. When using v2 headline element, you must see to it that you have set the right font for your page.

Base Font:

Font Size:

Hope this explains it briefly.

[dbrinda]

This is making sense, thanks!

I noticed the code from Jade actually IS working but only on the post detail page. I was trying to adjust the size on the blog list view. I assume I just add another copy of that code to target the heading on the list view?

Is there a tutorial on how to target specific elements on a page?

Thanks for your help!

[ruenel]

Hello There,

Jade’s code is specific for the single blog title heading. If you want to apply something like that in a specific page, you can may use any of these class-selector; .page, .single-post, .postid-123 or .page-id-123. For example:

.{class-selector} h1.entry-title {
   font-size: 250% !important; 
}

.page -> for all the pages
.single-post -> for all single blog posts
.postid-123 -> for specific single blog post
.page-id-123 -> for specific page

Simply change the 123 with the correct ID of the page or posts. To know where to get the ID, please check this out: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps.