New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use of a typographic scale for the header sizes? #4965

Closed
webmatros opened this Issue Feb 8, 2018 · 17 comments

Comments

Projects
None yet
6 participants
@webmatros

webmatros commented Feb 8, 2018

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

This comment has been minimized.

Contributor

jasmussen commented Feb 9, 2018

Sounds good to me. CC: @karmatosed

@karmatosed

This comment has been minimized.

Member

karmatosed commented Feb 9, 2018

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

@ajitbohra

This comment has been minimized.

Member

ajitbohra commented Feb 10, 2018

Image for reference:
sizes

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

This comment has been minimized.

webmatros commented Feb 11, 2018

@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.

screen shot 2018-02-11 at 19 15 36

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

This comment has been minimized.

webmatros commented Feb 11, 2018

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:

screen shot 2018-02-11 at 19 27 45

I believe that scale will work great!

@twsp

This comment has been minimized.

Contributor

twsp commented Feb 12, 2018

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

This comment has been minimized.

webmatros commented Feb 14, 2018

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

This comment has been minimized.

Contributor

jasmussen commented Feb 15, 2018

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

@jasmussen jasmussen self-assigned this Feb 15, 2018

@webmatros

This comment has been minimized.

webmatros commented Feb 16, 2018

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

This comment has been minimized.

Contributor

jasmussen commented Feb 16, 2018

That sounds amazing!

@karmatosed

This comment has been minimized.

Member

karmatosed commented Feb 17, 2018

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

This comment has been minimized.

webmatros commented Mar 13, 2018

Those are all good points, Tammie. Agreed!

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Mar 14, 2018

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:

screen shot 2018-03-14 at 09 47 25

Mobile:

screen shot 2018-03-14 at 09 47 30

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

screen shot 2018-03-14 at 09 49 54

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

screen shot 2018-03-14 at 09 51 59

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

This comment has been minimized.

Contributor

jasmussen commented Mar 14, 2018

Here's a screenshot of the perfect fourth:

screen shot 2018-03-14 at 09 58 25

@webmatros

This comment has been minimized.

webmatros commented Mar 15, 2018

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

This comment has been minimized.

aristath commented Mar 15, 2018

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

This comment has been minimized.

Contributor

jasmussen commented Mar 15, 2018

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!

jasmussen added a commit that referenced this issue Mar 15, 2018

Try a perfect fourth heading
This fixes #4965. It's very much an attempt at this point, and it needs design feedback. It uses this typographic scale: http://type-scale.com/?size=16&scale=1.333&te
xt=A%20Visual%20Type%20Scale&webfont=Noto%2BSerif&font-family=%27Noto%20Serif%27%2C%20serif&font-weight=600&font-family-headers=&font-weight-headers=inherit&backgroun
d-color=white&font-color=%2324282d

We may want to try a perfect fifth instead. Unlike the preview seen at the link above, it looks quite monstrously big in Gutenberg. See screenshot.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment