Use rem units for font-size, normalise font sizes between headers and body text

[bencomp]

I found that when I teach a lesson online and have the lesson materials on a second laptop or tablet, I need to zoom in a lot to be able to read the body text from a slightly bigger distance. Zooming in works, but then the headers are huge. Looking at Firefox's inspector for the demo lesson, I notice that the font-size for body text is less than half the pixels (14px) of <h2> header font size (30px). Could we rethink that ratio? It may not help that the headers are bold while the body text is not.

My understanding of CSS good practice is that font sizes are better not specified in pixels (except for the root font size), but using rem ('relative to root em size'). I think this is because some people have their root font size set to a larger value, for example, to compensate for low vision. https://github.com/carpentries/varnish/blob/main/inst/pkgdown/assets/css/lesson.scss still specifies most font sizes using pixels.

[zkamvar]

Thank you for bringing this up! I agree that these need to be adjusted.

Just a note: the {varnish} repository is still in a testing phase for the new infrastructure and is not used in any live lessons, so I'm going to transfer this issue to the styles repository, so that it can be addressed there.

That being said, we will be rolling out an update to the lesson infrastructure next year that will completely revamp the lesson styling that explicitly considers a11y.

[zkamvar]

For reference, here is an example of the heading elements being defined with px:

https://github.com/carpentries/styles/blob/6f490499686e871d56d2aacdbdae5797385f1238/assets/css/lesson.scss#L157-L164

[zkamvar]

Additionally, W3schools has a px to em converter so that we can adjust this now:

https://www.w3schools.com/TAGS/ref_pxtoemconversion.asp