Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web UIs Typography #81

Closed
4 tasks done
ninavizz opened this issue Aug 2, 2019 · 4 comments
Closed
4 tasks done

Web UIs Typography #81

ninavizz opened this issue Aug 2, 2019 · 4 comments
Labels
Needs Prioritization Source Experience
Milestone
+1.0.1

Comments

@ninavizz
Copy link
Member

ninavizz commented Aug 2, 2019 •
edited
Loading

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.

  • Clearer hierarchies that are used more consistently (H1, H2, etc)
  • body class having a fixed character size and line-height (currently set to normal which makes other typesetting needs difficult)
  • Subsequent classes adjusted, after body class more cleanly resolved
  • 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
@ninavizz ninavizz added this to the +1.0.1 milestone Aug 14, 2019
@ninavizz
Copy link
Member Author

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 ninavizz changed the title Source UI Typography Web UIs Typography Jul 21, 2021
@ninavizz
Copy link
Member Author

ninavizz commented Jul 21, 2021 •
edited
Loading

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
Copy link
Member Author

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
Copy link
Member Author

ninavizz commented Jan 9, 2022

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

@ninavizz ninavizz closed this as completed Jan 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Needs Prioritization Source Experience
Projects
None yet
Milestone
+1.0.1
Development

No branches or pull requests
1 participant
@ninavizz