WordPress.org

Making WordPress.org

Opened 7 weeks ago

Last modified 7 weeks 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 7 weeks ago.
current size
Screenshot from 2020-08-05 13-27-17.png (160.4 KB) - added by williampatton 7 weeks ago.
increased font size

Download all attachments as: .zip

Change History (6)

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


7 weeks ago

#2 @aristath
7 weeks 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
7 weeks 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 7 weeks ago by williampatton (previous) (diff)

@williampatton
7 weeks ago

increased font size

#4 @aristath
7 weeks ago

Definitely looks a lot better

Note: See TracTickets for help on using tickets.