Zilla Slab: A common language through a shared font | Hacker News Reader

Zilla Slab: A common language through a shared font

blog.mozilla.org

67 pointsuptown26 comments

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

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.

How on earth does this work?!

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

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

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

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

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

Just open any TTF or OTF up in FontForge (free software) and have a look!

Look under Element » Font Info, and then Lookups. All tables under GSUB deal with glyph substitution. The liga table is the simplest, and it can be used to replace a ligature like 'fl' with a glyph that combines the two letter forms.

I can imagine many an hour lost down that rabbit hole :)

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

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

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

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.

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

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.

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…

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.

For textual documents like academic work and literature LaTeX and its many packages are great for high quality typography. It has a steep learning curve though, but the results look professional and sharp if you follow the best practices. For things like beautiful tables and well-balanced paragraphs (i.e., the distribution and hyphenation of words) LaTeX is hard to beat. So if you are into typesetting books, that is a great option.

Nowadays there are plenty of good free fonts available too (although you are naturally limited). Free software fonts like Gentium are a pleasure on the eye in print.

I'm not too familiar with the more DTP side of software available as free software though.

Of course web browsers have come a long way too. Decent typography is already possible in the modern web browser, and more goodies become available all the time.

I've recently (within the past week or so) begun learning LaTeX for the purpose of typesetting my resume. It's actually been easier than I expected, and the result already looks much better than the Google-Docs-Exported-to-PDF that I had before.

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

I feel the same way!

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.

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.

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.

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.

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.

Reply on news.ycombinator.com