Beyond the campaign, the Clinton brand strikes people to continue to move forward. Between the Pantsuit CSS Library, her logo and that slightly fattened san serif body font, Jesse Reed, Michael Bierut, Mina Markham and others have embodied what it means to design for America’s future.
Clinton has spent the most money on her branding campaign than any other candidate before her. With upwards of 2.4 Million dollars on identity and web presence, she has underscored the nominal approach to persuasion, focusing on results while turning the screws on her various on-line platforms. She has many. In addition to her multifaceted website equipped with every donation tactic HTML and JS has to offer, her campaign also powers “Literally Trump” and “The Briefing” both web applications that power user engagement.
Hillary has undoubtedly devoured her competition by encompassing all forms of technology into a fastidiously arranged campaign lead by Robby Mook, Joel Benenson, Amanda Renteria and John Podesta all whom have diligently hired out some of America’s finest graphic design masters and creative development teams. In the hearth of her marketing material, the Clinton typeface is called Unity for the main body and Mercury for everything else. It’s a customization of Sharp Sans by Lucas Sharp and transcends the Barack Obama look debuted in 2008 that focused on Gotham and other bold san serifs fonts rather than the old book faces that many other candidate’s used to flaunt. “With Sharp Sans, the Clinton campaign chose a design in a very similar vein: an unadorned Geometric sans with a large x-height and regularized letter widths. One difference is this site’s more frequent use of lowercase, striking a friendlier tone than the commanding, authoritative all-caps of Obama 2008 and its followers”, said Stephen Coles, Font in Use.
A Symbol for America’s Many Faces
Hillary Clinton debuted a fresh logo in her 2nd bid for the White house earlier in 2015. The new logo launch received a blended mix response from the people. Few happy while others not so amazed.
The new logo sparked a Twitter buzz when it was launched as it reminded some of a plane flying through the twin towers. In addition the design—a loyal, patriotic combination of blue, red and white colors, an arrow aiming in the center of the letter “H” were thought to be “boring”, “confusing” with many saying, “Why an arrow in red pointing toward the right?” Were voters going to take it as a forthcoming shift towards more conventional position?
Despite the naysayers, when one looks under the covers, Clinton’s logo is flawless and well-designed, speaking from America’s graphical standard best. It’s distinctive and unique in its texture, with an utility that embraces design, broadcast, and digital platforms. In efforts to portray “Pushing America Forward”, the symbolic arrow striking through the “H” manifests itself through its color scheme into the a historical symbol much like what Hillary stands for. As the first woman to run for president she had to have a symbol that could devour the negativity and also be flexible to the different audiences that she represented. The logo had to embody the statement “______ for Hillary”; it had to adapt to America’s many faces.
Jesse Reed under Michael Bierut, partner at Pentagram Design, were presented with the task. Focusing most of their attention to iconography, type and color the duo started with a grid system and inspiration from “basic graphic principals and typography, much like what you see the subway system lined with”, Jesse Reed spoke with Adam Baker from SocialBrary in a Q&A session. Jesse, inspired by the project, spoke with humbleness that it “felt incredible to be apart of the project”. He continued by saying, “The second principle evolved out of the core mark, and was the idea of an inclusive and constantly evolving system. As many people have now seen, the logo isn’t static, it can become an image of a state, a menorah, a local business, among many other possibilities. People often criticized that her logo was so simple their “two-year old could do it.” That was the point — creating a visual vocabulary that anyone in this country could participate in, regardless of talent or graphic skill level. Naturally, this led to a very simple color palette and typographic decision — three (core) colors + one typeface + a dynamic symbol — this was the foundation of our work for the campaign.”
The right-facing red arrow, which was much-criticized earlier, now looks as if it was likely meant to be; aiming towards a perfect way forward. The diverse backgrounds aren’t just pioneered graphic solutions—but they are the visual example of the values Clinton structured her campaign around. Pentagram’s design style seems to mimic this past project. Looking into history to find a sort of simplistic approach to consolidating emotion, it seems that Reed has taken to Bierut’s as an understudy. “Once you’ve done your homework, its simply all about practice,” Reed says.
Style guides in 2016 have evolved over the years. Today, they have manifested themselves from being a static document to a living, breathing, animated digital interface. You can say that the entire Hillary Clinton dot com site is one big style sheet created by Mina Markham, a frontend architect living in Brooklyn, New York whom teaches for Black Girls Code, and co-organizes Front Porch and other frontend design Conferences. “The core CSS architecture of Pantsuit is based around a combination of SMACSS and Harry Roberts’ ITCSS, along with his brilliant name-spacing patterns. Each class name is prefixed with an indicator of that class’ purpose and scope, based on the ITCSS inverted triangle,” Mina said. So lets decode this:
The bilingual form of the Pantsuit consists of organizing content in grid patterns contained in a CSS library; or organized scripts that are called from the HTML. In non-technical terms, the Pantsuit is a collection of CSS code files that developers use when building new products, like a file cabinet.
The text styling was unique and constructed in a similar fashion. In Mina’s Medium post she describes the text organization as, “One easy step towards achieving compliance was to ensure that the content of each page was in logical order. With that in mind, I made the decision to decouple the sizing of headings from the elements. This means that h1, h2, etc, have no sizing associated with them. Instead, the typographic scale is scoped to classes such as .c-headline-alpha. This ensures that headings are used for semantic, hierarchical purposes and not to achieve a specific font size. Using the correct HTML elements alone addressed a large portion of our accessibility needs.”
The styling is embodied in every piece of software that the Campaign publishes. From her homepage and subpages, to the Literally Trump App and the Briefing, the Campaign has the same, structured look, text size and color. Its hard to see something on-line with blue, red and white along with the fattened san serif and not have it bleed to the users that this is ‘Hillary’s space’.
Focusing on representing the ‘Hillary-Look’ for the long hall, Markham and her team built a style guide and open documentation. It seems practical that the “presidential” style can live on for the next four years. (*Updated Sadly, it didn’t)
H is for Hillary
To many graphic design professionals (irrespective of support to any political party), Hillary Clinton’s launched logo and brand has been heavily critiqued. The likely Democratic presidential candidate since unveiling the new campaign logo is blanketed all over her supporting site and stands right at the topmost of her Facebook page. On her refurbished Twitter account, the ‘H’ has also taken over the place of the iconic image of Clinton with dark classic shades and holding her Blackberry.
The response from the campaign team however, is to take the mockery and run with it. Going for an symbolic design has also unlocked the door to all modes of Internet fun: a new imitator font named “Hillary Bold”, “Pantsuit CSS Library” and a self-made widget that lets everyone make their own logo similar to Clinton, and plenty of unusual interpretations, containing an air-plane striking New York’s Twin Towers and ripping the WikiLeaks and Federal Express logos.
The New Donkey
Of course, the campaign results will transcend way past the candidate’s logo or web presence, but, political experts say this remains an imminent and a critical branding event much like the buzz around Obama’s ‘O’ or even during the 19th century, how elephants and donkeys came to be linked with Republicans and Democrats. A decent logo or electoral campaigns can go everlasting in the modern-day era of digitalization where campaigns are in great need of trying to spread attention-hungered possible voters, donors and volunteers via their mobile phones, tweet and Facebook feeds. Time will tell.