Managing Font Size Typograph

[lorenhoboy]

In the templates we have Headers and Text boxes.

1)Globally we can select Inherited, Body Copy, Heading. What are these; what do they impact, how are their values set by the underlying theme code?. How should they be used?

2)Please explain the relationship between H1, H2, H3, H4, H5, H6 in the templates and and the font sizes we Globally set for XS, SM, MD,LG, XL. Which is which? They were all set at 14px. What should they be set at?

3)Which of these sizes controls the Page Title (HOME) font?

As of now, the templates seem to have the Header boxes with H1 at some small font like 12px or 14px. So to get a reasonable Header font size one is forced to change from 1EM to 2EM on every page. I assume there is a better way to change H1, and the other globally. How is that done?

4. REM is initially set at 1.0. I assume this setting will control the size (Headers and Content Text) of everything once I get the relative size of the 6 Headers and text set.

5. Where do I learn at what point the Stepped changes occur and by how much as screen sizes change.

I did read Pro 1.10 but remain confused as to these relationships.

[lorenhoboy]

I f switching the entire website to REM . What are the recommended setups.

[christopher]

Hi Loren,

I’d suggest that you keep the questions on separate threads to help us be able to give a better service.

1, 2) Please enable the Font Manager in the Theme Options Typography section, and read this article.

3. You can use the Element Defaults to make for example the Headline element default font size something that is suitable for your design. To do that, please add a headline element (Or whatever element that you want to set a default feature), change the options of that element to suit your design. Create a template out of that element following these steps. Then go to X/Pro > Templates and click the Settings icon at the bottom left side, that will show the Element Default modal which you can assign your newly added template to the element in question:

4. Yes, that will be the base size for all theme generated typography items. It will not affect the elements typography inside the Page Builder. I already mentioned about the element defaults in the previous step.

5. The stepped way is using the standard threshold of the theme. Please go to a page using the Page Builder and click the responsive icon at the left-hand side and you will see the screen sizes that the stepped option use:

Thank you.