948108 - The font and color scheme after redesign makes reading uncomfortable

Status: RESOLVED DUPLICATE of bug 924767

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Yeuk Hon Wong [:yeukhon]]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
Here is an example: https://developer.mozilla.org/en-US/docs/Web/Reference/Events

A couple issues related to how comfortable my eyes are after re-design:

1. Blue and white is unconformable. Please conduct a second UX review on the color scheme? The original red color looks more comfortable.

2. The font weight is smaller than the previous theme. It is harder to read on a larger monitor.

3. I don't have the proper term, but the sharpness of the font is too sharp. The previous design is more a bold experience. With the white background it is harder to read.

4. Keywords like abort in "red" is hard to read. It, again, burns reader's eyes.

What problems would this solve?
===============================
I appreicate the work but I think we really need to consider the overall UX here.

Who would use this?
===================
.

What would users see?
=====================
.

What would users do? What would happen as a result?
===================================================
.

Is there anything else we should know?
======================================

Comment 1

[Pierre-Yves Gérardy]

The font size of the code examples is too small in Mac OS X. Changing from Consolas to Monaco, or setting the font size to 120 % fixes this. Consolas is installed by MS Office on Macs. Inverting the font order in the CSS rules would fix this.

The contrast of the code examples is even more problematic than for the main text. Setting the main font color to pure black improves the overall readability. So does switching to good old Verdana, alternatively.

Another thing: the fonts for the code snippets and the <code> tags inline in the main text are not consistent. Having a light blue background for the inline text (#f2f2ff) makes it stand out better too.

Comment 2

[skomorokh]

Attachment: Horizonal scrollbars if a large font size is set.

Ha! Just noticed this as I happened to read a bug about font size. How kismet. I considered creating a new bug but it's a related issue and fixed in the same place.

I've got it set to 18 and things are unhappy. Some kinda em/px mismatch somewhere. 

Just in case, I fired up chrome with a fresh profile (I do love that --temp-profile parameter on the wrapper, I should really make one for FF some day) and zoomed in. Same problem there.

Comment 3

[Yeuk Hon Wong [:yeukhon]]

(In reply to skomorokh from comment #2)
> Created attachment 8345466 [details]
> Horizonal scrollbars if a large font size is set.
> 
> Ha! Just noticed this as I happened to read a bug about font size. How
> kismet. I considered creating a new bug but it's a related issue and fixed
> in the same place.
> 
> I've got it set to 18 and things are unhappy. Some kinda em/px mismatch
> somewhere. 
> 
> Just in case, I fired up chrome with a fresh profile (I do love that
> --temp-profile parameter on the wrapper, I should really make one for FF
> some day) and zoomed in. Same problem there.

You are on the wrong place friend. This is about MDN redesign, not about firefox or bugzilla.
Thanks.

Comment 4

[tinyxl1]

Found this while trying to add my own input, basically , Cant find how to fix the colors on new site re-design, would like old color scheme of original MDN - especially the Javascript tutorials. This hurts my eyes immensely, (also you might want to make this more accessible to the layman, finding the re-design feedback form was a game in itself!) An option to set forum color themes would help. Funnily enough THIS pae of the site has a MUUUUCH better theme than the main MDN one's.  Love Mozilla love you guys for all the work!