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

Try a perfect fourth heading #5631

Merged
merged 3 commits into from Mar 22, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Mar 15, 2018

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:

screen shot 2018-03-15 at 11 03 56

Other downsides include the fact that heading sizes become very uneven in the em sizes, with 4 digits after the comma. Additionally, are we okay with the H6 being smaller than body text? It feels weird to me to have any heading that's smaller than the body text.

It is important to remember that what we are adjusting here is the base Gutenberg stylesheet. If themes load their own stylesheet into the editor, they will control the heading sizes themselves.

CC: @webmatros

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

I like this, it feels a lot better.

jasmussen added some commits Mar 22, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Mar 22, 2018

Contributor

I switched to a Major Third instead, see http://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&webfont=&font-family=%27Noto%20Serif%27,%20serif&font-weight=600&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=

The reason being: the H1 which is used for the title, was GIANT in a perfect fourth. Too big. The contrast was nice, but the Major Third seems to be a much better fit for what is essentially the default editor stylesheet. Additionally, I rounded the em values to 2 digits after the comma, with no perceivable change to the sizes.

Screenshot time. This branch, now:

screen shot 2018-03-22 at 11 40 47

Sharing an empty page just to show how big the H1 is, even in the smaller "Major Third" scale which puts the H1 at a 2.44em size. In master. the H1 is currently 2em.

Here's the Perfect fourth, which is even bigger, with a 3.15em size.

perfect fourth

Looking just at this screenshot in isolation it doesn't look that massive, but inside the editor it's HUGE. Here's the Major Third with the same footprint:

major third

Here's Major Third, rounded to 2 digits:

major-third-rounded

Here's how master looks in the same footprint:

master

@karmatosed can you take another look?

Contributor

jasmussen commented Mar 22, 2018

I switched to a Major Third instead, see http://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&webfont=&font-family=%27Noto%20Serif%27,%20serif&font-weight=600&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=

The reason being: the H1 which is used for the title, was GIANT in a perfect fourth. Too big. The contrast was nice, but the Major Third seems to be a much better fit for what is essentially the default editor stylesheet. Additionally, I rounded the em values to 2 digits after the comma, with no perceivable change to the sizes.

Screenshot time. This branch, now:

screen shot 2018-03-22 at 11 40 47

Sharing an empty page just to show how big the H1 is, even in the smaller "Major Third" scale which puts the H1 at a 2.44em size. In master. the H1 is currently 2em.

Here's the Perfect fourth, which is even bigger, with a 3.15em size.

perfect fourth

Looking just at this screenshot in isolation it doesn't look that massive, but inside the editor it's HUGE. Here's the Major Third with the same footprint:

major third

Here's Major Third, rounded to 2 digits:

major-third-rounded

Here's how master looks in the same footprint:

master

@karmatosed can you take another look?

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Mar 22, 2018

Member

I do like the larger headers but I totally understand having less changes probably best on this point. I . am happy with any of the options presented so far, the important bit is getting a scale in as that's a really strong foundation.

Member

karmatosed commented Mar 22, 2018

I do like the larger headers but I totally understand having less changes probably best on this point. I . am happy with any of the options presented so far, the important bit is getting a scale in as that's a really strong foundation.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Mar 22, 2018

Contributor

Good thoughts.

Merging this now as it adds a scale. If we, over the weekend, feel this is too big we can easily move to a Minor Third scale which would make the heading size virtually the same as is in master now.

Contributor

jasmussen commented Mar 22, 2018

Good thoughts.

Merging this now as it adds a scale. If we, over the weekend, feel this is too big we can easily move to a Minor Third scale which would make the heading size virtually the same as is in master now.

@jasmussen jasmussen merged commit f00b08b into master Mar 22, 2018

2 checks passed

codecov/project 44.4% (+3.91%) compared to 1e87758
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/perfect-fourth-headings branch Mar 22, 2018

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Mar 27, 2018

Contributor

I'm all for better typography and hierarchy, really appreciate this. Just wanted to suggest that any scale should be adapted to the real use case. Displays are still made of pixels. While some operating systems allow for sub-pixel rounding, ideally any font size value should compute to a value in pixels without decimals. For example, when using 2.441em for the H1, this translates to a computed value of 35.856px (you can see this in your browser's inspector, in the "computed" style tab). So, an actual value of 35.856px is not so ideal because browsers will round it anyway.

Contributor

afercia commented Mar 27, 2018

I'm all for better typography and hierarchy, really appreciate this. Just wanted to suggest that any scale should be adapted to the real use case. Displays are still made of pixels. While some operating systems allow for sub-pixel rounding, ideally any font size value should compute to a value in pixels without decimals. For example, when using 2.441em for the H1, this translates to a computed value of 35.856px (you can see this in your browser's inspector, in the "computed" style tab). So, an actual value of 35.856px is not so ideal because browsers will round it anyway.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment