Skip to content
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

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

Closed
afercia opened this issue Mar 2, 2018 · 7 comments · Fixed by #6218
Closed

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

afercia opened this issue Mar 2, 2018 · 7 comments · Fixed by #6218
Labels
[Type] Enhancement A suggestion for improvement.

Comments

@afercia
Copy link
Contributor

afercia commented Mar 2, 2018

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
Copy link
Contributor

For 2. there is PR #3444 coming soon.

@rileybrook
Copy link

rileybrook commented Mar 3, 2018

For 1. I have prepared PR #5362

@karmatosed
Copy link
Member

karmatosed commented Mar 5, 2018

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
Copy link
Contributor

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:

screen shot 2018-03-07 at 09 38 19

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
Copy link
Contributor Author

afercia commented Mar 7, 2018

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 🙂

@jeffpaul jeffpaul added the [Type] Enhancement A suggestion for improvement. label Mar 8, 2018
@afercia
Copy link
Contributor Author

afercia commented Mar 16, 2018

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
Copy link
Contributor

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

jasmussen pushed a commit that referenced this issue Apr 17, 2018
Minimum font size is 13px, or $default-font-size. This PR addresses that, and fixes #5359.
jasmussen added a commit that referenced this issue Apr 18, 2018
Minimum font size is 13px, or $default-font-size. This PR addresses that, and fixes #5359.
nuzzio pushed a commit to nuzzio/gutenberg that referenced this issue Apr 25, 2018
Minimum font size is 13px, or $default-font-size. This PR addresses that, and fixes WordPress#5359.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants