{"id":8931,"date":"2017-02-03T10:26:10","date_gmt":"2017-02-03T10:26:10","guid":{"rendered":"https:\/\/www.designmantic.com\/blog\/?p=8931"},"modified":"2025-05-14T13:09:14","modified_gmt":"2025-05-14T13:09:14","slug":"mozilla-logo-and-branding","status":"publish","type":"post","link":"https:\/\/www.designmantic.com\/blog\/mozilla-logo-and-branding\/","title":{"rendered":"Mozilla Logo Is The New Face Of “Open, Not Close” Branding!"},"content":{"rendered":"

Firefox has amassed millions of users over mobile devices and desktop but most remain oblivious to Mozilla\u2019s educational and advocacy work. The brand has frequently struggled to discern itself from its famed products to channel attention to other lesser-known projects it is involved in. The company has decided to rebrand in an attempt to tackle this, and has collaborated with the London-based creative agency, Johnson Banks, to develop a new positioning and identity following a seven-month \u201copen design\u201d process documented on its blog, as opposed to clandestine rebranding foray of subway<\/strong><\/a>.<\/p>\n

Professional Business Logo Maker<\/a><\/div>\n
\n

One idea links all we do: the Internet should be a healthy, global public resource, open & accessible to all https:\/\/t.co\/zMS9tRnwSw<\/a> pic.twitter.com\/efe89Gvlc7<\/a><\/p>\n

\u2014 Mozilla (@mozilla) January 18, 2017<\/a><\/p><\/blockquote>\n

The previous logo identity was typeset in FF Meta, the Helvetica of the early 2000s, which became a viable visual identity of the golden dot-com era. However, despite the ubiquity of the font, the Mozilla logo wore it with grace; neatly spaced and simple, balanced out with a funky name to render the wordmark memorable.  While the simplicity of the predecessor is carried over in the new logo, named the \u201cprotocol\u201d, a subtly nerdy visual component has been thrown in for just the right reaction; Gen-X will recognize the :\/\/ as something pertaining to the internet, we engage with it pretty much every day, while die-hard coders will deem it a common denominator and an appreciable depiction of the if-then-gobbledygook they write to eke out an existence!<\/p>\n

\n

The Internet is at the ❤️ of Mozilla, so we\u2019ve designed the language of the Internet into our brand identity: https:\/\/t.co\/VA1CE8nhbh<\/a><\/p>\n

\u2014 Mozilla (@mozilla) January 18, 2017<\/a><\/p><\/blockquote>\n

Unless a viewer has a complete lack of willingness to adapt or even a tad imagination, the new logo is just as legible as the one they had been accustomed to; \u201cmoz:\/\/a\u201d reads just as fine as \u201cMozilla\u201d.<\/p>\n

According to Tim Miller, who leads the organization\u2019s Creative Team,<\/p>\n

\u201cAt the core of this project, is the need for Mozilla\u2019s purpose and brand to be better understood by more people. We want to be known as the champions for a healthy Internet. An Internet where we are all free to explore and discover and create and innovate without barriers or limitations. Where power is in the hands of many, not held by few. An Internet where our safety, security and identity are respected. Our logo with its nod to URL language reinforces that the Internet is at the heart of Mozilla. We are committed to the original intent of the link as the beginning of an unfiltered, unmediated experience into the rich content of the Internet.\u201d<\/p><\/blockquote>\n

Custom Type For All<\/h2>\n

The final typographic result of the logo features a funky slab serif that\u2019s neither too crispy nor corporate. A bespoke font, Zilla, was designed by Peter Bil\u2019ak of Dutch type foundry Typotheque<\/strong><\/a> for the wordmark and accompanying copy. The custom-built font draws from Courier- the default font used for coding- and its journalistic feel echoes the internet advocacy work of Mozilla. The open-source font will soon be available to download for free. The company chose Typotheque due to the foundry\u2019s propensity for creating fonts in diverse languages and its expertise in \u201clocalization<\/a>. In addition, the logo design leans away from the current trend for sans serif fonts, adopting something rooted in the visual language of the internet.<\/p>\n

\"Mozilla<\/a>
\nImage Source: Mozilla.org<\/a><\/p>\n

Dynamic Imagery<\/h2>\n

The creative brains behind the project weren\u2019t too happy with just one option when it came to developing the imagery for Mozilla’s new look. As Murray and his team scrutinized the elements of their brand identity, the notion of one icon or image representing the entirety of the Internet and the whole of Mozilla, seemed anachronistic. Since imagery is a direct reflection of the richness and diversity of the Internet, the creative team of Mozilla incorporated it as an indispensable component of the system.<\/p>\n

According to Murray,<\/p>\n

\u201cIn digital applications, ever-changing imagery represents the unlimited bounty of the online ecosystem. Dynamic imagery allows the identity of Mozilla to evolve with the Internet itself, always fresh and new. Static applications of our identity system include multiple, layered images as if taken as a still frame within a moving digital experience.\u201d<\/p><\/blockquote>\n

As the brand develops, Mozilla aspires to invite technologists, designers, and artists to contribute to an ever-expanding imagery collective where the team intends to code still images, animations, and curated GIFs to flow into mozilla.org and various other digital experiences pertaining to it. Mozilla intends to engage new design communities and contributors through this open design approach under Creative Commons, and make more imagery available to all. Mozilla is seeking out input from creative communities to aid them in molding and expanding this idea.<\/p>\n

\"Dynamic<\/a>
\nImage Source: Mozilla.org<\/p>\n

Changing Colors<\/h2>\n

\"Changing<\/a>
\nImage Source: Mozilla.org<\/p>\n

A key building block of the logo is the black box surrounding Mozilla\u2019s logo, which alludes to the way type is highlighted in web programs and toolbars. A proposed color palette takes after the colors used by myriad browsers and will vary depending on the context in which the logo is used. As the style guide of the brand is further developed, it will define the guidelines, intensities, and color pairings.<\/p>\n

\"new<\/a>
\nImage Source: Mozilla.org<\/p>\n

The boxiness of the new logo is justified by the brand extensions, creating a system of stacked bars, putting the logo at the top always, followed by secondary bars designed to accommodate any kind of location as well as initiative. The imagery is loosely positioned to render a quirky side to the system that relieves it from appearing like it\u2019s trying too hard!<\/p>\n

According to Murray,<\/p>\n

\u201cIt will now be easier to know that something is \u2018from\u2019 Mozilla and understand how our global initiatives connect and reinforce one another. The system enables Mozilla volunteer communities across the globe to create their own identity by selecting color[s] and choosing imagery unique to them. Meanwhile, the core blocks of our system, bounding boxes and typography, will provide the consistency.\u201d<\/p><\/blockquote>\n

This unprecedented endeavor of Mozilla was bound to stir the avid internet aficionados into heated debates. While we are absolutely smitten by the branding foray of Mozilla, the internet tells a different tale when put to the scrutiny of Twitterati.<\/p>\n

\n

What do we think of Mozilla\u2019s new logo? https:\/\/t.co\/9SNDNA0ifI<\/a> pic.twitter.com\/NVYKxMhstA<\/a><\/p>\n

\u2014 The Verge (@verge) January 18, 2017<\/a><\/p><\/blockquote>\n

\n

Mozilla’s new logo is kinda :\/\/ https:\/\/t.co\/0n9LJsUzN3<\/a><\/p>\n

\u2014 Engadget (@engadget) January 19, 2017<\/a><\/p><\/blockquote>\n

\n

Mozilla unveils new logo, font, and design https:\/\/t.co\/VHUhxSyMLp<\/a> Clever design!<\/p>\n

\u2014 Dries Buytaert (@Dries) January 19, 2017<\/a><\/p><\/blockquote>\n

\n

That new Mozilla logo is pure genius. pic.twitter.com\/gNow7kihqf<\/a><\/p>\n

\u2014 ma\/\/:as (@mattiasgeniar) January 18, 2017<\/a><\/p><\/blockquote>\n

\n

While the twitterati has passed their verdict, let\u2019s see what our panelists for today have to say:<\/p>\n