ZILLASAB Type Specimen Book
mozillamozillamozilla
zz A contemporary slab serif font that directly echoes the new mozilla logo “ “
Re-branding the Internet Champion Client Mozilla Sector • Corporate • Not-for-profit • Social enterprise Year 2017 Disciplines • Brand strategy and narrative • Brand identity • Print design • Typography Awards • 2017 Brand Impact Awards | Collaboration | Highly commended • 2017 Brand Impact Awards | Technology | Highly commended
Two of the overall routes – one using part of the http:// internet protocol, one looking at Mozilla’s legacy dinosaur symbol – were developed further. Two new routes were added, then an extensive round of testing ensued, online, at conferences, and in global research. Basis
The Initial Design Approaches
Eventually this work was to lead to a clearer verbal positioning: “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.”
By the summer of 2016, we were ready to share our first design approaches, which gathered around five broad strategic directions: Taking stand: A Positive Impact on Humanity; Being Open; The Pioneers and The Maker Spirit. These were discussed widely within Mozilla, on the project blog, and on multiple designs and technology blogs.
Mozilla’s desire to be better known and better understood by its past, present and future audiences. For too long they had been associated only with their most famous product, Firefox, and their notfor-profit status simply hadn’t registered. As they themselves stated, ‘we’re uniquely able to build products, technologies, and programs that keep the Internet growing and healthy, with individuals informed and in control of their online lives’.
What made this project stand-out, right from the off, was Mozilla’s determination that, as an open source software company, they should also rebrand ‘in the open’. Which meant that from mid-2016 onwards, every significant stage, twist and turn was shared, publicly, for both the narrative and design stages.
T he impetus for this project was
Agreeing a Strategic
Whilst some initial work had been done before Johnson Banks were appointed, our first task was to establish a set of narrative scenarios that were shared at a staff conference, and online. With this initial work, and the development that followed, we were trying to find a clear strategic ‘sweet spot’ to create a platform for the visual brand. Many of us are concerned about how our lives are tracked, data-mined and exploited online, so we were keen to show Mozilla in a different light.
Eventually, the idea that used the internet protocol won through. It is a simple and memorable idea which neatly represents how people and knowledge are linked in an increasingly connected world, and it resonates well with their core internal and external audiences. The final design step involved ‘rebooting’ the idea from its two previous iterations in order to reach the final Theoutcome.useof some of the language that lies at the heart of the Internet neatly encapsulates their desire to be the champions for a healthy Internet, stand up for what’s good about the web, and make it clear that they are an Internet pioneer.
As we pushed the idea further, we were able to make the coloured bars allude to internet browser address bars and discovered that we could fill these bars with both type, messages, images, or a combination –alluding to a typical web journey. It started to become a very flexible system. And we had always enjoyed the thought that this was a logo you could type, as in ‘moz://a’.
The final font is carefully customised so the details that you see in the angles and serifs of the final logo carry across into the font itself. It will be extended out into several weights, and eventually into Cyrillic.
It’s based on a ‘slab serif’ style – chosen because much coding is still done in ‘typewriter’ style fonts , so there’s an additional link there. And, in our research, we had flagged the fact that nearly all of their peers and competitors have moved to humanist sans-serif fonts and wordmarks –we felt strongly that they should move in a different direction.
The Final Logo and Design System Zilla: A Font for Everyone
Initially we restricted ourselves to free fonts, then started to think about a commissioned font that would then be made available free of charge. The font foundry Typotheque was chosen to do this because of the fonts they had already designed that could form a basis for what we needed, and the type foundry has a long and distinguished link to some of the earliest web font designs.
mozilla
In our research we’d noticed that Mozilla seemed reticent to ‘take a stand’ in a way that matched with our other not-for-profit clients, so it was important to find a way for Mozilla to include messages near the mark itself. We had also audited a vast array of different sub-brands and communities, so the new design plots a more unified course for these. As we explored this route further we realised that we needed an imagery palette that was as wide as possible to let us talk about people, technology, connections, open-source, privacy… …all the topics they want to cover now, and any new ones in the future. So we began to explore the idea of an almost digital ‘collage’ of imagery that would begin to sum up the wonder, width and craziness of the web. The next step on this will be to call for and build an online gallery of Mozilla imagery, film and animation – to source their image bank in a similar manner to how they create their code.
An Open Approach to Imagery
slab highlight
Messaging and Brand Architecture
HIGHLIGHTLIGHTREGULARSEMIBOLDBOLDMEDIUM BOLD 72 pt 60 pt 48 pt 36 pt A A A A B B B B C C C C X X X X Y Y Y Y Z Z Z Z
30 pt 24 pt 18 pt 14 pt 12 pt A A A A A B B B B B C C C C C X X X X X Y Y Y Y Y Z Z Z Z Z
BOLD ITALIC SEMIBOLD ITALIC MEDIUM ITALIC REGULAR ITALIC LIGHT ITALIC HIGHLIGHT REGULAR 72 pt 60 pt 48 pt 36 pt A A A A B B B B C C C C X X X X Y Y Y Y Z Z Z Z
30 pt 24 pt 18 pt 14 pt 12 pt A A A A A B B B B B C C C C C X X X X X Y Y Y Y Y Z Z Z Z Z
12 18 24 36 48 48 36 24 18 12 Light a a a a a A A A A A Regular a a a a a A A A A A Medium a a a a a A A A A A Semibold a a a a a A A A A A Bold a a a a a A A A A A HighlightRegular a a a a a A A A A A
12 18 24 36 48 48 36 24 18 12 LightItalic a a a a a A A A A A RegularItalic a a a a a A A A A A MediumItalic a a a a a A A A A A SemiboldItalic a a a a a A A A A A ItalicBold a a a a a A A A A A HighlightBold a a a a a A A A A A
Aa BbLight Regular Medium Semibold Italic+ 11 pt size 13.2 leading
Slab Italic Aa Zilla Slab Medium Aa Zilla MediumSlabItalic Aa Zilla Slab Light Italic Aa Zilla Slab Light
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning). Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
ZillaAaSlabRegular
Zilla
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, linespacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Aa
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, linespacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, linespacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Aa Zilla Slab Bold Aa Zilla Slab Bold Italic Aa Zilla HighlightSlab Regular Aa Zilla HighlightSlab Bold Aa Zilla SemiboldSlab Italic Aa Zilla Slab Semibold
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Typography is the art of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning).
Yy Zz SemiboldBoldItalic+RegularHihglightBoldHighlight 11 pt size 13.2 leading
Z Z Z Z Zboldsemiboldmediumregularlight Zilla500Slabpt
S S S S S regularlight semiboldmediumbold Zilla500Slabpt
z z z z z z Bold Bold SemiboldItalicItalic SemiboldMedium Medium Italic
z z z z z z Regular Light Italic Bold Regular Italic Light Italic Bold Italic
ascender line descenderbaselinex-height line x-height heightcap aperture counterstem(closed) ascender beak crossbar eye overshoot heightascenderheightdescender counterspine
counterspine (open) arch tail descender bowl crossbar terminal earapex leadingsizepoint
Ā Ē ā
ē ī ō ū Ō Ī Ū
Kia ora Kia ora tatou Tēnā kōe Tēnā koutou Nau mai Haere mai Ngā mihi
Ko Te Tuatoru Hei wakaritenga mai hoki tenei mo te wakaaetanga ki te Kawanatanga o te Kuini –Ka tiakina e te Kuini o Ingarani nga tangata maori katoa o Nu Tirani ka tukua ki a ratou nga tikanga katoa rite tahi ki ana mea ki nga tangata o Ingarani.
O WIKITORIA te Kuini o Ingarani i tana mahara atawai ki nga Rangatira me nga Hapu o Nu Tirani i tana hiahia hoki kia tohungia ki a ratou o ratou rangatiratanga me to ratou wenua, a kia mau tonu hoki te Rongo ki a ratou me te Atanoho hoki kua wakaaro ia he mea tika kia tukua mai tetahi Rangatira – hei kai wakarite ki nga Tangata maori o Nu Tirani – kia wakaaetia e nga Rangatira Maori te Kawanatanga o te Kuini ki nga wahikatoa o te wenua nei me nga motu – na te mea hoki he tokomaha ke nga tangata o tona Iwi Kua noho ki tenei wenua, a e haere mai Nanei.ko te Kuini e hiahia ana kia wakaritea te Kawanatanga kia kaua ai nga kino e puta mai ki te tangata Maori ki te Pakeha e noho ture kore ana. Na kua pai te Kuini kia tukua a hau a Wiremu Hopihona he Kapitana i te Roiara Nawi hei Kawana mo nga wahi katoa o Nu Tirani e tukua aianei amua atu ki te Kuini, e mea atu ana ia ki nga Rangatira o te wakaminenga o nga hapu o Nu Tirani me era Rangatira atu enei ture ka korerotia nei. Ko Te Tuatahi Ko nga Rangatira o te wakaminenga me nga Rangatira katoa hoki ki hai i uru ki taua wakaminenga ka tuku rawa atu ki te Kuini o Ingarani ake tonu atu – te Kawanatanga katoa o o ratou wenua. Ko Te Tuarua Ko te Kuini o Ingarani ka wakarite ka wakaae ki nga Rangatira ki nga hapu – ki nga tangata katoa o Nu Tirani te tino rangatiratanga o o ratou wenua o ratou kainga me o ratou taonga katoa. Otiia ko nga Rangatira o te wakaminenga me nga Rangatira katoa atu ka tuku ki te Kuini te hokonga o era wahi wenua e pai ai te tangata nona te Wenua – ki te ritenga o te utu e wakaritea ai e ratou ko te kai hoko e meatia nei e te Kuini hei kai hoko mona.
K
(signed) William Hobson, Consul and LieutenantNaGovernor.komatou ko nga Rangatira o te Wakaminenga o nga hapu o Nu Tirani ka huihui nei ki Waitangi ko matou hoki ko nga Rangatira o Nu Tirani ka kite nei i te ritenga o enei kupu, ka tangohia ka wakaaetia katoatia e matou, koia ka tohungia ai o matou ingoa o matou tohu. Ka meatia tenei ki Waitangi i te ono o nga ra o Pepueri i te tau kotahi mano, e waru rau e wa te kau o to tatou Ariki.
TE TIRITI O WAITANGI
Zilla Slab Regular Extended Latin A ŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĹĺĻļĽľĿŀŁłŃńŅņŇňĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġ Extended Latin B ǾǿȘșȚțȲȳȷƏƒDŽDždžLJLjljNJNjnjǓǔǢǣDZDzdzǼǽ Punctuation ‘’‚“”„†‡‹›⁽⁾₍₎〚〛#%‰&’()*/\,.:;·•…!?¡¿‽@[]_{}§«»¶‒–— Numbers 1234567890¼½¾⅓⅔⅛ Superscripts & Subscripts ¹²³⁴⁵⁶⁷⁸⁹⁰⁺⁻⁼⁽⁾₁₂₃₄₅₆₇₈₉₀₊₋₌₍₎ₐₑₒₓₕₖₗₘₙₚₛₜ Currency $¢£¤¥₡₢₣₤₤₥₦₦₧₨₪₫€₭₮₱₴₹₺₽ Symbols ☚☛☜☝☞☟♾✓₱₴₹₺₽№℗℠™℮↖↗↘↙Ⓤ▲▶▸►▼◀◂◄◊☐☑$¢£¤¥¦¨^©®¯°`´¸˘˙˚˛˜˝₡₢₣₥₦₧₨₩₪₫₭₮ Math Symbols +=<>|~¬±×÷⁄⁺⁻⁼₊₋₌←↑→↓∂∆∏∑−√∞∫≈≠≤≥ΔΣπ
Zilla Slab Highlight Regular Extended Latin A ŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĹĺĻļĽľĿŀŁłŃńŅņŇňĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġ Extended Latin B ǾǿȘșȚțȲȳȷƏƒDŽDždžLJLjljNJNjnjǓǔǢǣDZDzdzǼǽ Punctuation ‘’‚“”„†‡‹›⁽⁾₍₎〚〛#%‰&’()*/\,.:;·•…!?¡¿‽@[]_{}§«»¶‒–— Numbers 1234567890¼½¾⅓⅔⅛ Superscripts & Subscripts ¹²³⁴⁵⁶⁷⁸⁹⁰⁺⁻⁼⁽⁾₁₂₃₄₅₆₇₈₉₀₊₋₌₍₎ₐₑₒₓₕₖₗₘₙₚₛₜ Currency $¢£¤¥₡₢₣₤₤₥₦₦₧₨₪₫€₭₮₱₴₹₺₽ Symbols ☚☛☜☝☞☟♾✓₱₴₹₺₽№℗℠™℮↖↗↘↙Ⓤ▲▶▸►▼◀◂◄◊☐☑$¢£¤¥¦¨^©®¯°`´¸˘˙˚˛˜˝₡₢₣₥₦₧₨₩₪₫₭₮ Math Symbols +=<>|~¬±×÷⁄⁺⁻⁼₊₋₌←↑→↓∂∆∏∑−√∞∫≈≠≤≥ΔΣπ
ZILLA SLAB OPINIONATED human OPTIMISTIC FIGHTS FOR THE INTERNET open source firefox
About Classification Designed By Slab Serif Typotheque Client Original Release Mozilla July 5, 2017 Styles Zilla Slab – Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semibold, Semibold Italic, Bold, Bold Italic Zilla Slab Highlight – Regular, Bold Available Google Fonts, Github, Mozilla CDN References https://nzhistory.govt.nz/politics/treaty/read-the-treaty/maori-texthttps://www.johnsonbanks.co.uk/work/mozilla[}{]
mozilla