PayPal Sans Design Information

22 February 2016

PayPal Sans is a new screen-first typeface family designed for PayPal Inc. It is comprised of two complementary sub-families: PayPal Sans Big and PayPal Sans Small. It was designed with direction from the PayPal product team over the course of several months. PayPal Sans comes in 14 styles and is licensed exclusively for use by PayPal. Ben Kiel worked on the concepts, research and production. The hinting and mastering was done by FontWerk & Noe Blanco.

In May 2014 PayPal’s product team got in touch with a very specific typeface brief detailing their functional and aesthetic requirements. They needed a sanserif typeface that was mobile-first, numeral-centric, and performed well across a range of screen resolutions. It had to be space-efficient, with special consideration for mobile devices in “portrait mode” without compromising legibility or readability. Structurally this meant letterforms with robust details, flat terminals and open counter-forms. Stylistically this meant a typeface aligned with humanist design principles. “Its spirit”, the brief said, “should be fluid, delightful, easy, calm and humanistic.”

I don’t often get briefs this precise. Most of the functional requirements were understandable and relatively easy to address. What I found most curious was their specification for a sanserif “humanist” style, especially coming from a large Silicon Valley company. Over the last five or so years it seems the prevailing typographic wisdom/style for the Valley set is firmly neo-grotesque. Apple kicked it off firstly with Helvetica, then later on moved to San Francisco. Google are iterating with Roboto, and almost everyone else has settled on one Helvetica derivative or another. So, naturally my interest was piqued and we kicked off the design process.

Concepts

Klim_PayPalSans_De_Aetna_1495.jpg

Francesco Griffo’s typeface used in “De Aetna” printed by Aldus Manutius about 1495. Cropped.

Typeface categorisation is a fluid concept. There is little consensus on the precise boundaries of style and and genre. However, humanist typefaces are considered to have excellent legibility and form the bedrock of Roman text typography—their legacy stretches back half a millennia to the seminal Renaissance typefaces of Griffo, Jenson, Garamont & co. In general contemporary context, “humanist” is taken to mean clear, open letterforms with bookish proportions, old-style numerals and open spacing. So, with this in mind, we offered three main concepts with the working names Cimarron, Morris and Dutch.

Klim_PayPalSans_Concepts_Cimarron.png

Ben Kiel’s “Cimarron” concept.

The most humanist and dynamic of the three, Cimarron draws from several contemporary stylistic moves. The counters are open and crisp, the arches and curves are generous and inviting. There is pronounced contrast in forms like A, E & k, carried through to the sharp connections. This concept was designed by the multi-talented Ben Kiel, but was declined for further development for PayPal. Fortunately it lives on and can be seen on Ben’s site.

Klim_PayPalSans_Concepts_Morris.jpg

Above: “News Gothic” by Morris Fuller Benton, c. 1908. Below: the “Morris” concept.

Morris is quintessentially American. Pragmatic and extremely robust, Morris hems closely to Morris Fuller-Benton’s classic News Gothic, circa 1908. Designed for the most trying of conditions, these letterforms have stood the test of time. They have inspired a whole host of typefaces, from outright metal-type copies like Trade Gothic in the 1960s to contemporary digital typefaces like Whitney. The numerals in Morris are a hybrid of Fuller-Benton’s own designs and American banknote/check serial numbers, appropriate for financial data.

Klim_PayPalSans_Concepts_Dutch.jpg

Above: “Romulus Sans Serif” by Jan van Krimpen, c. 1930. Below: the “Dutch” concept.

The direction we settled on was Dutch. In the 1930s Jan van Krimpen made Romulus Sans Serif, one of the first humanist sanserifs to match a seriffed typeface, but it never really made it past the concept stage into wider production. Dutch takes several cues from these prototypical forms like the clean vertical terminals, low arches and very open counters. The proportions and spacing of Dutch however are much more contemporary and appropriate for screen application.

The primary use for PayPal’s typefaces are mobile phones. Most people use their phones in portrait orientation. This means horizontal space is limited, and vertical space is scrollable/theoretically infinite. This suggests the letterforms need to be horizontally economical, without impacting either legibility or readability.

Refinement

Examples of PayPal Sans Small Regular with a large, normal and small x-height.

Examples of PayPal Sans Small Regular with a large, normal and small x-height.

Typeface proportions are governed by the relationships between the letterforms. In general, long ascenders and descenders create a low x-height, looking stately and elegant. Shorter ones create a higher x-height. More compact vertical proportions allow tighter linespacing, which may allow more lines per screen and create greater affordance on UI elements like buttons.

Klim_PayPalSans_Sheldon.jpg

“Sheldon” by Jan van Krimpen. The extreme x-height was intended for setting bibles efficiently.

As a warning, there is a point where a large x-height can start to work against itself, other letterforms become compromised and legibility can be reduced. It is not simply a matter of saying, “a larger x-height is better”. As always, balance is necessary.

Klim_PayPal-Big-Small-Comparison.png

A comparison of proportions and details between PayPal Sans Big Regular (left) and PayPal Sans Small Regular (right).

We agreed that one typeface could theoretically work in big and small sizes, but it’s a sub-optimal solution. Typefaces optimised for small sizes tend to look clunky when scaled up, and display-orientated typefaces fall apart when scaled down.¹ Dutch was promising at small sizes but lacking when made big. So we started developing a related set of styles. We dropped the working name and christened them PayPal Sans Big and PayPal Sans Small.

Having two distinct optical targets allowed us to fine tune their purposes. Big could have a broader range of weights, tighter spacing and more generously proportioned letterforms. The caps especially are broader, referencing the lapidary underpinnings of Romulus Sans. The lowercase is wider too, with ascenders and descenders relaxing outwards.

Klim-PayPalSans-Three-Quarter-Numeral-Comparison.png

A comparison of the rejected ¾ numerals (left) and the final numerals (right).

We initially recommended tabular ¾ numerals as the default style for Small. They had to be tabular because of the frequency and importance of numerical data for PayPal’s users. We thought ¾ was a good compromise to work best in either all-cap or running text. However, they were too bouncy and stylistically weak when used by themselves. They were neither here nor there, they looked like a mistake. We instead kept the height and aligned the baseline. This proved to be an excellent solution, they’re unobtrusive in text and clearly delineated in a string of caps.

In Use

Klim-PayPalSans-InUse-Website.jpg

PayPal Sans Big Light and Small Regular in use on paypal.com

One of the last requirements from the brief was “transparency”, which was explained as, “the typeface should not call too much attention to itself, but profess an understated elegance.” This is a difficult quality to consciously design towards. It was something I hoped would express itself through the process—there’s not a defined “understated elegance” metric that we can test against. Happily, when I saw PayPal Sans Big & Small used together on the website, I knew we’d nailed it. It’s a subtle thing, there is only an 13px size difference between the styles but they work together very well.

iOS-Onboarding-Screens.jpg

The PayPal iOS app welcome screens.

PayPal had the confidence and foresight to buck the neo-grotesque groupthink of their Silicon Valley brethren, and I’m grateful to have been involved. A custom typeface allows them to reinforce their brand and treat their users with respect. Good typography is the absolute bedrock of user interfaces, and good typography can only be achieved with typefaces sympathetic to the needs of users.

 

***

 

1. For a deeper understanding of the intricacies of “Text” and “Display” typeface design, please refer to the excellent “Size-Specific adjustments to type designs” by Tim Ahrens & Shoko Mugikura.

All trademarks are the property of their respective owners.