What is Prismatic
Prismatic is the best way to discover relevant news. We connect to your social accounts, learn about what you are interested in, and get you straight into the awesome content without any friction. Besides focusing on starting you off effortlessly, we have also tuned the interactions for exploration and discovery, and we’ve optimized the visual design for letting great content shine.
Content-centric design
The central goal of our design is to put the content first and get out of away. For example, we recently removed the traditional top navigation bar from our web and mobile products (you'll see soon) to give more vertical space for content. We’ve also broken down unnecessary horizontal structure to increase the width of the main content area. Although unorthodox, removing these non-essential elements allowed us to do better layouts with bigger images.
Prismatic is heavily inspired by the Swiss style of graphic design, which is aligned with our goal of emphasizing content and imposing structure to make its consumption frictionless. The most important elements Swiss graphic design is the type, the spacing around the type, and how type is laid out with images. Type and images are the focus, and our job is to draw attention to them with whitespace and stay out of the way.
Why the Swiss style?
Modernism started as early as the 1880s and paralleled developments in science and industry.
As modern industrial societies evolved, humans wrestled with balancing the logic, science, and rationalism of this new “machine age” with our base sexuality, subconscious, and spiritualism. This is not just about new and old ways of life. These forces of rational thought and emotion may seem contradictory, but balancing them mirrors the daily human struggle to reconcile the older and newer parts of our brain - a balancing act that is very natural for us.
We feel that the set of forces that actively drove modernism are the same set of forces that are present now. The pace of technological change and its impact on society is likely even more pronounced than during the industrial revolution.
Modernism influenced Bauhaus, which pushed for simple abstractions, rational functionalism, and finding a way to mass-produce objects that express the charisma of the designer and spark curiosity rather than dehumanize. If you follow modernism from the early years of modernism through the later years in the 1960s, you can see how it tends toward greater abstraction and expression through simple perfection in process, materials and technique.
Henri Matisse, Woman with a Hat, 1905
Kazimir Malevich, Suprematist Composition, 1916
Frank Stella, Sunset Beach, Sketch, 1967
The Swiss style, or International Typographic style, is the graphic design embodiment of modernism. Although it’s roots go back through modernism and especially German Bauhaus, the Swiss style that sprung up in the 1950s had some unique attributes. The focus on type meant the emphasis was now not only on simplicity, but also on readability. Typefaces were not just considered for copy, but also as a core design element. The Swiss style was also the first real focus on systematic incorporation of photographs.
Creating a vibe with type:
Basic Typography – Ruedi Rüegg/Godi Fröhlich 1972
We want Prismatic to be readable and engaging across all devices. Obviously readability is very important. If you’re doing layout well with whitespace and images, then a lot of the vibe of the design is going to be set by the type details - font, relative sizing, and color. Let’s talk about the type design implications of balancing machined precision with an engaging vibe.
- We want typefaces that capture this balanced vibe of playfulness and precision.
- We need versatility because we only want to use two typefaces, but and we need to suggest a natural reading flow with a balance of size, color, and whitespace around the headline, body, and meta-data.
- We want to mix fonts with different features, but from the same historic period. It is hard to make older Clarendons work with 1950’s neo-grotesk sans-serifs, but the same sans-serifs go well with the 1950’s clarendon-based slab serifs.
- We want geometric proportion and a strong balance between vertical and horizontal stroke for both readability and a feeling of machined precision.
Geometric proportion with balanced vertical and horizontal stroke
We decided to focus on geometric proportion and balance between vertical and horizontal stroke as key goals. These typefaces are modern and readable on any platform, and they match the vibe we’re going after. A lot of fonts have imbalanced vertical and horizontal strokes - this makes them harder to read, and it feels more handwritten.
Like the history of modernism we describe above, type design is a long lineage moving generally away from human handwriting and toward a more geometric, machined precision. We want to smooth over the quirky imperfections, but not too many of them.
Garamond to Baskerville - toward more balanced proposition:
Garamond is French old-style type design from 1530 that was forward-thinking in geometric proportion and balance in stoke. Still, it had some imbalances, like the lowercase “a” and “e”.
English old-style and traditional type design, starting with William Caslon, developed this further, and John Baskerville created more machined serifs.
These typefaces set a direction that we felt was right, but they are too imprecise and unbalanced for the different roles and devices that we need to deal with.
Bodoni and Didot - balanced in geometry, but not in stroke:
Some modern faces came after Baskerville, in particular Bodoni from Italian type designer Giambattista Bodoni, and Didot) from French type designer Firmin Didot. These faces were more perfectly geometric, but they pushed for further contrast between vertical and horizontal strokes, so they don’t work for our goals.
Slab Serifs and Clarendon - machined charisma:
Slab serifs (sometimes called Egyptian), like Clarendon), are charismatic typefaces. Clarendon is based on the lineage from Garamond to Baskerville, but with the hairlines drawn bold for more impact, which is what gives the vertical and horizontal strokes a better balance. This balance of charisma and precision work really well for us.
Neo-grotesque sans-serifs:
We looked at modern sans serifs starting with Günter Gerhard Lange and Akzidenz-Grotesk. It was interesting that he was influenced by many of the fonts we liked a lot during our research into finding a serif. He did interpretations of them for Berthold - Baskerville, Garamond, Carlson, Didot, etc. Akzidenz takes their geometric proportion and balanced strokes to a whole new level, and drops the serifs.
Contemporary versions of Akzidenz-Grotesk descend from a late-1950s project to enlarge the typeface family. These efforts to achieve a more machined yet human feel lead to Helvetica from Max Miedinger, and the works of Adrian Frutiger, like Univers. Like Gunter Lange, you can see the lineage in Frutiger’s work, who also designed versions of Didot and did three slab-serifs. We’re especially big fans of Egyptienne, which is based on the Clarendon model, and pairs really nicely with modern sans-serifs.
The final decision:
We use Egyptienne and Akzidenz-Grotesk, both legendary typefaces; so there’s nothing particularly novel about the choice. Type design is art with a working-class result, where a masterpiece takes several years to complete and only a handful of fonts stand the test of time with broad appeal and utility. As we mentioned in the earlier section on vibe, we also love the feel of these modernist typefaces.
We really wanted to limit the selection to only two fonts, and we were hoping to be able to do a slab serif for headlines and body copy, and a sans-serif for everything else. We did entertain serifs before we discarded that idea and restricted to only slabs. We loved, Baskerville, but it wasn’t nearly as good as the slab serifs on the headlines, the body was less readable, and didn’t fit well with the more machined feel of contemporary sans-serifs we wanted to use.
For the Slab-Serif, we started with Clarendon. We really love this typeface, but it just wasn’t working that well on the body copy. We couldn’t bring ourselves to do 3 fonts. What’s more, we expected Clarendon to dominate the headline competition, but we were surprised to see how much we loved the headlines set in Egyptienne. Egyptienne is amazing on body copy across every platform. On the iPhone, it feels like first rate print design. This really drove home the point of working with the fonts on real data as a core part of the design process and not at the end just to “check that it works.” We may not have gone with the Egyptienne because the Clarendon is so much more charismatic when you set a single word in it on a poster.
For the San-Serifs, we had a battle going between the classic Akzidenz-Grotesk, and the more modern families - Univers in particular. Univers is a great typeface, but this turned out to be another example where real data was important. We really don’t like the chopped lowercase ‘t’ in Univers. Certain characters can rule out a whole face for a system like this if they don’t have the right vibe or readability.
The Grotesk also has amazing propositions, and somehow strikes a nearly perfect balance between machined precision and human warmth - just look at the playfulness in the curves of the numbers. We love the boxiness from the thickness of the strokes. The typeface is extremely versatile, we could do a sans-serif-only version of the site entirely in Grotesk and it would be fantastic. It’s strong in small sizes, strong when set light, medium, or bold, and it makes for clearly readable and engaging meta copy regardless of the color or size.
The overall vibe really comes together because the typefaces have the same aesthetic as our overall design. The fonts, their relative sizes, and their colors, together with just lines and icons is all it takes to create the vibe for the entire product. We haven’t found tuning variables like kerning or line height to be a big deal for vibe or readability when you go with the best typefaces - the standard settings work great in most cases.
A note on working with real data
Prismatic looks very simple visually, but it is a complicated product to make. Type is co-dependent with things like layout algorithms and text breaking rules. Since the breadth of content is so massive and dynamic, we learned to adopt a fluid design workflow, where we jump back and forth between research, whiteboard, paper sketches, photoshop, and programmatic explorations with real data. When you’re dealing with a complicated dynamic layout system like this, you must make decisions based on real data. Add the constraint that it has to work across web and native mobile apps, and the need for making decisions based on real data is even more important. We found that what we liked best in a Müller-Brockmann book or on the screen in photoshop was not what we liked best on real data. Photoshop type rendering is pretty poor, which is another reason going straight from print to code worked well for us.
A related lesson is that, when cycling through fonts on real data, it is important to tune the font size based on the typeface. Each font needs to get it’s best shot at being the winner. We nearly missed the Egyptienne because when we first tried it on the headline, it was much weaker than the Clarendon. When we bumped up the size of the Egyptienne, the difference was amazing.
It was all worth it
We took a lot of time and stayed patient with our type, and we think it was worth it. This foundation makes our jobs a lot easier. Prismatic is fun and engaging with these fonts and just a little color. Come check it out for yourself.