Brand Standards: Typography

[sabrinang]

Description

Standardize how typography is documented, introduced and used across foundation properties. This process includes an audit, clean-up, feedback and proposal phases.

[sabrinang]

Previous type work documentation that may be useful for reference: https://docs.google.com/spreadsheets/d/1Z1oScv_5NfhGGkFg6nH-_16dKWSyPcNhrKdA5E_QwIk/edit#gid=0

[sabrinang]

related to #317

[sabrinang]

Refer to working doc in gslides: https://docs.google.com/presentation/d/1mQJOwKj1OQkXlhHOVa2uLX0gRPQ-PffW0B3ffXztk5w/edit#slide=id.g4c6a205038_2_649

Type Audit
Our audit was focused on the Foundation's site uses with inspect element tool on the site (we did not audit PNI etc.)

Type Clean up and Proposed Changes

Headings

Heading 1

• defined similarly as #view-home .h1-heading (48/56px) currently so we can accomodate long headings on the homepage and elsewhere
• this consolidates both h1 styles (not enough use cases to keep both but we need to test it in situ)

Heading 2

• shift existing .h2-heading to become new .h4-heading and bump everything up accordingly since this heading is smaller than others
• new .h2-heading is defined similarly to previous .h3-heading
• pages like initiatives, participate and already use the style like a h2 and we should test what the homepage should use (for "latest news" & "happening now")
• change .h2-typeaccent to .type-accent and remove from this category

Heading 3

• defined similarly as old .h4-heading

Heading 4

• defined similarly as old .h2-heading but Zilla Slab Highlight is now Zilla Slab with letter-spacing: 0px

Heading 5

• remains the same
• define a and a:hover

Heading 6

• name change .h6-heading-uppercase to just .h6-heading
• previous .h6-heading becomes .body-small
• consider making .commitment to just .h6-heading (they are very similar)

Overall Headings

• should we simplify class names since we'll have only one each? example: 
.h2-heading to .h2 or h2 element?

---

Copy

Small Body

• create .body-small defined similarly to old .h6-heading
• include a and a:hover

Body

• change name from .body-normal to just .body

Large Body

• remains the same

Quote

• remove .quote-small because People page doesn’t exist anymore
• change name from .quote-featured to just .quote

---

Other

Type Accent

• change .h2-typeaccent to .type-accent and moved to other category
• do we use this enough to give it a name? (used for quotation marks and on News for years)

CTA

• .cta-link::after change → to unified SVG not unicode arrow character (related to inline icons)

Links Overall

• add underline on hover
• changed underline spacing (we can use border-bottom & transition attributes similar to mozilla.org links)

---

Dark Theme

• add new light blue colour #b7b9fa for links on a dark background
• create parent class .dark-theme to append to other classes so it can adopt it’s colour and link styling as everything else stays the same
• check in with Natalie about new sign-up/footer styling, what other styles need to be introduced or can we aligned with dark-theme styles here

---

Typography in UI Components & Other related elements

Buttons

• button labels use sentence case
• class names can be .button-primary .button-secondary (unsure about .button-pop name TBD)

Forms

• form labels, required fields, disabled fields, text fields, titles, validation and error messages, inline dialog, disclaimer text etc. will be addressed in a separate issue

Navigation

• simplify class names but this will be addressed in a separate issue

Inline Icons

• related to typography but large enough to be a separate Iconography issue

/cc @natalieworth @kristinashu @beccaklam @xmatthewx @mmmavis

[sabrinang]

Type styles to test
Most recommendations are stylistically the same mainly name changes and shuffling but there are a few to mockup up the existing state and proposed changes to compare:

• new .h1-heading on other pages that is not the home page
• which heading style to use for home page “latest news””happening now” and initiative’s “Featured Programs and Projects” (replaces old .h2-heading)
• test dark theme styles with Natalie in sign-up/footer (if we can align all or what is uniquely defined or considered navigational)

[sabrinang]

Testing new type updates in context: https://redpen.io/p/tab7564100aa4ba265

• Heading 1 becomes smaller from 56px to 48px (same as current #view-home .h1-heading)
• Heading 2 can remain the same size without highlight (to new heading 4) or it can use the new heading 2 (same size as existing heading 3)

[sabrinang]

From the feedback, Heading 1 will be 48px and we will use new Heading 4 on “latest news””happening now” and initiative’s “Featured Programs and Projects”.

I've caught up with Mavis and we'll will adjust any class names if needed on implementation issue that has been filed: MozillaFoundation/foundation.mozilla.org#2806

@natalieworth I'm aware we will need to test the dark theme styles on your sign-up/footer component iterations #318 and MozillaFoundation/foundation.mozilla.org#2546 if there are new styles we want to define we can open another issue.

[natalieworth]

Update: I've added the regular and dark-theme typestyles/ cleaned and removed old styles in the Sketch file. It's updated in Abstract.
Notes/ future P2's we could create:

• Possibly create a type style for the Menu? I feel like the 15px size and weight works well right now
• trending projects on mobile may need another header option (18px and thinner weight)

[sabrinang]

@natalieworth Yup, I noted above we will address navigation (so the menus) as separate ticket (not yet filed but if we are working on it next I can file this week)

For trending projects, on my mobile it looks similar to the other h4s on mobile? If not can you file a QA/enhancement issue on site repo https://github.com/mozilla/foundation.mozilla.org/issues