RFC: new font on new docs - tiring to eyes

[Graziel]

New font on new site is hard to read, i cannot point to better solution nor i fail to give whats wrong with it just opening issue to RFC

[ADmad]

Many others on slack/IRC have complained about the same.

[ADmad]

The combination of font, weight, letter spacing used is definitely not very good for readability.

[cercos]

Yes. Doesn't read well at all.

[markstory]

Is it the body typeface or the titles?

[htstudios]

The body font with the x in the w is not for floating text imho.

[cercos]

The body typeface, should just be a generic font (Verdana, Tahoma) at least for the docs.

[ionas]

I did originally not wanted to supply suggestions and concerns, however while I see the issue I really don't want to read Verdana and Tahoma every day.

• I still think the paragraph/floating-text font should be part of the corporate identity. Wherever the current body/paragraph/floating-text font (I think it might be Raleway seeing that "w-x") is being used and/or being used for body/paragraph/floating-text it should be switched.
• I realize it should not be a "quick-fix" post-re-launch. Take your time and figure out a font that matches the new corporate identity and works in other places. Just the docs are a very good place to figure out if its good for long and many paragraphs It can then be re-used across whatever (basically any "real content" like presentation slides, print stuff etc, that contains body/paragraph text and is not source-code/mono space)
• The font needs to supply a ton of characters in utf8 space, specially CN, JA, Cyrillic (maybe even emoticons) to have a good future.
• The font needs to run cross-browser and render similar or almost same. That's harder to do than it looks like
• The font should render well on high-dpi and low-dpi. Again a problem.
• The font should read well on paper, too. Black on White, White on Black etc.

If fonts were that easy Apple had not done San Francisco and Google had not done Droid Sans.

I'd stick with very much used sans-serif. It should have enough different weights and variants.
Some ideas (I am not endorsing typekit, these fonts are floss-based):

1. Github's Font Stack: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   ^ Coders are used to this and will feel at home. The sheer scale of GH means it is tested across multiple devices, setups etc. See the argument for Droid Sans below. It also supports emoticons (say for future use on discourse.cakephp.org).
2. Open Sans https://typekit.com/fonts/open-sans/n4/wfs ("Open Sans",Helvetica,Arial,sans-serif)
   ^ IMHO renders most beautiful for a FLOSS sans-serif and does not tire your eyes.
3. Source Sans Pro https://typekit.com/fonts/source-sans-pro/n4/wfs
   ^ Great cause we can couple it with Source Code Pro
4. Droid Sans https://typekit.com/fonts/droid-sans/n4/wfs
   ^ Consider it because it is made to run on all kind of different devices and in all kind of different conditions

[markstory]

@ionas I'll check in with the designer we used and see what he thinks a good replacement for the body copy would be.

[markstory]

After checking in with the designer he had a recommendation on how readability could be improved without replacing the typeface. I've pushed the suggested change to the 3.x docs. If this improves the situation for folks, I'll update all the other branches as well.

[htstudios]

• The slight increase in weight is great.
• Changing letter spacing on body/float/paragraph as far as I know breaks its relation to its kerning setup. I'd not do that.

[josegonzalez]

This looks good to me now, though I'd personally change the headers to font-weight: 300.

[markstory]

@josegonzalez I'll give that a shot tonight.

[ADmad]

The -1px letter-spacing for heading tags is still problematic for me, especially on the API docs.

[markstory]

Headlines are now using a heavier weight and no letter spacing now.

[ADmad]

Right, which makes them very difficult to read, at least for me.

[ADmad]

Removing the letter-spacing:-1px from heading tags resolves the problem.

[markstory]

@ADmad I did remove letter-spacing: -1 from the headings. 😄

[josegonzalez]

@markstory i think he means it's not applied everywhere. I would say ship it everywhere now that we've settled on something good for the 3.x docs.

[ADmad]

Yeah it still needs to be removed from stylesheet of API docs.

[ADmad]

I opened cakephp/cakephp-api-docs#46 for it.

[markstory]

@josegonzalez I'll update the other docs versions and api/bakery tonight.

[markstory]

Closing this as the body font change, and headline changes have been applied to the book, api and bakery.

If there are more readability issues let me know.