Improving Visual Hierarchy

[archiewood]

Why?

• We've had feedback that there isn't enough distinction between some of our H1 - H6 styles.
• H3 and below are not very useful as they are not very visualy distinct from <p> text size wise.
• Sub-lists contain gaps after final bullet that breaks list flow

What?

This contains some reasonably major stylistic updates to the default styling of Evidence projects:

• More visual contrast between H1 - H6 using sizes: This brings Evidence in line with more typical web standards for reading
• Removing margin after sub-lists
• Adding slight margin separating list items

Questions

• This will change how H1 tags should be used. It will now probably not be suitable to use aside from the top of a page. (and instead use H2s) Does this matter?
• The overall change will increase the vertical space occupied by headings (especially H1, H2), which somewhat reduces the information density. Is this trade off worth it?

Headings

Before:

After:

Lists:

Before:

After:

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: cf923c2254e99382b4ecf7e6de945b53aff6cdc6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

| Name | Type | | ------------------------- | ----- | | @evidence-dev/components | Patch | | @evidence-dev/evidence | Patch | | evidence-test-environment | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
evidence-development-workspace	❌ Failed (Inspect)			Jan 3, 2023 at 11:01PM (UTC)
evidence-docs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 3, 2023 at 11:01PM (UTC)

[hughess]

Thoughts on the changes in this PR / answers to your questions:

• The bullet spacing changes are great
• I think the new headers take up too much space (reducing the information density as you mentioned). A few ideas:
  • I think we can use font weight a bit more to distinguish the headers - e.g., we can have more bold sans-serif options in our headers (make H3 a smaller version of H2)
  • Use the old H2 as our new H3, then scale up H2 and H1 somewhere between where they were before and where they are in this PR

I took a look at our current headings in comparison to our visual elements (screenshots below) and have these thoughts:

• I agree that H3 and below are not visually distinct enough to be useable in most cases
• The boldness of the BigValue contents makes it hard for headers to take visual priority over them
  • I think the solution here is to make the BigValue text a bit thinner (maybe font-weight: 500)
• We use a lot of grey shades throughout Evidence and sometimes it causes elements to visually blend together on the page
  • One way to make components and other elements stand out more is to make our header and base text colour darker (e.g., color: var(--grey-999))

Charts

Tables

Big Values

Text

Blockquotes

[hughess]

I don't think this makes sense to add now, but in the future if we need more options to visually separate elements on a page, we can use colours to create distinct sections of content. For example:

[hughess]

Here are some comparisons after changing the BigValue thickness and making the base font colour darker:

[archiewood]

I dig the BigValue thickness changes I think they look more elegant. They are still big enough to grab they eye I think

Re the font colours for the headings. I suspect keeping the larger headings at slightly lighter grey is the right call. The Flawless Typography Checklist has a good piece on this:

It's subtle but effective:

[archiewood]

Changes

• @hughess I've sized down the h1 and h2s a bit.
  • When I did that I worried the h3 wasn't quite distinct enough from the h2 on size alone. So I've italicized the h3s.
• Settings panels: rely on h1-h3 styles so have tweaked these to remain looking good.
• BigValue components: reduced font weight to 500

@mcrascal would be great to get your blessing on this as I know you did a lot of the original thinking!

Before

After

All the headers

[mcrascal]

I really like it, definitely has my blessing. Thanks @thomsebastin also!

The only issue I have is with the italics in the H3s. I know the H3s are really tricky, but I don't dig italics on that UI font.

I'd propose taking off the italics and taking the size down by 0.1em. After that the H3 is still very heavy relative to the serif body and smaller headers, but it's also a lot smaller than the H2s.

I'll open a PR with the change -- your call if you want to include it.

[archiewood]

That looks great. Feel free to just commit to this branch, or I can rather than opening a new PR!

[mcrascal]

PR against this branch is already open! #552

[archiewood]

Seems fine to merge. Failing check is because we have changed the build command on evidence-development-workspace