Use serif system font stack for the editor content

[ellatrix]

Description

See #2782. This PR sets the default font to local serif fonts (just like the current WP editor).
In addition it removes Noto from the docs, as Noto is not even loaded there.

[jasmussen]

Gosh I'm going to miss Noto Serif. Such a pretty font, and really added character to the base stylesheet (that was intended to be overridden by theme stylesheets). Visually this isn't as pretty.

However if @hugobaeta in particular is on board, and if this will make people happy with the speed bump and lack of external resources, then I am okay with this! Thanks for working on it. @karmatosed @mtias any final words?

[ellatrix]

Yeah, I don't like Georgia either. 🤷‍♀️

[mtias]

I personally don't like this switch much. I feel serif's as system fonts are not that well handled. If we really want to drop Noto for weight/performance, I'm kind of ok with just using sans-serif system fonts for the editor content as well. Many good editors use a sans-serif by default.

[ellatrix]

Alternatively we could make a better serif system font stack, similar to the sans serif and monospace stack. E.g. Apple ships some slightly more decent fonts like Palatino and Hoefler Text.

Windows list: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
macOS list: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS

[hugobaeta]

I personally quite like Georgia (regular). It's Georgia bold weight I have a problem with. Maybe we could use a mixed stack for headings and paragraphs. I don't have a lot of bandwidth this week to experiment tho. But next week I could give this a try.

That said, after a little bit of thought, I'm kinda ok with what @mtias suggests, just using the sans system fonts. Maybe what needs to change is how editor styles are taken from themes - could we programmatically extract typeface rules form the active theme style.css (if a editor.css doesn't exist)? Then the fallback would matter less...

[karmatosed]

+1 to system serif

[ellatrix]

How do people feel about Palatino? In that case it would be something like:

font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

Personally I'd prefer Hoefler Text on macOS, but there's nothing similar on other OSs and we'd have to adjust line heights etc. if we combine. 😔 I don't find Palatino that interesting, but it's ok. I agree with @hugobaeta about the Georgia bold, but even if we choose something else for headings (2 stacks we need to make), there's still bold through the strong tag? Maybe not as irritating. Georgia is the closest to Noto. Unless anyone finds another stack, we'll have to work with these options, or use sans serif. 😶

[ellatrix]

Oh, btw, Safari Reader (the distraction free mode in Safari), uses Georgia too.

[ellatrix]

What shall we do here?

[karmatosed]

I think Georgia works.

[jasmussen]

Noto:

Georgia:

Let's walk through the pros and cons of switching to Georgia over Noto. Pros:

• Loads faster
• Is more agnostic as it isn't a separate font
• Perhaps jives better with the idea that this is a default editor style, and that in the future actual theme styles are encouraged to replace this

Cons:

• Only loads a little faster
• Loses a lot of identity and personality in the process
• Changes lineheights across the board, so we'll have to be mindful of any spacing adjustments

I really like Noto, as it feels very "WordPress brand compatible". But I also appreciate the flipside of the coin. If we switch to Georgia I'll take a stab adjusting font-sizes and line-heights to look their best, if need be.

[karmatosed]

Could we see what Georgia looks like in a PR, I think that would be a solid step?

Changes lineheights across the board, so we'll have to be mindful of any spacing adjustments

The above is a bit of a concern I admit.

[karmatosed]

As we closed this issue, lets close the PR.