Z H
0
I'm working on a page (zacvhogan.github.io) and have found that the body text of the site has varying font weights. It's as though with each nested element, the font weight becomes heavier.
Why would this happen? I've looked through the CSS and inspected and compared the various text elements in Chrome Dev Tools to no avail.
Source code: https://github.com/zacvhogan/zacvhogan.github.io
Comparison below. Yellow boxes indicate nesting.
It could be because you are using em units instead of rem units.
The em unit is based off parent font size.
The rem unit is based off the document font size.
Solution: The difference in font-weight was caused by styling that was making the header text lighter, and NOT (as I had assumed) styling that was making the text lower in the page heavier.
I had checked all of the article and section CSS for font weight, but had failed to check the header styling.
Thank you to everybody who commented!