Experiment with padding and font size

[felixarntz]

Margin/padding should be figured out:

• between fields within a section
• between sections

Furthermore font-size should be figured out:

• for titles (may be a <label>, <legend> or <span>)
• for fields (need to consider text inputs, textareas, dropdowns, radios, checkboxes etc.)
• for descriptions

[karmatosed]

I am thinking we can solve a lot by doing font-size 14px.

Here is an image:

What does everyone think?

[joyously]

I put my comment on the other PR. It should have been here... I think setting font sizes in px is a trend that should be fixed in this overall rewrite. One of the main reasons to avoid px is accessibility concerns. This is an old page, but succint: Using Font Size. (it's old, so doesn't mention rem) Why does the font-size of each piece need to be set? Seems like whatever the font size already is for admin pages would be best. It's just regular text, after all.

[afercia]

I'd agree the current font size, especially the labels one, is too small. Also, a general trend in the WordPress stylesheet is to don't take advantage of the styles cascading, and that's shame 😞 One of the a11y recommendation used to be to not use font-sizes in pixels. Today the browsers zoom mechanism is better, but worth considering units other than px for max compatibility. Also, see https://core.trac.wordpress.org/ticket/7296

Personally, I'm a bit bothered by some fields (url) using a different font face. I'd like to see always the same font.

In the original design by M. Arestad, the font hierarchy was a bit different: http://i1.wp.com/blog.michaelarestad.com/wp-content/uploads/2015/08/dark-admin-settings.png the labels font is smaller than the fields one. I'm not saying we should necessarily do this, but I liked it :) In the experimental PR #16 I was trying to follow that approach, you can see a screenshot here: https://github.com/wpaccessibility/settings-api-enhanced/pull/16#issuecomment-305739818

Personally, I think white space and typography is key in this case, and we don't necessarily need bold. But I'm not a designer 🙂

[karmatosed]

@joyously for this prototype purpose, changing the entire way WordPress does hierarchy is out of scope. I do not also agree px is the best, but you can't just pop a rem/em/percentage in without looking at the entire hierarchy. In saying that, it totally is a near future debate and resolution WordPress will go through. Its not for this plugin though.

@afercia I think overall we went too small in that style, as we are inferring not following to rule that design. I would +1 the same font, lets do that. I do feel we need bold or at least to test with or without bold.

I am super keen our prototype doesn't get hung up on a typography debate, those can be had some other day. Its exciting to get this in front of people over spinning wheels on that. Lets do the MVP on this styling wise.

[joyously]

When I mentioned accessibility concerns, I was not thinking of browser's ability to zoom, which is not much of a problem any more, but instead a friend with such a problem seeing that he had to set his screen resolution in WIndows really small so that everything would be big enough for him to read it. People with visual problems benefit from using a percentage on the body, so that it is relative to what they set as default in their browser options. Then everything else should be in ems, so it is relative to its parent. If you use 14px, I'll say it's small, and the guy with a vision problem can't even see it (setting browser default to 20px or higher). I know it's a big picture kind of thing. I just wanted to get it going since you're talking about font sizes here.

[joyously]

You can also localize your hierarchy. Your settings pages have a body class, I'm pretty sure, so you can set that. And do the rest of your new CSS file in em instead of px.

[karmatosed]

As this as a prototoype and type soup isn't tasty, that wouldn't be a good idea right now. This issue wasn't about this, so if we can lets get back on track.

[afercia]

@joyously yep, I come from an era when the recommendation was to set 100.01% as font size on the body 🙂 The current state in WordPress can be improved for sure, right now if you change the body font size it's curious how basically nothing changes... Also line-heights would need some review but probably all this is a bit out of the scope of this prototype.

[felixarntz]

@karmatosed Do I understand correctly that the "call-to-action" here is making the labels font-size: 14px?

[felixarntz]

I changed the font-size of the field titles to 14px (see 07a244ca9244fac1a22b2a141701d020fd485591).

Let's close this one, and use more specific issues for any future work on design and layout.