Organized typography styles for modular CSS

[ItsMeAgain]

Hey, guys. I could use an advice or two on how to stay more organized with my typography rules.

I use the font-size = 62.5% on the html tag, so I could make use of the 1 rem = 10px rule, but then all of the font-sizes on the html page become the same size. Is there some sort of a reset that follows this rule to fix the ‘problem’? Also, how do you add font-families to your elements? Most of the designs that I’m coding have one font for everything that isn’t a heading, and headings have another font, so I would normally write something like this:

body { font-family, font-size, color, line-height }
h1, h2, h3, .. { font-family, font-size, color, line-height }

And I would find the most used font-size on the page to set as the default one ( if I have most text in the original design set to 16px, I would set the default to be 16px and then change the font-size of any element that has a different font-size ) and do the same for the headings.
But then, if I change the font-size of many elements, when it comes down to writing the media queries it takes more time and adds more bloat to the code.
Is there a better way to do this?

Maybe, if I have 4-5 different font-sizes on the entire document, should I use some sort of a variable for each of them and then add the media queries to the variable itself, so I don’t have to change the font-size on every element when writing media queries?

I’m looking for a way to stay more organized with my styles and if there is a way to set these properties globally somehow, would make it a lot easier.

I could use a good article on this, but I couldn’t figure out the proper question, hence I’m writing here.
Thank you for your time, any advice will be appreciated :)

[Author]

Posts