OverviewExamples_0000_Screen Shot 2019-10-10 at 11.57.57 PM.jpg
 

Hulu’s Custom Font

CREATIVE DIRECTION, PROTOTYPING & PRESENTATION

In preparation for an upcoming product launch in 2016, Hulu underwent a rebranding. The new product UI was centered around content photography using typography in simple grid layouts with a clear hierarchy. Gradient color overlays, frames, and over/underlining bars were used as secondary design elements to support the content, navigation, and legibility.

Although beautifully used in hulu’s new interface the type family Graphik lacked a certain “hulugan” quality. Graphik is a very well crafted typeface with all of the features of a good font. Although perfect for complex layouts Graphik didn’t have as much personality at large sizes and wouldn’t be the best choice for large applications like billboards and posters. The goal was to align the marketing materials more closely with the simplistic grid-based UI while letting the type show a smart and funny tone.

Hulu’s Creative Director approached a type foundry based in San Francisco, Psy / Ops to create a custom typeface.

I helped work on the original design brief for the foundry. Because of my interest and knowledge about type and the typographic needs of the brand I was able to translate feedback, questions, suggestions from stakeholders to the foundry. I relied heavily on the expertise of the foundry but was able to communicate the importance of hulu’s objectives when giving feedback. I made some key decisions on some of the font’s characteristics and influenced the character set and the number of styles in the family.

I tested all font prototypes in commonly used marketing material and presented each font style case study to department heads to help visualize the process and point out specific differences and features that made this custom font unique to the brand Identity. The result is HuluStyle a custom type family for Hulu’s marketing needs.

 
Onboarding UI screenshot using Graphik

Onboarding UI screenshot using Graphik

 
OverviewExamples_0006_Screen%2BShot%2B2019-10-10%2Bat%2B11.59.18%2BPM.jpg
OverviewExamples_0006_Screen+Shot+2019-10-10+at+11.59.18+PM.jpg
Screen Shot 2019-10-10 at 11.08.05 PM.png
Screen Shot 2019-10-10 at 10.46.12 PM.png
Screen+Shot+2019-10-11+at+11.28.17+AM.jpg
subway-pillars_r2.jpg
Screen Shot 2019-10-10 at 11.07.56 PM.png
Screen Shot 2019-10-10 at 10.47.38 PM.png
Screen Shot 2019-10-10 at 10.47.02 PM.png
Hulu-Sans-hulustyle-overview4.jpg
Hulu-Sans-hulustyle-overview5.jpg
Case study of typeface in use.

Case study of typeface in use.

Hulu-Sans-hulustyle-overview13.jpg
Hulu-Sans-hulustyle-overview15.jpg
Hulu-Sans-hulustyle-overview14.jpg
Hulu-Sans-hulustyle-overview19.jpg
I updated or created all of the hulu logo lockups, adjusted kerning and relationship sizes.

I updated or created all of the hulu logo lockups, adjusted kerning and relationship sizes.

Hulu-Sans-hulustyle-overview9.jpg
I created the typography rules around CTA buttons for web ads and email type styling.

I created the typography rules around CTA buttons for web ads and email type styling.

Early type styling guidelines and templates for live Hulu Sports campaign.

Early type styling guidelines and templates for live Hulu Sports campaign.

Developed general typography guidelines for new Hulu brand.

Developed general typography guidelines for new Hulu brand.

Finalized very specific placement rules for our halo bar based on weight and size on type.

Finalized very specific placement rules for our halo bar based on weight and size on type.

Created Tune-in guidelines for varying line length and stroke size.

Created Tune-in guidelines for varying line length and stroke size.

Screen Shot 2019-10-10 at 10.53.17 PM.png