Font size: Why not using relative units (em or %, for example)?

[webmandesign]

Issue Overview

Using Gutenberg 2.7.0

From what I can see right now, the Paragraph, Quote and Pullquote blocks are using pixel units for setting up font sizes. This doesn't seems to be correct approach and I suggest we use relative units there, such as em or % instead. Relative units should be much more compatible with any theme.

Current Behavior

Example styles from current gutenberg/core-blocks/paragraph/style.scss:

p {
	&.is-small-text {
		font-size: 14px;
	}
	&.is-regular-text {
		font-size: 16px;
	}
	&.is-large-text {
		font-size: 36px;
	}
	&.is-larger-text {
		font-size: 48px;
	}
}

Expected Behavior

Use relative units:

p {
	&.is-small-text {
		font-size: .875em;
	}
	&.is-regular-text {
		font-size: 1em; // This class is actually redundant I think...
	}
	&.is-large-text {
		font-size: 2.25em;
	}
	&.is-larger-text {
		font-size: 3em;
	}
}

Possible Solution

Change the font sizes in relevant .scss files to em units calculated with 16px base font size.

[webmandesign]

Here is list of affected files I've found:

• gutenberg/core-blocks/paragraph/style.scss
• gutenberg/core-blocks/quote/style.scss
• gutenberg/core-blocks/pullquote/style.scss
• And possibly even gutenberg/core-blocks/pullquote/editor.scss

[karmatosed]

Thanks for exploring this. Historically, discussion has been back and forth on relative and other variations of style sizes. Ultimately it comes down the predictability problems with measures like em and %, even with the slightly more precise rem. I'll leave open for other inputs but this is something consciously decided to do because of those issues.

[webmandesign]

@karmatosed
I'm not sure what you mean by "predictability problems". In my opinion, using relative units is always better then forcing a specific pixel size.

A lot of themes actually allow for font size setup. This is usually set on the HTML root or body. If a user decides to rise the font size on their website from default 16px to 18px, for example, the pixel-defined sizes in Gutenberg would only make small font size unproportionally small and the is-regular-text CSS class would become pretty confusing. What does it even mean the is-regular-text font size? ;)

[webmandesign]

Surely, I'll wait for other opinions. Thanks for such fast reply @karmatosed!

[chrisvanpatten]

I think px is reasonable as a default, if only because themes are likely (and should be encouraged) to override it anyway. Ultimately it should be up to themes not only what their base font size is and the units you'd like to use, but also the relative scale between the predefined sizes. Your theme's .is-small-text may be bigger than my theme's .is-small-text.

Relative sizes are certainly better, but it could create unexpected issues for themes (especially older ones) built without relative units in mind.

I expect this is further down the road, but as the core themes (and arguably _s) update for Gutenberg compatibility I think it'd be great to have custom font sizes with relative units be a piece they are encouraged to include, as those themes are often used as a baseline for those learning about WP theme development.

[webmandesign]

@chrisvanpatten

Thanks for your opinion!

Relative sizes are certainly better, but it could create unexpected issues for themes (especially older ones) built without relative units in mind.

Well, this can be turned the other way around too: using pixel unit sizes will create issues with more recent themes using scale-able relative units. 😃
Anyway, I'd say even the old themes with pixel font sizes may have issues with current implementation as the Gutenberg predefined sizes could not match the theme ones…

For me this is still win for relative units ;)

[danielbachhuber]

Hi @webmandesign,

It seems like changing the current implementation is unlikely at this time. If you'd like to make a stronger case, I'd suggest performing and sharing some research on:

• Benefits of relative units over pixels.
• How existing WordPress.org themes would react to this change (a sample of a couple dozen would be great).
• Any potential downsides of using relative units.

[amir2mi]

What do you think about adding a setting for this?
"Enabling this feature depends on what a developer chooses"
If a developer wants to use relative font size it can be done with a configuration in the theme functions.php file.

[Azragh]

@amirmp3 @danielbachhuber You should at least let developers omit the "size" parameter in add_theme_support('editor-font-sizes'), so that no inline styles with fixed pixel values are present in the editor. Or maybe a custom function / filter / hook for developers to remove them? The problem is, they simply break spacings & font sizes on mobile previews if you decided to use relative units and have a smaller root font size on mobile devices. At the moment you'd have to overwrite your own CSS rules with !important - this feels redundant and can lead to problems in the cascade. My current solution is to calculate the corresponding pixel values matching my em's in the stylesheet and then set them in editor_font_sizes. But this is tidious, error-prone and still breaks mobile previews. Without those inline styles everything would be fine for me.