Make font sizes more accurate and remove slider

[karmatosed]

This is a two part issue and should see improvements to the defaults along with interactions for font sizing. There are a few elements to this design and 2 variations:

• Change the A icon to mean something more 'font size' for example A+ or different sizes of A.
• Remove the slider and in an editable field and arrow up/down.
• Add in default value that is what the font size is for that block.

Why? This makes adding easier, more accurate and should stop the skip/sliding as you try and get the right font size. Also by showing the default it means you have some baseline.

[carlhancock]

I would say that some version of "Aa" or "AA" (with either the first or second capital A in that second example being smaller than the other) would be more obvious than an A+.

A couple quick Google image searches shows a wide variety of examples and while A+ does popup, it's not nearly as prevalent and I instantly think some sort of grade and not font/typography size when I see A+.

Google search for "font size icon":

https://www.google.com/search?q=font+size+icon&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwjFx4Ofq8TZAhVNMqwKHX5xCiUQsAQIJg&biw=1651&bih=1060&dpr=2

Google search for "text size icon":

https://www.google.com/search?biw=1651&bih=1060&tbm=isch&sa=1&ei=j2OUWqWWIsGEtQWS9YCACw&q=text+size+icon&oq=text+size+icon&gs_l=psy-ab.3..0l2.5445.5797.0.5953.4.4.0.0.0.0.135.400.3j1.4.0....0...1c.1.64.psy-ab..1.3.317...0i7i30k1j0i8i7i30k1.0.48flxkZNc6E

I agree with adding the default value in the input. But why remove the slider? The current UI already provides both a slider and an editable input type so that you can correct any mishaps you might encounter with the slider.

If you want to add up/down arrows to the input I would suggest the following:

1. Do not use the HTML5 number input type which adds the up/down arrows inside the input automatically. It's not user friendly on a desktop (tiny) and doesn't work on mobile. It doesn't look like that's what was used in the mockups above which is good from that perspective.

2. Make the up/down arrows mobile friendly. Which means avoid stacking them so that they are more touch friendly. It may also mean putting the up and down arrows on either side of the input. See this screenshot of the UI from Google Docs when used on an iPhone:

3. IF you are intent on removing the slider, is the original font size icon question even necessary? You could simply place the input in similar fashion to the screenshot in Add/local build #2 above to the right of the Font Size instead of dropping down to a new line. Then there isn't even a need for a font size icon to accompany them.

As for my opinion... i'd like to see the slider retained with a mobile friendly input with up/down arrows next to it.

[karmatosed]

Here is an iteration adding back in the slider:

What this iteration does is add visibility and increase the size of the existing up/down. One possible suggestion here would be to lower the range on the slider, it's kind of large at 200.

[carlhancock]

@karmatosed I still prefer the "Aa" or "AA" icon over the A+ icon as they are more commonly used in UI's to represent font size so users are more likely to recognize them visually.

The only other thing i'd say is make sure the the up/down arrows work good on mobile if you go this route. By stacking them next to the input it requires them to be much smaller than they would have to be if they were placed side by side or on either side of the input.

[karmatosed]

@karmatosed I still prefer the "Aa" or "AA" icon over the A+ icon as they are more commonly used in UI's to represent font size so users are more likely to recognize them visually.

I uploaded that one I think after you caught it, the design has the 'AA'.

I agree exploring what can be done and make larger target areas would be good in this. Stacking I am not sure about as you get a wall of arrows.

I think this above image suffers from that, lots of same things in different directions. Something to muse on though as larger target areas isn't bad.

[carlhancock]

I agree on the arrow issue. Funny enough I thought the exact same thing you did and when I included that screenshot I almost edited it down to just the Size portion of the UI but decided to include the surrounding elements. So i'm glad you pointed it out because it validated my initial thoughts on it as it relates to arrow overkill.

Having a Reset link to the right in this situation may help with this issue as the Google Docs example doesn't incorporate a reset link. Might be worth trying before deciding.

[carlhancock]

There are other issues with Font Size beyond UI. Like what does the number in the input mean? Is it point size? Pixel size? Something else? Of course the average user isn't going to know the differences between point, pixel, etc.

But I have noticed that most non-web page interfaces that have typography settings that users would be familiar with... Word, Google Docs, Pages, etc. don't leave it open-ended and instead simply provide a selection of pre-defined font point sizes.

Then you have the theming issue. Trying to guide the user to configure their blocks in a way that they will look good within the design confines of the theme they are using. Which could mean having a way for themes/plugins to pre-defined some of these settings so that a user still has control... but in a way that can limit how badly they configure their site.

It's a similar issue to the background and text color settings. You want to help stop them from making decisions that wouldn't be a good idea. So with colors there is the notification related to accessibility that hey... these colors may not be good for people with vision issues.

Like a lot of things some people would look at this discussion and think "Oh, that should be easy. Just add a font size selector. Done." but we know that a lot of times the things that appear to be very simple can actually be very complex.

[karmatosed]

There are other issues with Font Size beyond UI. Like what does the number in the input mean? Is it point size? Pixel size? Something else? Of course the average user isn't going to know the differences between point, pixel, etc.

A good point to iterate, lets add the value too!

[karmatosed]

I think this is a good version to get in. It has a few things but not all:

• Double A indication over single A
• Arrows larger on up and down
• px for what measure it is
• In addition to this lets make the default size on the slider smaller Default font size setting in paragraph block is huge #5344 will be fixed then so lets roll into one issue. Let's also reduce the scale on this to maybe no more than 72px and jump less as a result on the slider.

[chthonic-ds]

What is the idea behind displaying "px" as a unit measure for font size?

• End-users simply want to make the text smaller or larger
• Developers using px to define a font size are engaging in poor practice

My suggestion: drop the number input and retain the slider only, with labels "smaller" and "larger". Keep it unit-less.

[karmatosed]

As #5269 is being worked on let's close this. Some improvements there that mean we can iterate.