Use of a typographic scale for the header sizes?

[webmatros]

Are the font sizes of paragraphs and headers using a typographic scale? If no: it should:)

If yes: could the intervals between sizes be a bit larger? Currently, h2's and h3's a so close in size they're difficult to distinguish between.

Currently it seems to be a Minor Thirds scale (1.200) which is almost always (IMO) too little contrast (size-wise). A Perfect Fourth (1.333) being the minimum – and Perfect Fifth (1.500) and Golden Ratio (1.618) preferable.

Try the different scales here: http://type-scale.com

[jasmussen]

Sounds good to me. CC: @karmatosed

[karmatosed]

I would totally be into seeing a more strict scale. What would you recommend @webmatros and can you work on a pull request?

[ajitbohra]

Image for reference:

Font sizes in the editor:
h1 - 2em
h2 - 1.6em
h3 - 1.4em
h4 - 1.2em
h5 - 1.1em
h6 - 1em
p - 16px

@webmatros let us know, can help with the PR if needed

[webmatros]

@karmatosed @ajitbohra I'm not a coder/developer so I don't even know how to do a pull request :) My background is graphic design and web design :) But I'd love to help with it.

When it comes to typographic scales, it's always a matter of striking a balance between:

1. large enough font-size intervals, so it's easy to see whether a given header is f.e. an H2 or H3 (the current issue in Gutenberg).
2. the base font size shall be large enough to be comfortably legible, yet the largest header (title / H1) shouldn't be gigantic. Hence if the scale is too aggressive (the multiplication-factor is large – i.e. 1.500 or more) the H1 may become too big. On the other hand, if the scale is too weak (i.e. 1.333 or less) point 1 above will be a problem.

The most practical scale I've found (and have used for years) is Chris Pearson's:
https://pearsonified.com/typography

He put a lot of work into it. Among other refinements, he calculated an intermediate size for sub-headlines (i.e. the size right above the base font) to avoid point 2, described above.

Click on Font Size to see the calculated scale.

Note that it also calculates an ideal line-height, based on the font-size's relation to the width of the content area, in Gutenberg's case 610 px.

To get the line-heights for the header-sizes, input those sizes one by one into the Font Size field on the left side of the screen.

Makes sense?

[webmatros]

Elaboration:
The scale in the screenshot above, would be applicable to Gutenberg. But if the Title size (42px) is too large, I'd do a trick, which is to input a larger base font size, and use:

• the Secondary Text size for the body text / paragraphs.
• the Primary Text size for the H4
• the Sub-headlines size for the H3
• the Headlines size for the H2

Skipping the Title font size.

Like this:

I believe that scale will work great!

[twsp]

Adjusted the heading sizes to follow the perfect fifth (1.5) ratio. I know this doesn't address the size of the body text, but any thoughts on the heading ratios?

[webmatros]

Cool @twsp 👍 I'm not familiar with how commits, branches etc works, so 'scuse me for the dumb question, but how/when can I test it? Has it been accepted into Gutenberg and will this be included in the next public beta?

[jasmussen]

I'll take a look when I'm back from vacation next week. Thanks for the info!

[webmatros]

Cool. Enjoy your vacation Joen! 👍

I myself will be gone next week :) Dark'n'stormys aplenty are awaiting me on an exotic island in the Atlantic Ocean.

[jasmussen]

That sounds amazing!

[karmatosed]

One thing we should consider maybe is looking at what other scales and their feeling bring. Let's maybe do some explorations into:

• Dropbox paper
• Notion
• Medium

I'd also be interested in us looking at longer form content like New York Times and other publications online, what can we maybe learn from those.

[webmatros]

Those are all good points, Tammie. Agreed!

[jasmussen]

Taking a look at this now, and Perfect Fifth seems way too oversized for Gutenberg. Keep in mind what we're designing for here is the base stylesheet. Themes that load their stylesheets into Gutenberg wil naturally override these and can do what they like, but we are looking at a goldilocks base style here.

In that vein, a "perfect fourth" seems good to me: http://type-scale.com/?size=16&scale=1.333&text=A%20Visual%20Type%20Scale&webfont=Noto%2BSerif&font-family=%27Noto%20Serif%27%2C%20serif&font-weight=600&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%2324282d

As we implement this, we need to remember the page title as a H1, and we should also consider a smaller scale for mobile. Anything less is going to be a regression as we merge this.

To consider Tammies comment also, here's what others do.

Medium only allows two heading sizes. Desktop:

Mobile:

Notion doesn't have a mobile style, and also only have two sizes, that aren't even using the h1-6 tags:

Dropbox Paper also doesn't have a mobile style, and only two sizes, h1 and h2:

In summary, I feel like the perfect fourth is the one for us to use, as it is both big enough, and it finds a good goldilocks balance considering the headings that seem to be used the most commonly in WordPress themes, h1 for page title, h2 for most headings, and h3 and h4 as well. H5 is then the same size as the base body text.

[jasmussen]

Here's a screenshot of the perfect fourth:

[webmatros]

Hey Joen

Perfect Fourth would be a good choice, agreed. Perfect Fifth can feel a bit too "aggressive" as the sizes grow rapidly.

Regarding Medium only allowing two header sizes (excluding the title size):
That's a good choice on their part. Most people rarely need more than that. The brain has trouble keeping track of a more elaborate hierarchy, anyway. Think of it as an outline (or bullet points in a slide presentation): an outline with more than 2-3 levels will become unwieldy and complex. For that same reason some to-do list apps (like f.e. Cultured Code's Things) limits sub-tasks to one level only.

Practically speaking, the way I often style the smaller (rarely, if ever, needed) header sizes (H4 to H6, presuming H1 = title, and H2 and H3 are used for headers in the content) is to let them be slightly larger than the body text, perhaps bold, and with progressively lighter color. So if the body text is black, I'll do something like:

H2: 25% brightness
H3: 25% brightness
H4: 40% brightness (same size as H3)
H5: 55% brightness (same size as H3)
H6: 70% brightness (same size as H3)

That's just to make sure those sizes are styled, and that if they're used, they work (create a visual hierarchy) but through brightness (optically it can be seen as: density) rather than size.

Have you tried Pearson's calculator I linked to above? Chris modified the scale in a quite pragmatic, tasteful way, by introducing an intermediate header size, right above base font size (body).

So, with a 10px base font size (for easier math, due to "10" nicely equating 100%):

Golden Scale for 10px Font
Title: 26px
Headlines: 16px
Sub-headlines: 13px
Primary Text: 10px
Secondary Text: 8px

See? Despite the scale being based on Fibonacci (a scale of 1.618) there's an intermediate size of 13px, i.e. 1.3x scaling factor). Works really well in practice.

[aristath]

reducing the brightness goes against accessibility principles... Text should have a contrast of at least 4.5:1 with the backgorund (white in most cases) and if a site wants to conform with WCAG AAA then that contrast has to be 7:1.

[jasmussen]

Appreciate the ideas, but in order to keep this ticket actionable, I'd prefer to focus on just the heading sizes. That is, outside of any accessibility concerns with hierarchy and contrast (which are real concerns), users are likely to use the range of headings from 1-6, no matter what UI we might add. As such the range needs to be considered.

In that vein, I'm going to take a stab at implementing the perfect fourth for the base stylesheet. Then we can look re-calculating that scale for mobile as well, as a separate issue. Thanks!