Update H4 on small screens

cfpb / design-manual

⚠️ THIS REPO IS DEPRECATED ⚠️ A set of design principles and standards for the Consumer Financial Protection Bureau.

https://cfpb.github.io/design-manual/

Creative Commons Zero v1.0 Universal

98 stars 71 forks source link

Update H4 on small screens #594

Closed nataliafitzgerald closed 6 years ago

nataliafitzgerald commented 6 years ago

Additions

Updated Heading 4 size for small screens
- 16px, Avenir Next, Medium / 18px line height
Added small screen typography specs for all web heading levels

Removals

Global: Removed space between value and "px"
Global: Removed space between value and "pt"

Changes

Testing

Review

@marteki @Scotchester @huetingj

Preview this PR without the whitespace changes

Screenshots

artboard 2

Notes

Todos

Checklist

[ ] Changes are limited to a single goal (no scope creep)
[ ] Code can be automatically merged (no conflicts)
[ ] Code follows the standards laid out in the front end playbook
[ ] Passes all existing automated tests
[ ] New functions include new tests
[ ] New functions are documented (with a description, list of inputs, and expected output)
[ ] Placeholder code is flagged
[ ] Visually tested in supported browsers and devices
[ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

marteki commented 6 years ago

Looks like the Travis build is failing, from the same things I encountered on #593. Once that is accepted and merged, it should fix the fail that's blocking a merge.

nataliafitzgerald commented 6 years ago

@marteki - Updated to "Small screens:" to "<601px wide:" as a patch pending further discussion on how we can be more consistent across the DM in terms of how we talk about responsive sizes.

screencapture-0-0-0-0-4000-brand-guidelines-typography-html-1519248098204

jenn-franklin commented 6 years ago

I can understand the need to define "small screen." Instead of including pixels here, could we jump link to "Breakpoints" on the DM grid page? http://cfpb.github.io/design-manual/global-elements/grid.html May need to refine the wording of that section. Also, we're defining <601 as XS on that page.

jenn-franklin commented 6 years ago

If we do include "<601 px" on this page instead of linking to the grid page, I feel like it needs a little more context, hmm.... like "screen size <601px"... Hate to be verbose but with the px of the type size and linespacing, there are a lot of pixels running around.

nataliafitzgerald commented 6 years ago

@huetingj I think we need to come up with a sentence or two to place at the top of "Web hierarchy" that talks about responsiveness and spells out the top level details of our system.

nataliafitzgerald commented 6 years ago

@huetingj @marteki I went ahead and updated the text in the "Web hierarchy" section to provide more specific information about the change in type sizes at 600 and below.

nataliafitzgerald commented 6 years ago

This one is ready to merge pending the Travis fix that @marteki is working on.