Making WordPress.org

Opened 8 years ago

Last modified 2 months ago

#1456 new enhancement

WordPress.tv: Increase font sizes site-wide

Reported by: davidjlaietta's profile davidjlaietta Owned by:
Milestone: Priority: high
Component: WordPress.tv Keywords: has-screenshots has-patch
Cc:

Description

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 :)

Attachments (4)

wptv-proposed-meta-sidebar.png (113.9 KB) - added by davidjlaietta 7 years ago.
WPTV Proposed Meta Sidebar
wptv-current-meta-sidebar.png (180.1 KB) - added by davidjlaietta 7 years ago.
WPTV Current Meta Sidebar
Before image - Wordpress.tv inner page.png (288.2 KB) - added by bernard0omnisend 5 months ago.
Before font size & alignment & order changes to WordPress.tv inner video page
After image - Wordpress.tv inner page.png (420.6 KB) - added by bernard0omnisend 5 months ago.
After font size & alignment & order changes to WordPress.tv inner video page

Download all attachments as: .zip

Change History (21)

#1 @DrewAPicture
8 years ago

  • Keywords needs-screenshots added

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

#2 @davidjlaietta
8 years ago

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

https://meta.trac.wordpress.org/attachment/ticket/1457/wptv-current-meta-sidebar.png

https://meta.trac.wordpress.org/attachment/ticket/1457/wptv-proposed-meta-sidebar.png

#3 @melchoyce
7 years ago

  • Keywords ui-feedback added

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

@davidjlaietta
7 years ago

WPTV Proposed Meta Sidebar

@davidjlaietta
7 years ago

WPTV Current Meta Sidebar

#4 @davidjlaietta
7 years ago

@melchoyce reattached to ticket

#5 @SergeyBiryukov
7 years ago

  • Summary changed from Increase font sizes site-wide to WordPress.tv: Increase font sizes site-wide

#6 @obenland
6 years ago

  • Type changed from defect to enhancement

#7 @Travel_girl
5 years ago

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.

#8 @joedolson
5 years ago

  • Priority changed from normal to high

#9 follow-up: @dd32
5 years ago

  • Keywords needs-patch has-screenshots added; needs-screenshots ui-feedback removed

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.

#10 @BrashRebel
5 years ago

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
5 months ago

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

@bernard0omnisend
5 months ago

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

#11 in reply to: ↑ 9 @bernard0omnisend
5 months ago

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

https://meta.trac.wordpress.org/raw-attachment/ticket/1456/Before%20image%20-%20Wordpress.tv%20inner%20page.png

After

https://meta.trac.wordpress.org/raw-attachment/ticket/1456/After%20image%20-%20Wordpress.tv%20inner%20page.png

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.

Last edited 5 months ago by bernard0omnisend (previous) (diff)

This ticket was mentioned in PR #181 on WordPress/wordpress.org by @Kau-Boy.


4 months ago
#12

  • Keywords has-patch added; needs-patch removed

Trac ticket: #1456Trac

#13 @Kau-Boy
4 months ago

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)

This ticket was mentioned in Slack in #meta by kau-boy. View the logs.


4 months ago

#15 @joedolson
4 months ago

These look like good changes to me!

This ticket was mentioned in Slack in #meta by kau-boy. View the logs.


3 months ago

This ticket was mentioned in Slack in #meta by courtneyengle. View the logs.


3 months ago

Note: See TracTickets for help on using tickets.