Archived topic
Issue with CSS : html { font-size: }
9 replies · Started by Fabien on July 2, 2018
Hi,
I'm currently trying to tweak a little bit my Generatepress child CSS by using
html {
font-size: xxxx;
}where xxxx is either fixed px or a calc.
Tried to add that in the style.css and in additional CSS, but it does not work.
Is there anything I'm missing here ?
Thanks
Hi there,
Any chance why you don't want to use the customizer option (Typography > Body)?
Let me know :)
Hi, thanks for answering
I'm aiming for viewport unit based typography and was seing html "root" setup as a reference in any source I could find. So far we are using Typography > Body, but our end goal is
html { font-size: calc(1em + 1vw) }
And not sure I can use calculation with typography > body
Hmm try body instead of html.
Body works, but I'm actually trying to understand why everyone suggests html and it doesn't work in generatepress !
But yes, just tried body and it works!
html is for the root font size which will overide that defined by the browser which is 16px which eauals 1 REM. So if you wanted to use REM sizes in your builds then html is the one to adjust.
My main issue with body is that it doesn't seem to apply on h1,h2,h3...
Will try with html and rem and see how it goes
body only affects the paragraph text. H1, H2 etc are all separate tags and need to be styled separately. What are you trying to achieve? Golden Ratio modular scale? Fluid typography?
Yes, fluid typography was my idea, but I may stick to an easier solution with @media only screen.
Fluid is good if you are working with full width sections and more 'complex' designs where elements are likely to be rescaled but for standard site layouts media queries are the easier to manage.
