The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Organized typography styles for modular CSS

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #268126

    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 :)

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.