Case Study: Landing Page Selling San Francisco Typeface

Task

• Create a landing page to sell the typeface San Francisco
• Conduct research, create mood board and style guide, and build Lo-fi and Hi-fi mock-ups of the landing page on Photoshop

Tools Used: Photoshop

Timeline: One week (April 10 to April 17)

The Typeface

The Research

San Francisco is the new default font for all Apple products, including the Apple Watch, iPads, iPhones, and all Mac devices. It was designed to replace Helvetica Neue as a modern, bolder expression of a simple serif font. On a functional level, it’s primary purpose is to be easy-to-read on small screens (i.e., the Apple Watch screen). San Francisco (SF) has a number of sub-families and variants that dynamically change depending on font size. This dynamic shift eases font legibility at small font sizes.

Antonio Cavedoni, one of the more well-known designers on the SF design team, obtained his Masters in Typeface Design and was involved in the creation of all the SF subfamilies.

Inception Sheet

The “why” of the Landing Page is to sell SF as a modern font, particularly for small screens. The page needed to convey the pros of the font — its legibility and boldness, as well as its variety and dynamic qualities on the web.

SF evokes an edgy, bold feel. I felt a sense of nobility in that it was an upgrade to the already legible and crisp Helvetica Neue. The modern, edgy vibe is complemented by pointy, geometric shapes and movement that is stark and rigid. Colours could be warm (e.g., reds and oranges) but strong and bold. The space on the Landing page could be compact, but importantly, also legible.

Mood Board

Narrowing down the colour palette was the first challenge of this project. I originally chose seven colours that were sampled from an art piece (lower right corner of the board) that represented the mood I wanted to capture.

However, I quickly realized there were too many colours to work with.

I also picked images that showcased geometric shapes — triangles and pentagons. The vibrant city scape evoked the bold and noble vibe that I was looking for.

Based on this initial conception of the mood, I narrowed down the colours to four…

…and revised my mood board to look more modern and edgy, while keeping the same sharp, chic theme. I decided that greens and pinks didn’t capture the mood effectively and were too soft and natural.

The updated mood board had more of an“edgy” vibe by including a fashion sketch and modern hair styles. It also featured a loud party scene that exuded the stylish aspects of the font. I chose textures that were geometric as well as coloured appropriately, glossy, and shiny.

Lo-fi Landing Page

Next, I crafted the content and the story that the Landing page would showcase. I started with the header, which would display the font name “San Francisco” with triangular ornamentation.

I determined that the most important content to show immediately below the fold was information was SF’s use cases; in particular, the fact that it was highly legible on small screens. To highlight this, I used a picture of the Apple Watch alongside a short description of the font.

Underneath that, I aimed to display a few of the major sub-types: SF, SF Compact, and SF Hello, with a brief description of their use cases.

The family displays were followed by the Style Tree, which fully broke down the displays of various font sizes in at least two of the sub-families. This allows the user to view the shift from a “Display” style to “Text” style that happens dynamically when font size shifts from size 20 to size 19.

Next, I showed a blurb about one of the prominent designers, Antonio Cavedoni, followed by font pairings (not pictured) and a footer with the CTA to buy the font.

Hi-fi Landing Page

The final hi-fi version of the landing page closely mirrored the layout of the lo-fi design.

The header was simple, containing only the font name in bold, and three descriptors underneath that reflected the personality of the font. These were overlaid on a textured background that were front-facing triangles behind the Title, but slowly angled away from the reader on the right side of the header, shifting eyes towards the “Download Now” CTA in the menu, which was highlighted in the orange accent colour. Along the bottom edge of the header, three decorative triangles point downwards to lead the user’s eye below the fold.

Here, one finds a description of the font and the reason for its creation (primarily, to legible on the Apple Watch). The watch was originally shown on human wrist — I turned the wrist a flat red with a gradient so that any user could imagine that wrist as their own.

Next I should some of SF’s families with brief descriptions. The layout of the “Super Family” section is such that users can scroll through the three-card layout and find the family its use case.

The second to last section showcases one of the head designers, Antonio Cavedoni. He is an expert typographer who worked on all of the SF families.

Lastly, I picked three serif fonts that pair well with SF. These fonts are the same size as SF and are the same style (e.g., the “a” of both fonts have the overhead tail).

In the footer are some extra options, such as a Contact option and Help Centre. Lastly, there is another CTA to download the font.