New icons: H1-H6

[iamthomasbishop]

• Add new icons to svg folder

[davewhitley]

With other icons:

Numbers look really nice. Source Sans as a starting point works well. The H and the numbers look like they are from the same family. I like the style of the smaller number next to the H.

Looking at the icons at 24px, the numbers almost look too small to be legible. I think it could work as is. Overall the icons seem to be a teensy bit smaller than the surrounding icons. Probably not a blocker for this.

I wonder, since the icon is rectangular in shape, if the icon could extend to the outer bounds of the guidelines. We have some icons that are short that do this. The letterforms would need to be enlarged though, which is never easy, working on a grid.

cc @joen since he is working on the editor. Have y'all made any icons like this yet?

[iamthomasbishop]

@drw158 I can re-work these to be larger if that's preferred. I wasn't sure where on the grid I should limit to.

[davewhitley]

With big numbers:

I think the trade off here is that the numbers are more readable, but the different weight of the numbers compared to the H is more obvious. Only at large sizes though. At small sizes, it's hard to tell.

I guess we should lean towards readability here, but I'd like another set of eyes on this.

[mattmiklic]

It seems like going bigger would make it a bit easier to use them -- they'd be more likely to be usable at the same standard sizes we use for other icons.

The full-size digits seems like the way to go to me; particularly at smaller sizes it seems like the first set of digits are less readable, particularly the "5" which starts to look like a lowercase "s".

[folletto]

Nice work. 👍
And thanks for raising the discussion, it's not an easy one as the semantics of this "icon" are challenging.

1. Style wise, I think it's a solid proposal. I'm ok for including it.
2. I've not huge preference for smaller or bigger. I like they are "different", but I also like they are "readable". It's a tradeoff, as such I'm ok with either. I'd probably try to see how small they are in the small version at 18px and check them. Note that WCAG AAA doesn't state a "minimum font size" as it assumes the user can scale it up with browser zoom, so it's tricky. I think the general assumption however is 12px, so we could place a 18px gridicon H near a 12px equivalent, screenshot, and see how it compares.

---

I've an aside, which is for discussion and consideration, but shouldn't be a blocker for this specific PR.

• Is "H" the clearest way we can communicate headers?
• Is the term "header" widely understood compared to "title" or other options?
• Is "H1" too technical? Would people "get" the number?
• Is there a different icon (i.e. no text-icon) that could convey similarly the meaning?

[davewhitley]

To move forward, let's go with the big numbers.

---

Discussing the aside a bit more...

Yep, also, the icons can't be translated to other languages.

I would really love a simpler approach, similar to Medium's "titles" (big T, little T). There are only 2 options. I think the Gutenberg editor is going with H1, H2, etc. for now though for semantic reasons. I wish they could go with something else. We'll see where they land on that, and see what decisions are made. We may need to circle back and update these icons at a later date.

WordPress/gutenberg#522
WordPress/gutenberg#783

[iamthomasbishop]

I'm in agreement that we should use the more readable numbers. Getting the weight right has proven to be a challenge.

---

@folletto - @drw158 read my mind. Medium does TT, with the second "t" being shorter. Github does "AA" with shorter A then taller A. I do like either of these, but fwiw neither of them have the additional indicator to tell the user which heading is active.