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

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

“Fluid Headings”

Donnie D’Amato:

There’s no scarcity of posts that specify the right way 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’s 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 measurement. That often achieved with the clamp() operate, which units an “best” font measurement that’s locked between a minimal worth and a most worth it may 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 “best” worth in viewport models for fluidity between the min and max values:

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

However the problem 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 “best” worth in order that the font measurement 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 measurement you wish to assist (seemingly 320px which is what we historically affiliate with smaller cell units), 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 sensible 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.

Type :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 method.

• :heading: Selects all components.
• :heading(): Identical deal, however can choose sure headings as a substitute 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 method. So, certain, this:

:heading { }

…is far 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 components, ignoring every other component that could be heading-like utilizing HTML attributes and ARIA. Excellent context that’s value studying in full.