Relative Font Size

[acnorrisuk]

Issue Overview

In the current version of Gutenberg (1.0.0) changing the font-setting in the paragraph block results in a specific pixel size being set. This will cause issues on smaller screens as any media queries set by a theme author won't have any effect on the font-size.

A better approach would be to set the font-size in ems or rems which would allow the font-size to scale based on the theme author's styling.

[iamgabrielma]

This seems to be coming from here:

gutenberg/editor/modes/visual-editor/style.scss

Line 9 in 7a19916

font-size: $editor-font-size;

, as takes $editor-font-size: 16px; from _variables.scss file, and only affects "paragraph", any other block is unaffected and em applies automatically instead of px.

Changing that line from font-size: $editor-font-size; to font-size: 1em; fixes the issue, but I'm not sure if this is the right way to go about this, or is better to create another variable on _variables.scss for this.

Example:

[ellatrix]

I agree with the general issue here. If the user's intention is to have slightly bigger or smaller text, and one switches themes or devices, the pixel is not a great unit of measurement. I'd rather see a control where the default is 1 and you can change the magnitude relative to the paragraph's font-size. Not sure how that is done best in CSS. em is not great as it's relative to the parent, whereas we want it to be relative to the normal paragraph size. rem is not great for the same reason.

[gonzomir]

I just found out that even without touching the font size setting on paragraphs all <p> tags in the output contain inline style with font-size: 16px;. I can't stress how wrong is that, this completely ruins the typography of the theme I'm testing on. The font size setting should not use pixels, but relative sizes like small, normal, medium, big, large, huge, applied with classes, so that themes can overwrite the exact font size according the their typographic scale.

[notnownikki]

Would it be acceptable to have an inner span with the style on it? Then it would pick up the pixel size from the parent paragraph.

Example of what I mean here: http://notnownikki.com/size.html

[karmatosed]

There is exploration of different fonts happening in #2782 and I think it's ok to focus on that for now. We can always reopen.