1074381 - Largest font size in reader mode is still too small

Status: RESOLVED DUPLICATE of bug 1134441

(Firefox for Android Graveyard :: Reader View, defect)

Description

[relan]

Attachment: Screenshot

User Agent: Mozilla/5.0 (Android; Tablet; rv:32.0) Gecko/32.0 Firefox/32.0
Build ID: 20140923174357

Steps to reproduce:

1. Switch to the Reader mode.
2. Select the largest font size.


Actual results:

Font size is set to something about 12pt. This can hardly be called "large".


Expected results:

Expected larger font size for more comfortable reading. 16pt or even 18pt would be much better. I'm using Sony Z2 Tablet (10.1 inch screen with 1920x1200 resolution).

Comment 1

[Aaron Train [:aaronmt]]

The largest size is set to 22px http://dxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/aboutReader.css which is 16pt

Comment 2

[relan]

Attachment: Photo

Thanks for quick reply.

I've printed a paragraph of text in different sizes on a sheet of paper and compared it to the text on the screen. It looks more like 12pt than 16pt (please see the photo). Anyway, particular numbers are not that important (maybe my text processor is fooling me). Larger font size would significantly improve my reading experience.

Comment 3

[Aaron Train [:aaronmt]]

Yuan/Lucas any thoughts?

Comment 4

[Lucas Rocha (:lucasr)]

Yeah, we could try making the available font sizes a bit bigger. Maybe this is a tablet-only issue though?

Comment 5

[relan]

Attachment: Phone and tablet photo

> Maybe this is a tablet-only issue though?

Largest font size looks the same on my phone (LG Nexus 4) and tablet (just as expected). Please see the photo.

Comfortable font size depends on distance from your eyes to the screen. I think people keep phones closer than tablets, so this bug is more relevant for tablets.

Comment 6

[:Margaret Leibovic]

antlam, do you want to look at the font sizes we use in reader mode, and see if we should update them? Here are the values we're currently using:
http://dxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/aboutReader.css#110

Maybe 2px is too small a step between sizes? We should also probably be using pt, not px for text sizes.

Comment 7

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #6)
> antlam, do you want to look at the font sizes we use in reader mode, and see
> if we should update them? Here are the values we're currently using:
> http://dxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/
> aboutReader.css#110
> 
> Maybe 2px is too small a step between sizes? We should also probably be
> using pt, not px for text sizes.

Hm interesting numbers...

Just trying to get some context - what was the process behind starting at 27px? 

Also, do we change line-height based on font size as well? I've tested it on my N5, doesn't look like we currently do.

Comment 8

[:Margaret Leibovic]

(In reply to Anthony Lam (:antlam) from comment #7)
> (In reply to :Margaret Leibovic from comment #6)
> > antlam, do you want to look at the font sizes we use in reader mode, and see
> > if we should update them? Here are the values we're currently using:
> > http://dxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/
> > aboutReader.css#110
> > 
> > Maybe 2px is too small a step between sizes? We should also probably be
> > using pt, not px for text sizes.
> 
> Hm interesting numbers...
> 
> Just trying to get some context - what was the process behind starting at
> 27px? 

You'll have to ask Ian! I bet it was kinda arbitrary.

> Also, do we change line-height based on font size as well? I've tested it on
> my N5, doesn't look like we currently do.

Yeah, I don't think we do.

Comment 9

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Pulling from lots of articles on Responsive Type right now to determine better values in response to newer devices and screen resolutions, stay tuned.

Comment 10

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to resver from comment #5)
> Created attachment 8498098 [details]
> Phone and tablet photo
> 
> > Maybe this is a tablet-only issue though?
> 
> Largest font size looks the same on my phone (LG Nexus 4) and tablet (just
> as expected). Please see the photo.
> 
> Comfortable font size depends on distance from your eyes to the screen. I
> think people keep phones closer than tablets, so this bug is more relevant
> for tablets.

I agree - to adjust for the distance from the eye which the device is typically held, we should increase font size and line-height for Tablets specifically.

I talked to Ian about this, he determined a default font-size to line-spacing relationship (which is how I wanted to approach this.. same values I was going to suggest actually!) that I think works well so we should keep it. 

Instead, I'd like to clean up the values for font-size a bit and offer separate solutions for Tablet and Mobile.

Mobile: 
Let's keep it the same.

Tablet:
Content Font sizes

1) 16px
2) 18px
3) 20px
4) 22px
5) 24px

Finally, we should also try 1.5em for line-height on Tablets to account for the larger font size.

Comment 11

[:Margaret Leibovic]

This sounds like a good plan to me. I have a lot on my plate right now, so I'm marking this as a mentor bug, but I might find time to do it myself if nobody beats me to it :)

Comment 12

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Sounds good!

Comment 13

[relan]

(In reply to Anthony Lam (:antlam) from comment #10)
> Instead, I'd like to clean up the values for font-size a bit and offer
> separate solutions for Tablet and Mobile.
> 
> Mobile: 
> Let's keep it the same.
> 
> Tablet:
> Content Font sizes
> 
> 1) 16px
> 2) 18px
> 3) 20px
> 4) 22px
> 5) 24px

Only 2px larger than now? IMHO such increase is not enough.

I'd suggest the following approach. Do you have statistics of how many people use each font size in reader mode? Ideally it should have Gaussian (normal) distribution, i.e. most people using _medium_ size, less using _smaller_ or _larger_ sizes, and few using _smallest_ or _largest_. If, for example, it appears that _largest_ is used much more frequently than _smallest_ the sizes of _larger_ and _largest_ should be increased to normalize the distribution. In a few iterations you'll figure out ideal font sizes. Or at least they will be statistically well-founded. :)

Comment 14

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to resver from comment #13)
> Only 2px larger than now? IMHO such increase is not enough.
> 
> I'd suggest the following approach. Do you have statistics of how many
> people use each font size in reader mode? Ideally it should have Gaussian
> (normal) distribution, i.e. most people using _medium_ size, less using
> _smaller_ or _larger_ sizes, and few using _smallest_ or _largest_. If, for
> example, it appears that _largest_ is used much more frequently than
> _smallest_ the sizes of _larger_ and _largest_ should be increased to
> normalize the distribution. In a few iterations you'll figure out ideal font
> sizes. Or at least they will be statistically well-founded. :)

Hey [e-mail]

Good points. I'm just suggesting this as a starting point. I've tested this on our devices around the office as well. Rest assured, this was not decided on arbitrarily. :)

2px bump basically jumps everything up one scale, and thereby removes the smallest one whilst creating a new (largest) one. If this isn't enough, we could try one more scale up. I'd rather not over rotate on this issue here and so incremental iterations (as you suggested also) would be best.

Comment 15

[relan]

I understand your point. Defaults should be changed carefully of course.

But the more we discuss this issue the clearer it becomes that "five sizes fit all" approach does not work very well here. Why not replace 5 fixed options with something more flexible? Instead of 5 buttons Firefox can have only two: increase and decrease. Optionally, a third button resetting the font size to default can be added.

Pros:
— Everyone will be able to select any font size, even extremely large.
— Smaller step can be used for better ajustment.
— Default font size can be left the same as it is now, so the majority of users will have flawless upgrade experience.

Cons:
— A bit more changes to reader code will be required.

This approach works very well for desktop Firefox, BTW.

Comment 16

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Good points, [e-mail]! 

Those are definitely some of the things I've been working on (though not in the scope of this bug) and I've been in conversation with the designers on that end of the product as well.

That being said, we should limit the scope of this bug. I don't want to block this simple improvement on that larger conversation here. :)

Comment 17

[relan]

> I don't want to block this simple improvement on that larger conversation here.

Looks like this improvement isn't that easy.

One more suggestion. Add a base font size parameter (or two different ones for phones and tablets) that can be tuned via about:config. You can still have the same simple UI with 5 sizes, but they would mean base-2, base-1, base, base+1, base+2. Advanced users would be able adjust font size to their taste, those who don't care won't notice any changes. Everyone's happy.

Comment 18

[[e-mail]]

I was thinking the same thing. This is my major issue. The font size of the reader mode is too small.

Samsung's Galaxy built-in web browser allows way larger font size. iOS Safari supports even larger font size. Please just add simple [smaller] [larger] buttons (like Galaxy and iOS) instead of fixed 5 size buttons. 

I tried to change the size using about:config, but there seemed to be a bug setting size bigger than "5" only made the head bigger but made actual body smaller.

Also, please remove the width restriction. Android tablets are very wide in landscape, but the reader mode seems to have fixed width, wasting like a half of the screen real estate. Let users choose the width.

Comment 19

[:Margaret Leibovic]

I'm working on updating the reader mode content CSS for bug 1117258, and I think we should see if we can address this problem as part of that.

antlam has also been working on some updated reader mode controls for bug 1120004, so maybe as part of that we can consider replacing the 5 set font sizes with a generic "smaller"/"larger" buttons.

On desktop this will probably be less of an issue, since there are also zoom controls in the browser chrome that let you set font size.

Comment 20

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #19)
> I'm working on updating the reader mode content CSS for bug 1117258, and I
> think we should see if we can address this problem as part of that.

Hopefully! I definitely considered this bug when cleaning up the current designs

> antlam has also been working on some updated reader mode controls for bug
> 1120004, so maybe as part of that we can consider replacing the 5 set font
> sizes with a generic "smaller"/"larger" buttons.

Yep! I've got designs for just generic +/- buttons over 5 sizes. So this might be a reason we lean towards +/- again

Comment 21

[relan]

While the new reader mode is in the works, I've made a temporary solution I'd like to share:

a) install the Stylish extension (https://addons.mozilla.org/firefox/addon/stylish/);
b) add the Readability style (https://userstyles.org/styles/109862/readability).

With this style max font size in 24pt, margins on tablets are reduced, line spacing fixed.

Comment 22

[:Margaret Leibovic]

This should be fixed by bug 1134441.