Description
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)
-
bodyclass having a fixed character size and line-height (currently set tonormalwhich makes other typesetting needs difficult) - Subsequent classes adjusted, after
bodyclass 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
- 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