Rebrand - Create typography.scss stylesheet - #51116

Oh, here comes the only question I have.
Is this really a good idea? (semantic h3, h5 styling). Why can't we use h5 for h5 styling? I would say that it's and anti pattern and we should avoid it. (Correct me if I'm wrong)

this is the result of some discussion we've been having, on how to maintain accessible heading structure in cases where we want non-standard font sizes for the heading. it's important for users who navigate a page via screenreader that headings correctly represent the document structure. here's a copy of a message i wrote a while back, that hopefully provides some context:

Just to clarify, the distinction we want to make is between heading style (e.g. font-size) and heading tag (e.g. <h1>). We might be using an H2 inside a modal and want it to have smaller text than normal, so style it as an H3.

In terms of both accessibility and semantic appropriateness, we should consider the following as rules, though breaking them isn't always technically a violation of WCAG standards:

• All heading levels should be appropriately ordered, so an H1 is always above other heading tags in the HTML, H2s are under it, etc, without ever skipping levels.
• While a page can have multiple H1s, it should not, and an H1 should represent the page title. (Some exceptions exist, like using H1s inside an iframe, or in standalone components like a modal.)
• Headings should only be used to describe the contents of a section. If we want larger text that does not describe a section beneath it, we should style the text without making it a heading.

Kelby suggested some options, like the mixins we use in Pegasus, Bootstrap's class styles, and some combinations of the two.

This page has some additional info and resources: https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H42.html.

Darin also shared another article:

This article has some best practices for headings that I think are great - but I link to it because of the section on "headings in components" about halfway through the article.

Thanks for sharing this extra context @rshipp!

@levadadenys good question about the class names — Bootstrap uses .h1, etc classes, and Molly found that Semantic UI React uses size labels (see here) like huge, tiny.

I chose these class names (heading-lg, etc) since they matched the breakpoints.scss size naming convention, but am 100% on board to change them if we think a different pattern is better!

I just updated the refactored typography.scss file after @levadadenys suggested making mixins and classes for each element 🙌

Thanks for the context and the article, now I understand. +1 to using classNames

@levadadenys I made a few updates this morning to this file — can you take another look?

• Added the color, font, and barlow imports just in case this gets used somewhere where they aren't being imported.
• Refactored the p styles a bit
• Added em styles

LGTM!
The only thing I would change is put @include statements in the begining of mixin/style scope in order to prevent styles from parent scope being overriden by the styles from included scope.
So this:

@mixin body-one {
  font-family: $gotham-regular, sans-serif;
  font-size: 1em;
  @include paragraph-common
}

I would make like this:

@mixin body-one {
  @include paragraph-common
  font-family: $gotham-regular, sans-serif;
  font-size: 1em;
}

Done 👍 Excellent feedback, thank you!

LGTM!
The only thing I would change is put @include statements in the begining of mixin/style scope in order to prevent styles from parent scope being overriden by the styles from included scope.
So this:

@mixin body-one {
  font-family: $gotham-regular, sans-serif;
  font-size: 1em;
  @include paragraph-common
}

I would make like this:

@mixin body-one {
  @include paragraph-common
  font-family: $gotham-regular, sans-serif;
  font-size: 1em;
}