1137237 - [UX] Improve typography in reader view on Windows

Status: NEW

(Toolkit :: Reader Mode, defect, P3)

Description

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Attachment: rv-windows.png

On non-hidpi Windows, where most of our users are, reader view looks a lot worse than on Mac. This is mostly due to how Windows/ClearType is rendering fonts.

We should consider using a slightly different stylesheet on Windows.

Specifically I'm concerned about the following:
- Serif font looks extremely thin and sometimes breaks off completely
- Bold serif font in title has very high heavy/thin contrast
- Body text in sans-serif font looks very heave (that's actually also an issue on non-hidpi Mac)

Comment 1

[Michael Maslaney [:mmaslaney] ([e-mail])]

(In reply to Philipp Sackl [:phlsa] please use needinfo to make me respond from comment #0)
> Created attachment 8569894 [details]
> rv-windows.png
> 
> On non-hidpi Windows, where most of our users are, reader view looks a lot
> worse than on Mac. This is mostly due to how Windows/ClearType is rendering
> fonts.
> 
> We should consider using a slightly different stylesheet on Windows.
> 
> Specifically I'm concerned about the following:
> - Serif font looks extremely thin and sometimes breaks off completely


  •  Replacing Georgia with Times New Roman should help resolve this issue  


> - Bold serif font in title has very high heavy/thin contrast


  •  Same as previously mentioned, replacing Georgia with Times New Roman should help resolve this issue 


> - Body text in sans-serif font looks very heave (that's actually also an
> issue on non-hidpi Mac)


  •  We made need to declare a slightly heaver font-weight in our CSS for sans-serif body copy.

Comment 2

[Ray Satiro]

Attachment: Win7 No ClearType.PNG

I just found out about readerview today when I went to wikipedia in the latest Nightly and saw the reader icon in the location bar. I think it looks great but I have cleartype disabled on that computer. Attached is a screenshot of what it looks like in that case for comparison.
Readerview is set to sans-serif font. Windows 7 x64 120 dpi,
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:39.0) Gecko/20100101 Firefox/39.0
20150304030231