Gutenberg: CSS: audit the font-size and consider a bigger minimum size

[afercia]

Scanning the codebase for occurrences of font-size: I've noticed a few things worth considering:

1
there are a few occurrences of font-size: 13px; if I'm not wrong it would be better to use the variable $default-font-size

2
the cover image h2 uses font-size: 24pt;, ideally pt shouldn't be used as it's a unit measure not meant for screens and meant for print instead. Unless I'm missing something. Should be replaced with an equivalent value in px or, better, in e.

3
ideally, where possible, font-size values different from the default $default-font-size and expressed in px should be replaced with variables or values expressed in em. This way changing a variable or changing the default would allow to change them in a solid, centralized way.

4
there are a few cases of font-size values smaller than 13px, typically 12px mainly used for descriptions / suggestions. I'd tend to think 12px is too small and, with today's devices and screens, there shouldn't be font sizes smaller than 13px. This should be evaluated on a case by case basis though.

I understand 3 and 4 are a bit subjective 🙂 but worth discussing them. If there are no objections I can prepare a PR for 1 and 2. /cc @jasmussen

[samikeijonen]

For 2. there is PR #3444 coming soon.

[rileybrook]

For 1. I have prepared PR #5362

[karmatosed]

I would be very keen to see 14px be our minimum baseline for font sizes. 13px is still too small and can throw out any typography scale. What I would like to see tried is 14px for smaller and 16px for the basic text line.

[jasmussen]

I tend to disagree with the font size change from 13 to 14, not because I'm against large text, but because it's not quite as easy as simply changing a variable. It affects every single UI bit by simply being larger. This affects translations, notably German which is usually 20% wider. It also affects the mobile UI, where it gets harder to fit elements inside.

Here's a very quick and dirty and hacky screenshot:

Additionally, because 13px remains the default font-size in WordPress, it makes it both technically more difficult to bump this font size just for Gutenberg (as we have to override styles), but in a way it also makes the two not feel _connected_ because of the size discrepancy.

As noble as it is to want to improve the baseline legibility of everything, it feels like the pragmatic approach is not a blanket _bump all base font sizes_ PR, but rather evaluate each UI element on its own for legibility, and then potentially add an additional font size for said UI.

For example WordPress itself uses a 14px font size for main sections in the navigation sidebar (Posts), and 13px font size for sub-items (All Posts, Add New, etc.). This seems like the pragmatic approach, bump the 13px font size _wherever it has the biggest impact_, but not necessarily everywhere.

I do however agree that 13px should be the absolute minimum. We should not have instances of 11px or 12px font sizes.

[afercia]

Although I'd love to see a bigger font-size everywhere, I'd agree that's something that should be evaluated for WordPress as a whole. Probably something to consider for the future, given also the challenges to face.

I'd rather focus on trying to increase text smaller than 13px, where it makes sense.

I do however agree that 13px should be the absolute minimum. We should not have instances of 11px or 12px font sizes.

Yes, that 🙂

[afercia]

In the 2.4 release notes https://make.wordpress.org/core/2018/03/14/whats-new-in-gutenberg-14th-march/ I read:

Bump minimum font-size to 13px. #5362

This is not entirely correct, as there are still a few places where the font size is 12 pixels and #5362 just made a more consistent usage of the default font size variable. /cc @mtias

[jasmussen]

Lemme take a quick stab at nuking any instances of <12px fonts :)