I’ve been writing CSS for many years now but the one area I constantly get held up on is the styling of headings, mainly in the font size department.
I have been along the path of just setting them statically like:
This works etc. I have also been along the lines of solutions like the one shown at https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/
This is all nice etc and generates a nice set of sizes on a set scale that aesthetically looks pleasing.
My issue is for example, how to generate heading sizes that could work within a component in a layout. So for example if you had a
<main> and an
<aside> element. Both elements have some text content in them but most likely you want a smaller or adjusted set of font sizes for in the aside.
Another example is one I ran up against two days ago. I had my main page but across the top I have a full width Google Map with some markers on. When a marker is clicked, an Info Window appears. I have placed text content in there which is marked up semantically, Eg, using an
<h2> at the top followed by some
<p>'s but the
<h2> looks incorrect because it’s pretty massive. I would like the heading sizes to sort of be smaller to match the smaller appearance of the info window.
I know I could just reset all the styles in a scope of the
<aside> or Google Map but I just want to see how other people deal with font sizing within encapsulated areas and not global body text areas.
I basically also want to get away from using a specific heading tag just to get a certain style or font size as I know it’s bad but it’s what I have been doing and need to learn to stop doing it!
Another related question i’d like some insight on. I’ve just looked into a new CSS reset that resets everything so all headings etc go back to 16px and all look the same. This makes it super easy to style one off sections but it feels silly to reset everything back to basics only to instantly re-apply some styles. One method I’ve seen now and again is to apply typographic styles inside a sort of scope class. Eg, create a class like
.prose and apply all typographic styles like heading sizes, list bullet styles and that sort of thing within that class and everywhere you want typographic styles you just add that class to the parent element. It seems sensible to me but i’d like to hear thoughts from others.