Web UIs Typography - Githubissues

ninavizz commented 5 years ago

Issue w/in Super Epic #42

Problem

Typography plays a big factor in the ease with which a page can be read, and the subsequent anxiety a page's text legibility can conjure in a user's emotional response. It can be stylie, ugly, showy, elegant, simple, kludgy, clean, or any other host of aesthetic factors. Typography choices also factor heavily into how localized or internationalized web experiences work for those users, via character-count impacts and unique non-English alphabet needs.

To deliver the most calming experience possible, a <body> webfont needs to be chosen that can be optimised to read easily in sentences (so, not a display font—which regrettably, mine and Harris' and Antonella's fav, Helvetica Neu, is):

Well proportioned x-height to the font's ascenders/descenders
Appropriately proportioned character spacing, to the median width of the font's character.
- Reminder: a "font" in classical typography, is simply the size/weight/face/decoration within a type family. So, 12px Bold Arial is a font, whereas Airal Bold is a typeface, and Arial is a type family.
Appropriately proportioned line-height to facilitate an easy-read with enough open-space to not impose anxiety upon the user.
While serif typefaces have long been asserted by researchers and typographers to deliver better legibility in publishing over sans-serif typefaces, the research to date has affirmatively asserted that for a lot of reading—so, books and periodicals. Even the SecureDrop Docs fall outside of that best-practice.

Making things extra fun, TorBrowser in safest mode blocks all webfonts, defaulting to fonts bundled with Firefox/Tor. So, my recommendation is we look there as our starting point. Currently, my own (and H a r r i s ') favorite display font, Helvetica Neu, is the default font in SD... which renders as whatever the default is, when in safest.

Solution

As time permits, mature the typography in today's SecureDrop Source UI to better serve Source user needs for legibility, clear visual hierarchies, and browser-generated size increases in text.

[x] Clearer hierarchies that are used more consistently (H1, H2, etc)
[x] body class having a fixed character size and line-height (currently set to normal which makes other typesetting needs difficult)
[x] Subsequent classes adjusted, after body class more cleanly resolved
[x] Fonts used that are more readily available as Firefox browser defaults, and OEM on machines
- Must be w/in Tor's whitelist of fonts

Reference materials

Mostly creating this issue to clear these tabs from my browser, w/o losing the linx, heh

TorBrowser fonts whitelisting/bundling rabbithole
General
- Meet Noto WiReD article
- The Last Word On Helvetica (Nina's fav font, and a rather controversial one)
- MIT Tech review as an example of Helvetica used helvetica-y
L10n Things
- Erik's Gist analyzing use of languages across SD instances
- Nina's charset & cc study per 3 alphabet categories (English, tall, dense)
- Unicode font article (that basically makes a strong case for Noto)
Resources for others on the team: Typography 101
- Typography basics article for curious others to read to learn more about nuances and jargonry
- Behind Your Chosen Typeface article

ninavizz commented 3 years ago

This dovetails in with some of the work that c o r y is currently doing for accessibility, to standardize the CSS. Perhaps to chat prioritization w/ @zenmonkeykstop or @eloquence ??

ninavizz commented 3 years ago

Well, crud. Noto could well be the only cross-platform native font bundled with Firefox. There's also over 100 actual "fonts" for different alphabets, within the Noto family—so that may not mean much. https://bugzilla.mozilla.org/show_bug.cgi?id=1336208

Firefox's syleguide, pointing to Segoe, San Francisco, and Ubuntu, as the Win/Mac/Lin standards: https://design.firefox.com/photon/visuals/typography.html

ninavizz commented 3 years ago

What Antonella has spec'd for body on the Tor website

"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

ninavizz commented 2 years ago

Closing, as 2021's SI Redesign addresses all of the open issues herein.

freedomofpress / securedrop-ux

Web UIs Typography #81

Problem

Solution

Reference materials