
Zilla Slab: A common language through a shared font - uptown
https://blog.mozilla.org/opendesign/zilla-slab-common-language-shared-font/
======
JoshTriplett
If you want to see how the ligature mechanism works, go to
[https://fonts.google.com/specimen/Zilla+Slab+Highlight](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'.

~~~
igravious
How on _earth_ does this work?!

~~~
rhencke
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...](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-
ligatures)

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](https://codepen.io/anon/pen/MvbPdo?editors=1000#0)

~~~
igravious
Super duper. I thought that it only worked for two-letter combos. Very cool
Mozilla, or should I say Moz://a !

~~~
k__
Yes, pretty smart trick, now they get their logo integrated easily in many
apps.

I use Fira Code for coding, ligatures are really nice.

------
Jemaclus
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".)

~~~
phailhaus
> 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!

~~~
Jemaclus
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.

~~~
phailhaus
> Well, I guess my point is that it wouldn't have added or taken anything away
> from the experience

You already said that you would have felt like something was off. That's
detracting from the experience even though you don't consciously know why.

A ton of effort goes into choosing the fonts of the hundred different things
you see every day, so you've been trained to unconsciously associate different
fonts with different feelings. You don't need to be able to pick a font out of
a lineup in order for font choice to affect your experience. If I spend enough
time on Mozilla's site, I'm going to start associating Zilla Slab with
internet-related things, even though I still can't distinguish slab fonts.
Your brain's good at things like that.

------
zuzun
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.

~~~
potch
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.

------
nathancahill
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.

