Heading typography styles

HTML & CSS
1

Hi,

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:

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: $header-font;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.5em;
    color: red;

h1,
.h1 {
    font-size: 2rem;
}

h2,
.h2 {
    font-size: 1.7rem;
}

h3,
.h3 {
    font-size: 1.6rem;
}

h4,
.h4 {
    font-size: 1.5rem;
}

h5,
.h5 {
    font-size: 1.25rem;
}

h6,
.h6 {
    font-size: 1rem;
}

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 .typography or .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.

Thanks,
Neil

2

Think you answered yourself… Though i would say my style is more sparse coding. I code the CSS i need, as and when i need it.

If I never use <h6>, why have i styled it? why am i consuming bandwidth to transmit that data?

2 Likes
3

For text styling, I create classes with class names such as:

  • page-title
  • article-title
  • section-title
  • heading
  • subheading
  • body-text
  • body-indented
  • body-italic
  • navbar-text
  • photo-caption
  • map-caption
  • table-heading
  • table-text

I apply h1, h2, h3 etc as appropriate on each web page, irrespective of text styling and irrespective of HTML tags.

I do not worry at all about consuming bandwidth to transmit CSS data. It’s insignificant these days, especially in comparison with the amount of data required for images,maps and jQuery. If you are worried about CSS consuming bandwidth, start by putting CSS properties on one line with no unnecessary space characters.

4

While I agree that the bandwidth use is usually ‘insignificant these days’ (ask anyone who has a metered connection or is in less-than-first-world conditions whether that statement is true or not…), the hyperbolic suggestion of putting it on one line is amusing; many things, including jquery, are minified for that specific reason.

My point, such as it was, was to save in multiple fronts - bandwidth for users, time for the creator. sure, an extra h6 is almost nothing - but if you’re declaring font stylings for every layout element in the HTML standard and your CSS is several megabytes big… (look, i can be hyperbolic too!)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.