It happens pretty often to encounter situations when you don’t like a default style for an HTML element. The methodology that has proven to be reliable over time is to use the so-called CSS utility classes. Their purpose is to allow you to quickly make HTML class adjustments until the result looks just right.
In this article, we’ll try to walk through the naming conventions that various frameworks and design systems use when it comes to typography, especially headings sizing.
CSS utility classes
The utility classes, sometimes called helpers, are simple and reusable CSS class selectors that apply a certain and clear rule in your design system.
For example you may think about the well known .float-right
, .list-unstyled
, .clearfix
or .visually-hidden
utilities.
The .h1
to .h6
naming convention
I remember I had an Aha! moment the first time I ever saw the above naming convention. Ever since then, whenever it comes to typography for a new project, I often try to build my styles using utilities like .h1
to .h6
.
In other words, this translates to: I want a larger font size for the h2
, please make it look like an h1
. That’s actually a fair compromise between semantics, thus SEO and visual appearance requirements.
Origins
While trying to beat procrastination and start writing this article down, I was curious to find out the above naming convention origins.
The truth is I didn’t know for sure who came up first with this naming convention idea. So I asked on Twitter. This almost never disappoints. Sven correctly pointed out that it was OOCSS.
How did I not know or guessed that? Of course, it had to be OOCSS!
Object-oriented CSS or OOCSS is a methodology developed by Nicole Sullivan, that helps writing write fast, lightweight and maintainable CSS by treating HTML elements as objects, giving all these objects classes.
We now have ACSS, BEM, SMACSS or SUIT CSS but it all started with OOCSS at Web Directions North in 2009.
Regarding the above question I asked on Twitter, Nicole wrote a very interesting short story on how these heading naming conventions became a thing. You should go read it.
OOCSS
Getting back to this article’s topic, it seems that defining heading styles using the OOCSS methodology is widely adopted nowadays.
At the moment of this writing, many frameworks and design guides are using it:
Let’s go further and see other approaches (in random order) when it comes to typography and heading utilities.
inuitcss
I’m not such a fan of the
.hN
notation, I much prefer a solution that I believe to have been suggested by Mr Jeremy Keith, and that is to use abstract classes made up of the first six letters of the Greek alphabetHarry Roberts on font sizing in CSS
Bulma
As their documentation states, there are 2 types of headings: .title
and .subtitle
. But the interesting fact, in my opinion, is the seventh size available.
On a side note, in a recent HTML study I made, I did found 21,403 h7
HTML elements within 8 million web pages.
Lightning Design System
All headings (h1–h6) are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility.
Atomic CSS
Atomizer creates CSS style declarations based on Atomic classes it finds in your project.
When it comes to Atomic CSS, the Atomizer tool generates your style sheets based on how you’re writing the HTML classes.
BBC’s GEL
Each size is given a name derived from traditional type measuring techniques dating back to as early as 1582.
Shaun Bent on CSS at BBC
ALUX
Expressive CSS
Solid
Header sizes are defined from
h1
toh6
. Additionally, Solid provides responsive prefixed utility classes ranging from.xs-text-1
to.xs-text-6
for sizing blocks of text. For the same font size across devices, use the default.xs-text-n
class. Headers and text sizing classes have no margins or padding by default.
Tachyons
Marvel
What about the others?
Other popular frameworks like Pure CSS, Milligram or Skeleton don’t use CSS utilities at all when it comes to headings sizes.
Puzzled about
While doing some research on this article, I stumbled upon some misleading or not so up to date style guides.
MailChimp
The MailChimp website headings and utilities seem to have nothing to do with their own typography style guide.
Instead, they seem to use the following convention in their style sheets.
GitHub’s Primer
The GitHub’s Primer uses .h1
– .h6
to change an elements font size and weight while relying on some typography SCSS variables:
Conclusion
Whilst this article is about sizing only, a comparison in terms of semantics and accessibility between let’s say grids, buttons or maybe form elements is something that would be interesting to see.