[Resolved] Unexpected rendering of font size using rem and dynamic typography

[Ben]

Hello,
site: https://staging.drjacquelinehayes.com/

I changed to the dynamic typography system. Following Ying’s advice in this topic (https://generatepress.com/forums/topic/off-canvas-panel-typography-settings-not-working/)
One problem I’ve discovered is how my child theme style.css rem units are interpreted by the browser. I did have the following css in my child theme:

/* Set html font size as a reference for rem units used below */
  1 /* Mobile */
  2  @media (max-width: 768px) {
  3     html, body {
  4         font-size: 18px
  5     }
  6 }
  7 
  8 /* Tablet */
  9 @media (min-width: 769px) and (max-width: 1024px) {
 10     html, body { 
 11         font-size: 18px
 12     }
 13 }
 14 /* Desktop */
 15  @media (min-width: 1025px) {
 16     html, body { 
 17         font-size: 19px
 18     }
 19 }  

I have removed this CSS and am using the dynamic typography settings instead. So the blockquote css declaration (using rems) in the child theme style.css is referencing the body/html font-size set by generatepress.

Previously, the blockquote font-size of 1.2rem was computed as 22.8px on desktop (19px X 0.2 = 3.8, 19 + 3.8 = 22.8). Now using GP dynamic typography to define dynamic base font sizes the blockquote font size is computed as 19.2px.

Do you know why this is happening?

[David]

Hi there,

Go to Customizer > Typography –> Add Typography. Select from the Target Element: HTML and add the font size you require ie. 19px

[Ben]

Thanks David, that solved it. I assumed that rems would reference the body font-size specified in dynamic typography.

[David]

Glad to be of help!

[Author]

Posts