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

RESOLVED FIXED

Status

Mozilla Developer Network
Design
P1
normal
RESOLVED FIXED
13 days ago
3 days ago

People

(Reporter: prunemaster, Assigned: shobson)

Tracking

({in-triage})

Details

(URL)

(Reporter)

Description

13 days ago
:: 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.
Component: General → Design
Priority: P5 → --
Product: Developer Documentation → Mozilla Developer Network

Comment 1

7 days ago
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!
Assignee: nobody → shobson
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Keywords: in-triage
Priority: -- → P1
(Assignee)

Comment 2

7 days ago
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.
Status: ASSIGNED → RESOLVED
Last Resolved: 7 days ago
Resolution: --- → FIXED
(Reporter)

Comment 4

6 days ago
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 hidden (offtopic)

Comment 6

3 days ago
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.
You need to log in before you can comment on or make changes to this bug.