1415126 - the p.summary fontsize of these JavaScript Guide pages is too large. it's illegible.

Status: RESOLVED FIXED

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

Description

[prunemaster]

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: unspecified
 Technical Contact: 

:: Details

The font family is Open Sans.  The body font size is 16px.


The p.summary headers are 22px (1.37rem).

Please reduce this.  It's in-your-face TOO LARGE.  Like standing directly in front of a billboard.

To make it worse, the font's natural word-spacing and letter-spacing at that size is illegible.  All spread out like a 1950 telegram.

I tried tweaking {word-spacing:+.04em; letter-spacing:-.04em} to compress the words, and separate them from each other.  That somewhat improves it.


Examples.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators


Please.  It makes me wince to arrive on these pages.  I can't read it.  This layout doesn't work.

PS.  double-space after period, plz.

Comment 1

[Rayann Tedds]

I would like to work on this bug as part of my university coursework. Please could I be assigned to it and given extra information? Thank you!

Comment 2

[Stephanie Hobson [:shobson]]

We've reduced the font size to 20px as part of some upcoming typography changes. We have also restricted the line length to make it easier to read. You can see this today if you log in and sign up to be a beta tester: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Be_a_beta_tester 

The change should be live for all users at the start of next week.

The industry standard is one space after a period, we will stick to the industry standard:
http://www.quickanddirtytips.com/education/grammar/two-spaces-after-a-period
http://theworldsgreatestbook.com/how-many-spaces-after-a-period/
http://www.slate.com/articles/technology/technology/2011/01/space_invaders.html

Sorry Rayann, the work has already been completed.

Comment 4

[prunemaster]

https://prunemaster.github.io/snippets/MOZ/moz-docs-spacing-orig-plus-3-tweaks.png

This link is a composite screenshot of the tweaks I made last week of the moz CSS docs page.
Each example builds upon the one above it.  In top-down order:

1.  the present CSS docs oversize text.  as-is, unchanged.
2.  &nbsp; added after each period.  (&nbsp; plus <sp>)
3.  word- and letter-spacing tweaks.
4.  Arial font.  (from 2nd choice in font-family list)

Comment 5

[prunemaster]

https://prunemaster.github.io/snippets/MOZ/ms-email-excerpt.png

Let me show you something.

Here's an excerpt from an MS Win10 Insider Preview email I just received, just now.
Each of the paragraphs are easily discernabe from the next.  Very easy to see.
But their content.  There's no way to glance upon a paragraph and take it in.
Why not?  Because each paragraph appears to be a single unpunctuated run-on sentence.
One unreadably long sentence.
My eyes won't struggle to discover where sentence breaks might exist in that.  If they even do.

It's too hard to read.
I never read MS Win10 Insider Preview emails because of it.

Honestly.  Try reading just that excerpt and see.

Comment 6

[Mike Hoye [:mhoye]]

Hello, everyone - 

This is a gentle reminder that Bugzilla is our professional working environment as much as it is our issue tracker, and that abusive or patronizing comments of any kind will not be tolerated. 

I encourage you to read the Etiquette and Contributor Guidelines:

https://bugzilla.mozilla.org/page.cgi?id=etiquette.html

... and to take them to heart. We grant a broad deference to the the experience and expertise of our modulea owners and peers in their decision making here, and absent extremely compelling evidence - a bar that matters of taste will not generally meet - their decisions, like this one, will stand.

Thank you.

Comment 7

[Don Mullis]

What is the status of this bug, please?

It is marked "closed", and comment from Stephanie above suggests it should be live by now, but when I just now (Tue Nov 21 09:10:55 PST 2017) refresh the page:
    https://developer.mozilla.org/en-US/docs/Web/JavaScript
and use Inspector to show Computed properties of the word "JavaScript", I see "36px".

Turning to the change log,
    https://github.com/mozilla/kuma/pulls
a search for "1415126" draws no hits.

How in general should we relate status as reported on bugzilla with commits to github.com/mozilla/kuma ?

Really looking forward to seeing Stephanie's change to 20px go live ...

Comment 8

[Don Mullis]

(In reply to Don Mullis from comment #7)
> What is the status of this bug, please?
> 
> It is marked "closed", and comment from Stephanie above suggests it should
> be live by now, but when I just now (Tue Nov 21 09:10:55 PST 2017) refresh
> the page:
>     https://developer.mozilla.org/en-US/docs/Web/JavaScript
> and use Inspector to show Computed properties of the word "JavaScript", I
> see "36px".
> 
> Turning to the change log,
>     https://github.com/mozilla/kuma/pulls
> a search for "1415126" draws no hits.
> 
> How in general should we relate status as reported on bugzilla with commits
> to github.com/mozilla/kuma ?
> 
> Really looking forward to seeing Stephanie's change to 20px go live ...

Sorry, I overlooked the "p.summary" bit of context.

Would still appreciate guidance on bug tracking.

Comment 9

[Stephanie Hobson [:shobson]]

Hi Don,

It is live now for our beta testers. The change was made as part of the typography changes to improve article scanability. That work is tracked under bug 1414107.

It took us longer than expected to get the change to beta users so we have not rolled it out to all users yet. If there are no bugs filed by beta users we might make it available this week. Because of the Thanksgiving holidays, we might decide to wait until next week. It does not seem like a good idea to turn on new features and then leave for 4 days ;)