Foundation.mozilla.org: [QA] Updated typographic styles

[taisdesouzalessa]

Related to #1208 and implementation ticket #1280.

The QA bullet point list is in this doc:
https://docs.google.com/document/d/14RHIsdXGdpbjtINrmWbEN-96Lxt_1LBTd3VTqSc7Y64/edit?usp=sharing

Please let me know if you prefer the list embedded here.

cc: @mmmavis

[alanmoo]

@taisdesouzalessa is this still relevant?

[taisdesouzalessa]

(I don't know what has been done)

@kristinashu as far as I know, nothing of this list has been done yet EXCEPT the “.h1-heading” > could we use 400 instead of 600? Sorry :(. We found it looks too bold now." - I just checked this item as done! @alanmoo did this change last week - and yes, this list is still relevant until we make those changes 👍

[kristinashu]

Adding two more things here:

• [x] The heading "2018 Internet Health Report" font size is 38px but it should be 48px (it was 48px but then had to be made smaller for the FB campaign's long title, but it should be 48px from now on)
  

• [x] h4-heading is 600 but it should be 400 (Mavis had updated this but it somehow changed during the Wagtail updates???)
  

[alanmoo]

Regarding the font size on the homepage featured item: changing this based on the content isn’t a sustainable. I understand that this new size is meant to be the long term size, but there’s nothing in place to prevent a longer title. Do we need to limit that, or better yet @gvn is there a CSS way to dynamically size the text based on the content?

[gvn]

This is kind of a fundamental aspect of live/editable text: it's never going to render 100% consistently. You can find particular combinations of font size and textual content that will look "good" in most cases, but it's always going to be subject to browser/device/user-preference variances. We haven't even gotten into localization yet.

If we want print-style control over typography then we need to use SVG. There's no CSS-way to scale text based on content that I am aware of. I've seen JS solutions, but that's a whole can of worms that I'd rather leave closed.

[kristinashu]

@mmmavis based on Scott's nav updates, I've updated the first bullet point in https://github.com/mozilla/foundation.mozilla.org/issues/1302#issuecomment-381286188

[mmmavis]

@kristinashu @taisdesouzalessa fixes are now on staging for QA: https://foundation.mofostaging.net/

[kristinashu]

Thanks @mmmavis!

In the above comments, I've updated the check boxes for the ones that look good on staging. The unchecked ones seem like they haven't been updated but @taisdesouzalessa maybe you can confirm?

On the home page we have an “.h5-heading” with inside and that is bold. We would like the h5 to not be bold (700) - the style we want is “Zilla Slab 600”

Is odd because it looks like it has been updated on the Home page news section but not on the Home page Happening Now section.

[taisdesouzalessa]

Thanks @mmmavis!! The items that are unchecked from the list above are the ones that still need to be solved (2 items) plus a small bug fix (second bullet point of the list below)

@kristinashu, I marked some other items as done as well (I am QAing this page on Firefox so if you see any inconsistency from what you saw, let me know because sometimes it is browser thing).

• Item number 2 CSS styles - is done. Now we have true italic. I checked the item in the above list.
• Item number 5 .h5-heading that Kristina also mentioned above is updated. The inspector says "700" but since we are not loading Zilla 700, the fallback is being 600. Here is the visual demo to show that the bold is removed. However, Mavis, if you could update the css to avoid future problems (in case we starting loading Zilla 700), that would be great :).
  
• Item number 7 h5-heading is now fixed (line height=28px). I checked the item in the above list.

[mmmavis]

@taisdesouzalessa

h2-heading line height is 32px for me. Did you want it to be 33px???

nvm i found the bug

[mmmavis]

@gvn I think we need to change how we set up the scaleText mixin so line height are set in px instead of unitless... as browser seems to round up hundredths decimal to tenth. e.g., line height of 1.45455 gets rounded up to 1.5. In this case 22px * 1.5 = 33px which is not the value we want (32px)

Let's chat in stand tomorrow...

[mmmavis]

@taisdesouzalessa

On the news page we have an “.h4-heading” wrapping an and that makes it bold (700). We would like to remove that. Zilla Slab 400 is the appropriate style for “.h4-heading”

I'm having trouble finding the element. Do you mind taking a screencap of the element and the source code in dev tool?

[taisdesouzalessa]

@mmmavis not a problem, here is a gif. Let me know if it is clear :)

[mmmavis]

@taisdesouzalessa https://foundation.mofostaging.net/ changes are up

[taisdesouzalessa]

Thanks @mmmavis - 2 last things:

• [ ] “.h2-heading” (MOBILE): line height 32px instead of 33px - still need to be solved. It seems another line height is overwriting the 32px one:
  

• [ ] h4-heading is 600 but it should be 400 - this is still happening in the "News" section (because the h4-heading is inside a h5 tag and getting the 600 from there:
  

I think those are the last fixes...we are almost there. Thanks for your patience in all those details 💯

[kristinashu]

Yes, thank you! This was so much easier during our Sprint...

[mmmavis]

https://foundation.mofostaging.net/

@taisdesouzalessa

“.h2-heading” (MOBILE): line height 32px instead of 33px - still need to be solved. It seems another line height is overwriting the 32px one:

per our discussion on Slack I'm gonna keep the line height as 33px.

---

h4-heading is 600 but it should be 400 - this is still happening in the "News" section (because the h4-heading is inside a h5 tag and getting the 600 from there:

Does the above screencap look like what it's using the correct styling for the title? If so we'll have to change how we implement that element instead of adding more custom css. i.e., remove the h4-heading class from <a> and add it to the wrapper <h5> (we should file a new ticket for this). Let me know how I should proceed.

[taisdesouzalessa]

it looks right, @mmmavis. Thanks!

[mmmavis]

k I'll file a new ticket for that... I think it's CMS related.

---

ticket filed: https://github.com/mozilla/foundation.mozilla.org/issues/1483

[mmmavis]

@taisdesouzalessa let me know if anything else needs fixing. If not, I'll promote these code changes to prod tomorrow.

[taisdesouzalessa]

it's all good now! Thanks a lot @mmmavis :) You rock 🎸

[kristinashu]

Sweet! Mavis just pushed these to prod!