WordPress.tv: Increase font sizes site-wide

[davidjlaietta]

The current site is based around a 13px body font, which is approximately equivalent to a 10pt print font, and 80% of a standard browser font size.

Admittedly this is a personal peeve when I see sites that go infuriatingly small like that. I want to easily be able to read content related to a video, especially when we pride ourselves on being as accessible as possible.

I propose bumping the body font up to 16px, and other small font sizes up around 2px higher than they currently are, keeping the existing size hierarchy, just more sizier :)

[DrewAPicture]

13px to 16px is a pretty big leap. Screenshots before and after would be a good place to start.

[davidjlaietta]

Absolutely. This would probably go along with https://meta.trac.wordpress.org/ticket/1457 to increase the area that most of the text takes up on single view pages. In fact I'm going to attach the same files, since I bumped up the font size from 13px to 16px on my second screenshot that shows the proposed meta sidebar width

[melchoyce]

@davidjlaietta, your images are broken — can you reupload directly to trac?

[davidjlaietta]

WPTV Proposed Meta Sidebar

[davidjlaietta]

WPTV Current Meta Sidebar

[davidjlaietta]

@melchoyce reattached to ticket

[Travel_girl]

I also vote for larger font-size in favour for a better usability and accessibility. 16px should be the minimum size for main text in my opinion.

[dd32]

The style.css for WordPress.tv is pretty all over the place, and font sizes are defined 62 times to 17 different values (10px~32px/1.5em/3em/9pt).

After taking a quick look at this, increasing the fonts without carefully looking how it affects each area isn't going to produce a nice result.

Looking at the screenshots above, IMHO the sidebar should be removed and shifted into a horizontal area below the video (At least the Description should be, all the other meta might stay there), which would allow the font to be increased a bit there.
Elsewhere the main text is video titles, as the titles are rather long increasing the size either removes whitespace and makes it look crowded, or requires more whitespace adding which requires other design elements to change.

[BrashRebel]

If not the entire sidebar, at least the video description could be relocated from the sidebar to below the video. That is where the largest % of text is on the page and it typically fits poorly into its current space. If we move the description to under the video, the sidebar might otherwise be acceptable in its current state and the description's font size can be increased.

[bernard0omnisend]

Before font size & alignment & order changes to WordPress.tv inner video page

[bernard0omnisend]

After font size & alignment & order changes to WordPress.tv inner video page

[bernard0omnisend]

I'm not a developer, but I've played around with Inspect and made the following changes that I think might help. These changes impact only the font size for p tags under class "video-description"

Here are the before and after images:

Before

After

Here are the changes I made (please adapt as necessary):

Order changes

Remove <div class="video-description"> from under <div class="secondary-content video-info"> and move directly below <div id="content">

Add <h5>Description</h5> before description text, directly below <div class="video-description">

Font size changes

Add

.video-description p {
margin-bottom: 1em;
font-size: 16px;
}

Alignment changes

For alignment with Meta info on the right side, change margin top from -20px to 0px:

@media screen and (min-width: 940px)
.secondary-content {
    flex: 0 0 200px;
    margin: 0px 0 50px 40px;
}

Other changes

Remove <div class="sd-block sd-rating"><h3 class="sd-title">Rate this:</h3><div class="cs-rating pd-rating" id="pd_rating_holder_29399_post_121002"></div></div> from block <div class="video-description">. This seems unnecessary, since "Rate this" is already available elsewhere on the page, below the video.

Replying to dd32:

The style.css for WordPress.tv is pretty all over the place, and font sizes are defined 62 times to 17 different values (10px~32px/1.5em/3em/9pt).

After taking a quick look at this, increasing the fonts without carefully looking how it affects each area isn't going to produce a nice result.

Looking at the screenshots above, IMHO the sidebar should be removed and shifted into a horizontal area below the video (At least the Description should be, all the other meta might stay there), which would allow the font to be increased a bit there.
Elsewhere the main text is video titles, as the titles are rather long increasing the size either removes whitespace and makes it look crowded, or requires more whitespace adding which requires other design elements to change.

Trac ticket: #1456Trac

[Kau-Boy]

I've created a PR based on the feedback and mockup from @bernard0omnisend.

Apart from the too small font size, I've also updated some other important aspects in terms of a11y issues:

• color contrast of breadcrumb too low
• links not underlined in the content
• heading levels incorrect (no h3 and h4, but multiple h5)

[joedolson]

These look like good changes to me!