Archived topic
Unexpected rendering of font size using rem and dynamic typography
3 replies · Started by Ben on January 4, 2022
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!