Richer font chooser

[amyjko]

What's the problem?

Our font chooser is currently just a list of font face names. There's a lot of other metadata to reveal about fonts though:

• What does it look like? How would we describe its appearance, for blind users?
• What weights are supported?
• Is italic supported?
• What languages are supported?

These details are important part of browsing and choosing fonts, and we have this metadata internally, but none of it's exposed.

Who benefits?

Any creator choosing a font face.

Design ideas

A little faceted search interface would suffice, allowing filtering by languages, italic support, weight support would be good. The resulting list should show all of these different metadata things, and the rendered font.

Pre-Design Documentation

Overview

Current state:

The current state of the font face chooser (it’s just called “face” on the website) is just a list of fonts.

What it currently lacks:

• Appearance (what it looks like)
• Styles/type (typography specifics: sans-serif, serifs, etc.),
• Script info (which languages are supported in this font).

What it looks like currently:

Desired state:

As specified in the GitHub issues page, we want:

• An information-rich interface for fonts that isn’t too overwhelming
• Visually distinct fonts
• Additional filters
  • Based on script / Language availability
  • Typefaces (sans, sans-serif, etc.) to match the user’s intention (for headers vs captions vs body text)

All while still maintaining proper aesthetics and themes with the current theme.

Proposed design:

Brief overview: A font face chooser interface that shows the appearance of the fonts. A filter that allows users to filter by typeface and language. Users will also be able to search for fonts, filtering by the name of the font.

Images:

Figure 1. Font chooser interface with font appearances and side filtering by typeface and language

Figure 2. Has Typeface and Language filters opened up showing their contents.

Side notes:

1. Each typescript has an "i" icon next to it, being hovered should describe the characteristics of that typeface.
2. Descriptions of each typescript will be localized to the language that the user has set globally.
3. (Language) Scripts are currently encoded in the repo as their natural script (ie. Latn, Hani, Jpan, etc.) and need to be used to create a new "language" variable for better user experience. (Letting users filter by English and Chinese, rather than Latin and Hani).

Figma link: https://www.figma.com/file/OdvjdLBpJxEMmWP8u1KJ5C/Font-Chooser-Interface-Design?type=design&node-id=49-3&mode=design&t=bnxb6upTwySZs4mt-0 PW: wp162

[brightuw]

First draft of design proposal/documentation (Does not yet include solid visual)

Wordplaypen #162 Design Documentation.pdf

[amyjko]

Thanks @brightuw! One norm to follow: put the current design proposal in the main body of the issue above, not as a comment, so everyone can see the current proposal. We'll use comments to discuss it.

[brightuw]

@amyjko thank you for letting me know. How would I go about doing that? Would I have to create a 'new issue'?

[amyjko]

You should see an edit button in the "…" menu up top. If you don't, then there's a permissions issue I need to fix.

[brightuw]

If you're referring to the comment that begins with "What's the problem?", I am unable to edit it, but I think it is because everyone is generally unable to edit other people's comments and not a permissions issue.

[amyjko]

It was a permissions issue. Design was set to triage access, instead of write. You should be able to edit now.

[brightuw]

Cool, thank you for that.

[yz425-2036461]

Split into Issue #298 for accessibility settings for blind/low-vision users.

[amyjko]

Hi @brightuw, @yz425-2036461, @amyluyx, and @simku22,

It's the end of the quarter, so please post an update on this issue. Things to consider:

• Should you still be the assignee? (If you're planning on working on it, yes! Submit a comment explaining your plans. If not, then unassign yourself, so others are eligible to grab it).
• Do you have any work products that are hosted outside of GitHub? Embed them in this issue, so others can build off of them.
• Are there any branches associated with this issue? Please link to them in the issue.

If there's nothing to change above, then at least post a comment indicating that you've seen this. Thanks!

[amyjko]

No reply, unassigning everyone to free up the issue for others to work on. Reassign yourself if you're still working on it.

[brightuw]

Self-reassigning, working to improve the design and interface of the font chooser on Figma linked in design spec.

[brightuw]

Updated design plan:

• Removed filters about weight and italics support because of font synthesis allowing all fonts to be bolded and italicized
• Removed any classification of weight since a regular (400) size of a font can still be "thicker" than a bold (700) size and we have no true definition or metric to determine what is "bolder"

[amyjko]

Those seem like reasonable rationales to me. Let me know when/if you'd like another full review!

[brightuw]

Requesting small-scale design review before further designing!

[amyjko]

Thanks @brightuw! I like the direction this is going. A few thoughts:

• Wordplay generally avoids popups because of their accessibility problems with keyboards and screen readers. This design seems to use multiple kinds: a filter popup, an information pop, a font listing popup. Can you imagine a design that is WCAG 2.2 compliant, and doesn't rely on popups?
• What is an example of the font descriptions we might include? There are some similar kinds of descriptions on font repositories such as Google Fonts, but they're often multi-paragraph notes from the designer about what inspired them, with a bit of language abound emotion. What are you proposing?
• Localizing font descriptions has some nuances. Would we want every language to have a localization? Just the languages that a font supports? One use case to consider: can you imagine a student wanting to use an Latin only font to write in English, even though they only know Arabic?

[brightuw]

Thank you @amyjko for the insight!

Right off the bat, addressing your third point, I think that each font description should be localized in every language, and the one displayed as the description would be the global language the user has set.

I will get back to you to address these other points momentarily.

[amyjko]

Re: localizing, I think that feels like the best choice to me too — we want to support all possible scenarios, rather than restrict them. That does come with a cost: every font we add we'll need to localize a font description, but that feels like a reasonable price to pay for equitably engaging everyone globally.

[brightuw]

Hey, @amyjko. I think I need a little guidance on which way to proceed with the popup/tooltips concern. I have reviewed WCAG 2.2 documents but they only discuss that if you DO have popups, to have them be on hover, kept open when mouse is still over the overlay, and be dismissible, giving me the impression that pop-ups/toolkits are generally acceptable. However, I do agree that three pop-ups are definitely somewhat excessive. I was initially thinking of a filter bar at the top of the font chooser interface, which only reduces the amount of pop-ups by one. Do you have any advice or suggestions moving forward?

[amyjko]

Thanks @brightuw, and good job doing research on the WCAG guidance! It definitely permits popups, but doesn't take a stance on whether they're good or bad, just sets some minimum bar on how to do them if you do. What it doesn't say is how hard it is to make a large number of drop downs and popups keyboard accessible. With a mouse and sight, it's manageable, but without sight, and only a keyboard and descriptions, it becomes kind of a maze.

What about something more visually self contained, like the color chooser we currently have? A little box with scrollable list of font names, a panel to show a preview and the description, and a filter box for searching, plus the language and category filters? There's a lot we can do in a relatively small space.

[amyjko]

It's the end of Winter! Please provide an update on this issue, including:

• Whether you plan to continue work on it
• If you do not, 1) provide a detailed update of its status, 2) add any unfinished work, 3) list any any unmerged branches, and 4) unassign yourself, so someone else can take over the task. Please leave the issue in better shape than you found it, helping future contributors to start from where you left off.

If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions!

[brightuw]

Will continue working on this issue next quarter.

[amyjko]

Yay! Thanks @brightuw, I'm so grateful to have you in the community. I hope we can build this next quarter!

[amyjko]

No reply from @MichelleGuan1128 @yz425-2036461, unassigning.

[patriciacindy]

Hello @brightuw, I am interested to work on this project together. Would you mind we work together?

[brightuw]

Hey, @patriciacindy of course! What's your username in the Discord?

[patriciacindy]

Hello @brightuw my Discord name is patriciacindyisabell. Thanks!