Headings: Semantics, Fluidity, and Styling — Oh My!

As Martin notes: “I’m actually nit-picking right here, nevertheless it’s vital to consider issues past the visually apparent.”

“Fluid Headings”

Donnie D’Amato:

There’s no scarcity of posts that specify find out how to carry out responsive typography. […] Nevertheless, in these articles nobody actually mentions what qualities you are supposed to look out for when determining the values. […] The advice there may be to all the time embody a non-viewport unit within the calculation along with your viewport unit.

To recap, we’re speaking about textual content that scales with the viewport dimension. That normally executed with the clamp() operate, which units an “excellent” font dimension that’s locked between a minimal worth and a most worth it will possibly’t exceed.

.article-heading {
  font-size: clamp(, , );
}

As Donnie explains, it’s frequent to base the minimal and most values on precise font sizing:

.article-heading {
  font-size: clamp(18px, , 36px);
}

…and the center “excellent” worth in viewport models for fluidity between the min and max values:

.article-heading {
  font-size: clamp(18px, 4vw, 36px);
}

However the challenge right here, as defined by Maxwell Barvian on Smashing Journal, is that this muffs up accessibility if the person applies zooming on the web page. Maxwell’s concept is to make use of a non-viewport unit for the center “excellent” worth in order that the font dimension scales to the person’s settings.

Donnie’s concept is to calculate the center worth because the distinction between the min and max values and make it relative to the distinction between the utmost variety of characters per line (one thing between 40-80 characters) and the smallest viewport dimension you need to assist (possible 320px which is what we historically affiliate with smaller cell gadgets), transformed to rem models, which .

.article-heading {
  --heading-smallest: 2.5rem;
  --heading-largest: 5rem;
  --m: calc(
     (var(--heading-largest) - var(--heading-smallest))
     / (30 - 20) /* 30rem - 20rem */
   );
  font-size: clamp(
    var(--heading-smallest),
    var(--m) * 100vw,
    var(--heading-largest)
  );
}

I couldn’t get this working. It did work when swapping within the unit-less values with rem. However Chrome and Safari solely. Firefox should not like dividing models by different models… which is smart as a result of that matches what’s within the spec.

Anyway, right here’s how that appears when it really works, no less than in Chrome and Safari.

Fashion :headings

Talking of Firefox, right here’s one thing that just lately landed in Nightly, however nowhere else simply but.

Alvaro Montoro:

Styling headings in CSS is about to get a lot simpler. With the brand new :heading pseudo-class and :heading() operate, you possibly can goal headings in a cleaner and extra versatile approach.

• :heading: Selects all parts.
• :heading(): Identical deal, however can choose sure headings as an alternative of all.

I scratched my head questioning why we’d want both of those. Alvaro says proper within the intro they choose headings in a cleaner, extra versatile approach. So, certain, this:

:heading { }

…is way cleaner than this:

h1, h2, h3, h4, h5, h6 { }

Simply as:

:heading(2, 3) {}

…is just a little cleaner (however no shorter) than this:

h2, h3 { }

However Alvaro clarifies additional, noting that each of those are scoped tightly to heading parts, ignoring another ingredient that could be heading-like utilizing HTML attributes and ARIA. Excellent context that’s value studying in full.