Zilla Slab: A common language through a shared font

https://blog.mozilla.org/opendesign/zilla-slab-common-language-shared-font/

by uptown • 9 years ago

67 26 9 years ago

blog.mozilla.org

Jemaclus3• 9 years ago

I must admit the whole idea of font design mystifies me. If you put 100 fonts in front of me, I'm not sure I could tell you which ones looked better than others, beyond serif/sans-serif and tall/fat. For someone to put this much thought into a font is just a bit mind-boggling to me, much less focus on whether a colon is "too heavy" (whatever that means). The only reason I can tell the difference between any of those letters is that they pointed it out. If they had just changed fonts midway through a paragraph, I doubt I would have noticed beyond a simple "something's different, but I can't put my finger on it."

Still... that font is pretty, so they must know what they're talking about!

(This is not meant to disparage anyone in any way. Just musing aloud at how I don't "get it".)

Freak_NL4• 9 years ago

Ignorance is bliss. Once you delve into typography and typeface design you'll spot kerning mistakes everywhere, cringe on missing diacritics and other glyph abuse — like this -- and suffer the constant abuse of well-meaning amateurs taping/pinning/mailing typographical monstrosities wherever you look.

It's a damn interesting field though, and there is beauty there too…

devmunchies• 9 years ago

I like designing (and have read a few typography books) but typography seemed like it was expensive to get into. What software do you use? What entry-level software is there?

For web and graphic design there was almost no monetary cost to learning.

phailhaus2• 9 years ago

If they had just changed fonts midway through a paragraph, I doubt I would have noticed beyond a simple "something's different, but I can't put my finger on it."

So you do get it, just on a subconscious level! That's exactly what good font design is all about: being invisible. It just so happens that being unnoticeable is incredibly difficult to achieve, and changes all the time with culture. A good font matches the tone of your message while remaining clear and understandable. That's because fonts aren't for robots, they're meant to be read by humans.

What Mozilla is doing here is actually a branding exercise!

tallblondeguy2• 9 years ago

Yeah, and it's really encouraging to see out of an open-source-centric company. OSS tends to get knocked for poor design chops (LibreOffice's and GIMP's UI/iconography comes to mind here) so, as someone who's dabbled in typeface creation, I get excited to see a company spending money to do typography right.

For those who don't notice consciously it'll do something on a subconscious level. For those who do notice the difference between Arial and Helvetica, it can make a world of difference.

Jemaclus3• 9 years ago

Well, I guess my point is that it wouldn't have added or taken anything away from the experience. I notice color and contrast a lot more than I notice typeface. The number of times I've said to myself "this font choice is awful" is pretty small, and is limited to relatively crazy fonts. I wouldn't notice the difference between Zilla Slab and any other slab font, other than the special colon/i thing they did. I don't even know what a slab font is, and I couldn't pick one out of a lineup of random fonts.

mikeash• 9 years ago

I sometimes refer to myself as "font blind," analogous to being color blind. More than once I've built a UI to precisely match a designer's mockup, only to have them come back and say to me, "Looks great, except you forgot to set the custom font." And I say, "What custom font?"

Maybe I could fix it if I put some effort into it, but I don't care about it that much either....

Jemaclus3• 9 years ago

I feel the same way!

JoshTriplett2• 9 years ago

If you want to see how the ligature mechanism works, go to https://fonts.google.com/specimen/Zilla+Slab+Highlight, type the sample text "mozilla", and watch it turn into the Mozilla logo when you type the 'a'.

Freak_NL4• 9 years ago

You can also download and install the fonts and see the effect in any text editor if you choose Zilla Slab Highlight Bold.

Zilla Slab uses the SIL Open Font License and looks really nice, so it's a nice font to have available in your arsenal.

igravious3• 9 years ago

How on earth does this work?!

Splines• 9 years ago

I am a complete font newbie, but looking at the standard (https://www.iso.org/standard/66391.html), it seems like there exists a feature called "contextual glyphs", which means you can supply alternative glyphs (like ligatures) given a particular sequence of glyphs.

I imagine you could crack open the font file itself and find out how this works - I'm not familiar with any of the tools to do this though.

Here's (I think) more detail: https://fontforge.github.io/editexample6-5.html

rhencke2• 9 years ago

Font ligatures!

Certain special combinations of characters can be treated by a font as having a special rendering known as a ligature. In CSS3, rendering of these is controlled through the 'font-variant-ligatures' property: https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian...

For a small example of text with and without ligatures for the common 'fi' and 'fl' combinations:

https://codepen.io/anon/pen/MvbPdo?editors=1000#0

JoshTriplett2• 9 years ago

See https://pixelambacht.nl/2015/sans-bullshit-sans/ for more information on creating a font with ligatures.

nathancahill• 9 years ago

A little off-topic, but do any Mozillians here know if there are plans to release t-shirts again with the new branding? It's no longer an option on the Donate page.

zuzun• 9 years ago

So they commissioned a high profile typographer to create a custom typeface just 3-4 years after they commissioned a high profile typographer to create a custom typeface? Makes you wonder if donations to Mozilla will help to keep the web open or help to do a third rebranding.

rhencke2• 9 years ago

You don't have to wonder where their money goes - take a look:

https://static.mozilla.com/moco/en-US/pdf/2015_Mozilla_Audit...

I think it's disingenuous to imply that commissioning a font and working to keep the web open are somehow mutually exclusive goals.

tallblondeguy2• 9 years ago

If you're arguing against custom typography, I'd respond that creating a custom typeface is a really worthy thing and exciting to see, especially since they're open sourcing it and sharing it with the world.

But I think your main thrust here is that it comes off as Mozilla acting aimless? It's a fair point, and it makes me a bit sad to think that Fira Sans has completely gone off of their radar now.

potch• 9 years ago

We didn't throw away Fira Sans, which is the typeface of Firefox. However, we wanted to update the Mozilla brand apart from the Firefox brand, and so Zilla Slab was commissioned.

Zilla Slab: A common language through a shared font

Related Stories