Justin Scherer

The Challenge

When I joined the Wikimedia Foundation as the Lead UX Designer for the Web team, the first big task I received was to make the font bigger on Wikipedia. Simple, right? Wikipedia's default text size had been introduced over a decade ago, when computer monitors and browser-based reading expectations were very different from what they are today. The brief seemed simple enough at first glance, but I quickly learned that nothing simple is ever simple when one is designing for Wikipedia.

To begin with, Wikipedia's scale is staggering. In a year, people collectively spend hundreds of millennia reading Wikipedia, and its 300-plus language versions average billions of views every month. The "target audience" is every literate human on Earth with an internet connection. Those people read in scripts as different as Arabic, Cyrillic, Latin, and Japanese. At that scale, even a minor change to baseline typography has an enormous, global impact.

Wikipedia is also one of the most text-heavy interfaces our readers ever see, and the people using it are often doing very different things. For example, casual readers skim for broad curiosities or hunt for specific facts in sessions that last about 25 seconds. Long-time editors spend hours with some articles and often have deeply ingrained workflows that a change in text size can disrupt.

As the Lead UX Designer, I led the design of Wikipedia's new typography from end to end. I set the design direction and ran the desk research. I also designed a participatory prototyping process with editor communities, and I worked alongside our design researchers and the wider WMF design team to test and refine the results.

Approach

Eyeballs and brains

My design practice has always been insight-led, so I began by conducting desk research that followed several threads:

• how human beings read generally, and how people read Wikipedia specifically

• design discourse on web typography

• eye-tracking studies from HCI

• readability for accessibility, especially dyslexia

• typography for non-Latin scripts

I anchored the review on the Foundation's own reader research and followed the studies that built on it.

A few insights shaped everything that followed. People don't really read on the web, they scan, often in a "layer-cake" pattern that moves down the page from heading to heading. Bigger fonts improve readability up to a point of diminishing returns around 18pt. Smaller type needs more line height, and the inverse is true, too. Density is prized in Japan and much of East Asia, where logographic scripts make it far harder to create hierarchy with type alone. Our own research showed that most Wikipedia readers arrive with a specific task in mind and skim for it. So we decided that casual readers who scan for specific information would be the primary audience for our design interventions.

The research had limits, too. Eye-tracking studies use sample sizes that are orders of magnitude smaller than the reader numbers Wikipedia deals with. Design discourse on web typography mostly drew on heuristics from editorial design in physical books, and it was much less grounded in empirical research than I'd hoped. We also had basically no quantitative way to measure readability at scale. Research could give us principles, but not the answer.

Distributed participatory design

Even with a set of principles grounded in solid research, my limited perspective could never hope to account for the bewildering diversity of reading experiences of billions of people in hundreds of languages. I needed help.

Design changes on Wikipedia usually worked like this: a designer iterates with a cross-functional team of product folks, developers, community engagement experts, and other designers. They publish a "final-ish" design and consult with contributor communities after the design is mostly baked. The diversity of reader experiences implicated in this intervention made me invert our typical process with a participatory design approach. Instead of asking communities to let a finished design go forward, we gave them an open prototyping tool. We asked them to design their own ideal reading experience, to send us as many variations as they liked, and to tell us as much as possible about why they liked them. Wikipedia's volunteer communities mirror the diversity of our readership, so they're better positioned for iteration than any one designer could ever be.

The tool let logged-in users control font size, line height, and paragraph margins directly on articles. We reached out to 13 Wikipedias, including Arabic, Chinese, English, Hebrew, Japanese, Ukrainian, and Vietnamese, through banners and messages on community forums. Wikipedians sent us 632 designs. We treated every submission in two ways: as data about what participants wanted, and as a candidate design to consider. No single source got the final say.

Results

We synthesized the community prototypes, the academic research, and the team's design sensibilities into a new set of typography options for Wikipedia. These are a few of the design decisions that shaped them.

Honour the traditionalists

Of the 632 designs, 177 had exactly the same typography as the current defaults. This came as no surprise. We recruited participants from places where experienced editors and power users gather, and negative transfer effects can lead the most experienced people to prefer existing defaults over any change at all. We called this cohort the "Traditionalists." Rather than overrule them, we kept the old defaults as a "Small" option, so the people who know Wikipedia best could keep the reading experience they'd built their workflows around.

The majority of prototypes (329) had bigger fonts with more line height than we had at the time. That aligned with the academic consensus to "make it big," as well as our team's own preferences. So the new default became slightly bigger, with slightly more line height.

The bigger, the denser

One of the most fascinating patterns in the data was that participants decreased line height as they increased font size. The bigger the type got, the relatively denser the reading experience became. This supported our research on scanning, where density helps the eye take in more of a page at a glance, so we built that relationship into the new options.

The designs also "spread out" as font sizes got bigger. The larger the type, the less participants agreed on ideal typography, which made preferences for a large-text option the least clear. We landed the "Large" option somewhere between the dispersed community designs and the academic recommendation of 24px.

Customization

The free-form responses were overwhelmingly pro-customization. A few participants specifically called out small, medium, and large options as a nice affordance. One participant mentioned wanting bigger sizes when their environment or state of mind made concentration more difficult, which was an accessibility need we hadn't considered. Instead of a single new default, we shipped three sizes in a new Appearance menu.

The new typography options are now available to readers in more than 300 languages. One reader told us that after years of using browser zoom at 150% to read comfortably, they could finally reset it to 100%.