Typography System

[burntcustard]

The type object was used for a couple of sites recently, which lets you define types in settings/_type.scss like so:

$type-styles: (
  (
    class: 'h1',
    scale: (36px, 48px),
    weight: 'bold',
    letter-spacing: .5px
  ),
  (
    class: 'h1-thin',
    scale: (36px, 48px),
    weight: 'thin'
  ),
...

However, this is quite confusing, because:

1. It's more like a tool than an object.
2. We've ended up with 5 _type.scss files.
3. It's not documented at all.
4. It's unclear specifically which styles should be defined in the settings/_type.scss file, and what should be defined at the component level - This is likely dependant on the specific designs being implemented, but decisions being made regarding this should follow some rules.

[burntcustard]

Looking back at previous sites we've made with stemCSS, we almost always do one of two things:

End up with several commonly used type-combos E.g. o-type-16px u-color-delta u-typeface-tradegothic on BBPA ✅ Allows for lots of variations easily. 🚫 Harder to maintain consistency - "what were the font styles I used in the header again?" 🚫 Repetition with many identical sets of utilities getting used. ⚠️ Typeface, font-size etc. are split into separate utilities, objects, components. ⚠️ Where does each related property go? E.g. is line-height part of the component the text is in, is it part of .o-type-16px, is it a separate utility i.e. u-line-height-2?

Basically make up a random namespace to hold these E.g. type-wide and type-header-large on Propio ✅ Can define all the properties of a reusable text style in one place. ✅ Can create modified versions for particular situations, e.g. .type-header--disabled. ✅ All of the text-related properties can sit together. 🚫 Previously has ended up in crazy places: sometimes in /base, sometimes, in /settings. 🚫 Previously has resulted in very confusing class + tag combos such as <h2 class="h1">

Maybe we could make it consistent with a namespace (an separate type folder)? So we'd have: ┣ base ┣ components ┣ objects ┣ scopes ┣ settings ┣ tools ┣┳ type ┃┣ __import.scss ┃┣ _h1.scss ┃┗ _wide.scss ┃┗ _link.scss ┗ utilities

and then in h1.scss:

.t-h1 {
  @include fontScale(30px, 40px);
  @extend %u-uppercase;
  line-height: 1.8;

  &--light {
    font-weight: 300;
  }
}

[RussellBishop]

fonts .f-

[RussellBishop]

Solved. I did it. All by ma'self

[burntcustard]

We have the type folder and namespace for these at the moment. Depending on the project, we add different properties (font-weight, font-size, etc.) inside the files in that folder. I don't think it needs changing any more!