Wordpress-ios: Reader: Readability :)

[roundhill]

I've recently been using the iOS reader quite a bit, and have been struggling to actually read the content. I think my main gripe is the font size and the line height seem too small (I'm also getting old, so we can just blame that too)

But, I think it might be worth an audit to see how it compares to WordPress.com. I find it much easier to read the text, and find the balance between the UI elements on the detail page to be more pleasing (web on the left):

I'd vote to match up the iOS app to the web app there.

cc @mattmiklic @aerych

[aerych]

Should we just use the iPad font-size for the iPhone as well, 16 pt vs 14 pt?

[mattmiklic]

I've recently been using the iOS reader quite a bit, and have been struggling to actually read the content. I think my main gripe is the font size and the line height seem too small
Should we just use the iPad font-size for the iPhone as well, 16 pt

Definitely agreed. I'd really love to do a bigger iteration where we add support for dynamic type in places like this. But just moving up to 16pt as a default base size for body copy is a good idea.

In Calypso, body text is 16pt with a 27pt line height, at both mobile and desktop sizes, in both the list view and full-post view. Let's use that same size in the app for body text. We'd want to make the same change to the My Sites > Blog Posts section as well, since the two sections use similar styles.

[aerych]

Support for dynamic type is high on my wish list. (Behind the other 20 things high on my wish list, but its there!) I don't think it would be terribly difficult to implement and maybe something we could do in an afternoon if we're just talking about the reader detail.

[mattmiklic]

Support for dynamic type is high on my wish list. (Behind the other 20 things high on my wish list, but its there!) I don't think it would be terribly difficult to implement and maybe something we could do in an afternoon if we're just talking about the reader detail.

This would be a great place to start with it -- it would allow us to bump up the default reader size, while still providing an option for readers who'd prefer a smaller text size.

[aerych]

Let's do this: I'll open a new issue to add support for dynamic text, meanwhile we'll go ahead and change the existing font size as an enhancement for the 6.4 release. If for some reason implementing dynamic type is more tricky than expected we'll still have more readable static text.

[roundhill]

Sweet! Sounds great to me.

[aerych]

@mattmiklic How's this look for the content? (Should we bump up the title to match?)

[aerych]

Here's a version with the iPhone using the iPad title font size and line height

[aerych]

cc @jancavan

[mattmiklic]

The increased body text size looks perfect to me. I think increasing the title size to match is probably a good idea; we can match the sizes currently used in Calypso for the best result.

In the full-post view, titles on mobile screens are 28pt with a 35pt line height. On tablet and larger screens, the font size is 36pt with a 45pt line height.

In the stream view, titles on mobile screens are 18pt with a 23pt line height. On tablet and larger screens, the font size is 28pt with a 39pt line height.

[jancavan]

This looks great! 👏

One thing that I think could also use some improvement is the text color. We've discussed this briefly in the past and think it's a bit faint and too blue. Even a shade darker (from darken( $gray, 30% ) to $gray-dark) is much better.

I think we are also trying to match the Editor fonts with what's on Reader, at least in Calypso. Does that also need to be changed there?

[mattmiklic]

Even a shade darker (from darken( $gray, 30% ) to $gray-dark) is much better.

Good catch; I thought we were already using darkGrey for the body text; I think that's the best color there too.

I think we are also trying to match the Editor fonts with what's on Reader, at least in Calypso. Does that also need to be changed there?

Another good catch -- if we're trying to match the styles in Calypso, we probably should be in the apps as well.

[jancavan]

Sounds good @mattmiklic! We currently use darken( $gray, 30% ) on Calypso. We'd like to make it darker for more contrast, but I haven't gotten around to doing that yet.

[aerych]

Updated font sizes and line heights. If the screen shots look good I'll submit a PR with these changes.
https://cloudup.com/caCBmZqAj51

I double checked and we're already using darkGrey in the reader as @mattmiklic suspected. @jancavan were you thinking about the editor on that one?

Re: editor fonts, let's handle that as a separate PR.

[jancavan]

I double checked and we're already using darkGrey in the reader

Oh hmm, that's right, sorry. I checked again and the tiles are indeed $gray-dark. The paragraphs in the body though are still darken( $gray, 30% ) for me in Calypso.

[mattmiklic]

If the screen shots look good I'll submit a PR with these changes.
https://cloudup.com/caCBmZqAj51

Looking good to me!

[aerych]

Thanks all :)