San Francisco: Streamlining a Modern Classic

Creating a typographical specification for the world’s most technologically familiar typeface

OVERVIEW

For the first assignment in my current User Interface course at the RED Academy, we were all given the project to individually create a landing page for a typeface family. The caveat of the project was that the decision of typeface would be outside of our choice. Using the tools we learned in Adobe Photoshop during that one week period, we had to illustrate a spec that would fully function in persuading potential designers in downloading the typeface, and ultimately engage the viewer in wanting to learn more about it. The following is an investigative study in my design process in creating the typographic specimen, San Francisco: streamlining a modern classic.

PROCESS

Research

My process of digging into the roots of SF were far too lengthy — I set the intention of getting a full scope of the typeface; and researching official information and even cross referenced it to unbiased opinions formulated by other design keeners, much like myself. The Apple developer’s site did not provide much history, and therefore I resorted to hours of scrolling multiple forums and the WWDC keynote to sustain my cumulative knowledge on the font. Anthony Cavedoni himself described San Francisco as, “both inconspicuous, yet beautiful”, and the quote deciphers the process of uncovering I underwent. For a new typeface, there was an abundance of hype & usage, but barely any back history. To veer the potential Internet hole that I found myself in, I have included a quick snapshot of my findings:

  • Sans serif, neo-grotesque
  • Available in two variants, SF Pro and SF Compact; each with two optical sizes, display and text
  • Released to the public in November of 2015 and was the first typeface created by Apple in 20 years
  • Apple utilizes SF as their official typeface for all platforms/products, including all web, product watermarks, soft/hardware, and corporate documents
  • Licensed to registered 3rd party developers only for the development of Apple platforms
  • Available in 6 weights for text families, 9 for display

Finding the WHY: Design Inception

Before I began the design process of creating the landing page, I dissolved the typeface into rather intangible properties; breaking down my findings from my prior research. Moving from the inside out, I started with the core, and externalized to the mood of San Francisco, then finally the outermost layers of how I could tell this story. This would gain a sense of direction in regards to the emotion I wanted to convey for the project, and not just the concrete information I acquired. Below is the simplified identity behind the project. My final core that was at the root of SF & its features was that it’s a typeface of inclusivity — this became the ultimate why moving forward.

Finding the why; design inception exercise

Moodboard Creation

After delving into the SF font family history, I decided to look outside of the cultural associations (and familiarity) that the typeface carries. Although we are subconsciously aware of it, SF has a consistent driving force in our day-to-day interactions. I wanted to steer away from just the expected branding that Apple is known for, yet pay homage to its history and end use to tie in that familiarity.

In terms of the overall art direction for the project, I also wanted to have a sense reference to the original typeface inspired its modification, and gradually that replacing. I wanted to incorporate the new popular resurgence of 50’s mid century modern feel that Helvetica and other neo-grotesque styles derived from. Since our initial objective was to present this typeface to other potential designers, they would capture that zeitgeist feeling. Mid century design is curated, clean, yet characteristic — similar to SF.

Project moodboard; incl. art direction, colour palette, and spatial tessellation

Having the direction finalized, next was choosing colors that would support my concept. Looking at my design inception sheet, I re-routed back to the why of the typeface: maximum amount of clarity. For a broad of an audience as Apples — i.e. 64% of ALL American citizens as of 2017, the purpose of San Francisco was to accommodate these worldwide users and elevate their ease of use while using the products that they both know and love. Furthermore, the two major key features of the type are as follows; firstly, screen maximization and secondly, legibility. The sibling fonts and the automatic optical sizing in respect to the display and text options for each, was to ensure all their users would enjoy the reading experience of their interface despite the size of the screen. Taking this into account, I shifted my focus from the typeface itself and to the values behind SF’s purpose. Keeping the intended audience in mind, I began questioning the challenges that are present for designers with visual accessibility handicaps. More often than not this is overlooked (because of its rarity), but I felt that this was necessary for a typeface as widely used, like SF. Reading into color accessibility, I chose the colors below due to the non-varying difference values for CYMK and Protanopia/ Deuteranopia affected users. For other API’s, I made sure to label all call to action buttons, not have them color oriented, and ensure links were underlined to differentiate between body text.

Implemented accessibility features

These two sections of visual languages reaffirmed the over-arching feeling that I derived from the typeface; now with a solid direction of where I wanted to take it.

Manual to Digital Translation

With my wireframes, I initially started with a grid format that was equally structured, as it was boring. I found that it was an easy escape route to block out each section by its narrative; following a linear header, body, graphic, call to action equation. Although this did achieve its goal for legibility, the repetitive pattern was unchallenging throughout the page. With on-going feedback from Andro, my instructor, he reminded me to refocus my approach and revert to the use of white space that was present in my moodboard. Moving forward, the ideations became progressively abstract and “tiled” with a Z pattern representative in the assets themselves. Lesson learned — legibility and abstract templates are not mutually exclusive. These moving parts of the equation do not need to discount aesthetics. In hindsight, my first wireframes for the landing page show the bare bones resemblance of the final product. I kept the chapters in order, but had to increase my point of view to do so.

Initial low-fi wireframes

For my illustrations, I decided to choose various sized Apple products in light/dark shades to support the end use for my typeface. Similar to a china-doll-esque trick minimizing and maximizing in size, I wanted the modular shapes to showcase the platforms that SF are available in. Although the icons are merely for entertainment purpose for the viewer, the round edges were intended to emulate the simplicity and flat, rounded edges of the typeface. Below are a few of my first sketches of the Apple watch graphic vs the final ideation before the edges were softened.

Multiple ideations of the Apple Watch graphic used in project

CHALLENGES & LEARNINGS

An opportunity of improvement I encountered was directly correlated to the first impression of the brief, and how to approach the SF typeface so that my direction was still cohesive with the parameters of the SF intention. On one hand I could have gone strictly minimal on an Apple branded route, or do so on an unorthodox path; which was the latter of my alternatives. Throughout the project I struggled with the checks and balances of questioning whether or not my vision “made sense” to others and not just myself. In such a short duration of time, I’ve learned that visual communication is about going back to that WHY and to utilize that question as much as possible from beginning to end.

On that note, I had a string of challenges throughout the project with matching my personal expectations with the strict timeline. As a self-proclaimed perfectionist, I’m my own worst critic and will not settle for less than the extent of what I am capable of. My biggest take-away was time management, because as meticulous as I am towards detail oriented aspects; I found myself down to the wire on assets that weren’t as important as others. The biggest learning curve was the prioritization of what needed to get done, and sticking to that delegation. The extensive research was definitely still beneficial, but that period could have been condensed in a one-day go, and maximize that time on the actual juxtaposition of the layout itself; where I struggled in doing so on a decisive manner. Rather than exploring all potential ideations, I need to decide which is “best suited” for the overall solution of a project, not just the “best”. What was really necessary and what could’ve been stripped back? Why is this portion even necessary? Another lesson learned — no risk, no reward (but be reasonable).

FINAL DESIGN

Individual stills from carousel gallery; examples of use & offerings

Walking through my final concept, the landing page first navigates the user from a rotating animation of the Apple products that ideal for SF; and the tagline “Streamlining a modern classic”, to quick links for users who do not need further information and can directly download it and read the guidelines. I chose this slogan to align with the mid-century modern feel behind the typeface, and that it marriages the intention Apple has set. The company was innovative in producing a watermark to copyright all their streamlined experience and it was the beginning of an instant classic for future generations to come. Below the history of the typeface, I wanted to emulate a carousel gallery of the weights, difference between optical sizes, upper and lowercase numbers and letters, while using each representation as examples of use. With the depth of information that comes along with this typeface, I still intended to represent it in the least overwhelming platform. Viewers would have the access to scroll through each still at their own pace and not in a flashing speed as visualized by the gif in my prototype. Following the spec information in the carousel gallery, are the key takeaways of the typeface where users would be able to navigate which feature they would like to learn more about. Hypothetically, the buttons would re-direct the viewer to additional information pages that included the SF keynote regarding that section and how it could potentially benefit their end use. Lastly, the call-to-actions are once again listed at the bottom of the page to come full circle and allow the viewer to download the typeface family for their specified end use

In hindsight of reflecting on my final product, I believe I created a landing page that lets the typeface speak for itself. It’s breathable, approachable, accessible, and clean; all definitions present from my initial impressions, and can be translated throughout the project. The objective was to sell a font, but ideally I also wanted to tell a story of intention with it.

View SF: Streamlining a Modern Classic on inVision, here.