WordPress.org

Making WordPress.org

Opened 9 months ago

Last modified 4 months ago

#5353 new task

Increase base font-size on make blogs

Reported by: williampatton Owned by:
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: needs-design
Cc:

Description

The font sizing and color on the make blog is considered hard to read (by me but also by others as well).

I propose we increase the font-size inside of the post bodies to match a baseline of 16px.

Also consider adjusting the color of the text which is currently #555 - I suggest going to #333 but the sizing is much more important than the color in my view.

Attachments (2)

Screenshot from 2020-08-05 13-27-34.png (149.2 KB) - added by williampatton 9 months ago.
current size
Screenshot from 2020-08-05 13-27-17.png (160.4 KB) - added by williampatton 9 months ago.
increased font size

Download all attachments as: .zip

Change History (10)

This ticket was mentioned in Slack in #design by williampatton. View the logs.


9 months ago

#2 @aristath
9 months ago

Thank you @williampatton for creating this ticket :)
+1 from me... I regularly find myself reading meta posts on the emails and not on .org because of the .org styles. The font-size on the site is too small (13.65px) and really hard to read.

Using a minimum font-size of 16px for all content on .org and somewhat darker than the #555 we currently use would significantly improve the readability of .org.

The main culprit for all my difficulties is the html{font-size:62.5%;} we have there and I find myself opening dev tools and disabling that line way too often.

This applies both to make blogs and also handbooks etc (basically anything that lives on make).

#3 @williampatton
9 months ago

I think changing the size from the html tag is one option but we could also adjust this directly on the <p> tag that might have less side-effects and be an easier solution.

A style rule exists in the style.css file that sets font size on p, ul and ol to a font-size of 1.05em. If we adjust it to 1.25em that gets us to about 16px without causing too many other problems (the main .make-welcome bar does end up with text too large but I think that can be accounted for easily).

p, ul, ol {
    font-size: 1.25em;
    line-height: 1.6;
}
Last edited 9 months ago by williampatton (previous) (diff)

@williampatton
9 months ago

increased font size

#4 @aristath
9 months ago

Definitely looks a lot better

#5 @dd32
6 months ago

I've started down this road, but quickly got lost in a complicated mess of sizes.. Testing against https://make.wordpress.org/core/reports/ and a few random handbook pages in addition to the o2 front page would be welcome.

It's worth noting, that we can only affect the styles in the wporg-breathe theme, the base styles from o2 and p2-breathe can't be edited without being overrides.

#6 @paaljoachim
4 months ago

Great! I was about to create a new trac issue mentioning a need for a bigger font size for the handbooks. I see that is being handled in this ticket.

I look forward to seeing the change. Thank you!

This ticket was mentioned in Slack in #core-editor by paaljoachim. View the logs.


4 months ago

#8 @paaljoachim
4 months ago

I sent a direct message to @dd32 Dion and he told me that the stylesheet for wordpress.org is a mess. Making even changing font size difficult.

So it seems that with the current theme that this will not happen for now.

I suggest for a feature project for 5.8 to create a Full Site Editing theme for wordpress.org.

Note: See TracTickets for help on using tickets.