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 :)