Site logo

Archived topic

Unexpected rendering of font size using rem and dynamic typography

3 replies · Started by Ben on January 4, 2022

Viewing posts 1–4 of 4

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?

Hi there,

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

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

Glad to be of help!

This archived topic is closed to new replies.