Improve base typographic rhythm

[iamthomasbishop]

When doing some investigation during some recent Headings font work, I noticed that our base typographic rhythm is a bit cramped. I compared against the following:

• Core GB: 16 / 1.8
• Reader (web/mobile): 17 / 1.6
• iOS Reader Mode: 17 / 1.6
• Mobile GB (current): 16 / 1.375
• Mobile GB (proposed): 16 / 1.6 (changed from original post)

For a visual reference, set on a canvas width of 375:

~I'm tempted to defer to what Reader web/mobile has in terms of line-height, but considering the base font-size is 16 in our case, the 1.5 line-height ends up being a nice round 24pt, which aligns really well with our 16pt grid and our Block top/bottom margins (12pt).~

Update: To align with Reader (web/mobile) and iOS Reader Mode, as well as a slightly more breathable line-height, the new spec should be:

• Base font-size: 16pt
• Base line-height: 1.6

This should also allow for a nice rhythm agnostic to font-size (think dynamic type).

Punch List

• [ ] Change base line-height of paragraph text to ~1.5~ 1.6. If we have to define a static px value, let's go with 26. The formula is: (font-size) * (line-height multiplier) = (line-height value), rounded up to the next full point.

Bonus points if we can set up a nice type system that scales well with Lists, Quotes, etc. when we get to those blocks.

[kjellr]

My general rule of line height: pick what seems to be just comfortable enough, and add a point. 🙂

16 / 1.5 seems a bit too tight to me, and I agree that 1.8 might be too much here. Can we try working out a nice round number closer to 1.6?

[iamthomasbishop]

My general rule of line height: pick what seems to be just comfortable enough, and add a point.

That's a nice rule 😄 While I was hoping to come up "one standard to rule them all", I'm not sure that "because it aligns to our 8/24 grid" is good enough reason to stick to that pipe dream – especially considering dynamic type sizes on iOS/Android and such.

1.6 does feel pretty good, even if it's not exactly on the 8pt grid. Considering this ratio is also in-line with what we're doing on Reader – and upon reviewing what Apple does for iOS "Reader Mode" (also 1.6 ratio) – I'm going to adjust the proposal to 1.6.

Thanks for the feedback/insight! I think this is also something that we should feel comfortable pushing upstream to Core. // cc @jasmussen

[iamthomasbishop]

Updated spec, per discussion:

• Base font-size: 16pt (no change)
• Line-height: 1.6 (changed from 1.5)

Preview for visibility:

Going to update the original post.

[jasmussen]

Created https://github.com/WordPress/gutenberg/pull/13765, let me know if I got that right!

[SergioEstevao]

@iamthomasbishop is this still a thing we want to do?

[iamthomasbishop]

@SergioEstevao Yes, I would still like to do this — it will help a lot with readability and consistency.

[hypest]

Will have a look during this HACK week.

[iamthomasbishop]

I just wanted to note that we are considering a switch to using the system-default New York serif on iOS (the "new" default serif font as of iOS 12). No change on Android, as Noto Serif is already the system-default serif font.

I recently documented the block contents type scale and the "neutral" type scale for UI typography that we might also want to look into while investigating typography. Obviously this hasn't been updated for to account for the upcoming iOS change but might help as a reference for the time being.