Display Headings - Pattern Library

[taisdesouzalessa]

CONTEXT: We decided to make weekly meetings with engineers to evolve our Component/Pattern Library. The agreement is that we will start with little, basic and important elements first and evolve to more complex components as we go. In this way, we guarantee we can move on with this project and fit it into our schedules. You will see a series of tickets in this repo, with the tag Design, that reflects our combined effort on this area. The design ticket is #211

ETHERPAD

For our next Tuesday session (Nov 27th) we should have a discussion about the components (mofo ui):

• Display heading (font weight 600)
• Display heading (font weight 100)

Designers task:

• [x] Look for past examples where those components were used (screenshots) (reference: this list)
• [ ] Discuss if the size and style fits into future use that justifies adding the element to the library (also discuss if we see any variations we should consider?)
• [ ] During the session: talk to engineers about our findings and after we have an agreement the next step is to add it to the Pattern Library, making sure it is aligned with https://mozilla.github.io/mofo-bootstrap/demo/

cc: @kristinashu @flukeout @xmatthewx @hannahkane @alanmoo @gvn @mmmavis

[alanmoo]

This is a standard Bootstrap element. The idea behind it is that an <h1> element in the body content of a page is part of a different typographic rhythm than one in a jumbotron or other prominent featured heading of a page. We've got a little bit of custom styling regarding these that I'd like to reduce if possible, so this is a good topic for our next meeting.

[taisdesouzalessa]

Thanks for the context, @alanmoo. I put together a sheet comparing the Mofo Bootstrap we have on this page with current implementation so we can see real scenarios in which this standard is used (or variants of the standard). I still have to incorporate mobile view in this but here is what I have so far:

Red Pen link: https://redpen.io/jta149b0019df7e188

[taisdesouzalessa]

Some questions that came to mind were while I discussed that with Sabrina were: • should we apply the standard elements in future websites or are we applying also retroactively? • should we have a responsive view of the MOFO Bootstrap so we see those elements scaling for mobile as well? • Considering the various contexts of use, what is an ideal size and line height for those headings? UPDATE: if we decide for the default multiplier we should stick to multiples of 8 (in px) • Is alignment included in the pattern's rule? • Is Mozfest part of the pattern? Or does it have a specific set of patterns and components? • Sentence case or Title case? • Localization?

[alanmoo]

• On future websites, sure we should apply standard elements whenever possible. On existing sites, there's a varying amount of effort required for something that probably won't have an impact in the bigger picture.
• The demo should be responsive, though most elements shouldn't really change much at smaller viewports.
• I do recall some line height adjustments in MoFo Bootstrap for different screen sizes, though I believe I took them out for consistency's sake- when considering things like localization you don't know how many lines something will take up, you just want it to always look consistent when it wraps.
• Alignment is something that's easy enough to change on the fly, I wouldn't be too prescriptive about that. The most difficult thing when developing are the finer details- font size, color, spacing, etc. If we can lock those down, most other pieces (especially alignment) are pretty easy to work with.

[taisdesouzalessa]

Summary of the talk on this subject:

• Consider the system behind the items we can customize: variables.scss. Our version of that file, right now: overrides/_variables.scss
• Mofo Bootstrap CSS overrides
• If we are changing the display size to accommodate needs and localization, consider the whole system - like display 1 to display 5 styles. We can have display 1 as 72px and display 2 as 64px. If 72px is too big, we can use display 2 instead for our jumbotron, considering the sizes of the other displays 3-5 (who will also change to keep the hierarchy).

NEXT STEPS:

• Prepare some studies of display hierarchies. To see how they would work in real scenarios, Mozilla Science and Women & Web Literacy (https://mozilla.github.io/womenandweb/) are good starting points.

cc: @sabrinang @kristinashu @alanmoo