Make text headers H1, H2, H3 relatively bigger and more distinct in size

Bugs & Issues
1

Problem:

As Creator as well as Viewer I find it difficult to see distinction in sizes of the headers in rich text fields. This makes it hard to see logic and structure in texts that use multiple levels (e.g. main sections/paragraphs/subblocks).

Analysis

Currently in Fibery’s rich text fields, headers have the follwing pixel sizes, which are clearly too close in size:

H1 24px
H2 22px
H3 18px
H4 16px

Suggested solution:

To improve the visual hierarchy and readability of text, especially when it contains multiple headers, we can use best practices commonly applied in web and document design. These practices ensure that different header levels are distinct enough to clearly communicate the structure and relationships between sections. Here are some guidelines:

Recommended Header Sizing:

  1. H1: 32px - 36px
  2. H2: 24px - 28px
  3. H3: 20px - 24px
  4. H4: 18px - 20px
  5. H5: 16px - 18px
  6. H6: 14px - 16px

Additional Best Practices:

Color Differentiation:

  • Apply different colors to headers, with higher-level headers being darker (or whiter in dark mode) or more prominent colors.
  • Ensure color contrast is high enough for readability.
2 Likes
2

YES YES YES. This is such a good point to raise. It’s one of those “little” things that sort of annoyed me a bit, but certainly could live with. But yes, H1, h2, and h3 I can barely tell apart. And I tested out your suggested sizes in dev tools, and they look spot on.

2 Likes
3

Agree!

And it would also really help if the spaces between paragraphs is slightly bigger.

Like a normal ‘hard enter’ (alt+enter).

When you have long texts (like in the Fibery guide) the paragraphs are really close to each other which makes it harder to read.

image
image852×807 55.4 KB