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".)
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.
> 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!
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.
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.
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 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.
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.
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:
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.
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.
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.
Write better software, Firefox is unacceptably slow. If Chrome, Safari and even gulp IE make browsing smooth, then Firefox is doing something wrong. Better fonts won't fix it.
30 comments
[ 3.3 ms ] story [ 59.5 ms ] threadStill... 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".)
It's a damn interesting field though, and there is beauty there too…
For web and graphic design there was almost no monetary cost to learning.
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.
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!
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.
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.
Maybe I could fix it if I put some effort into it, but I don't care about it that much either....
Zilla Slab uses the SIL Open Font License and looks really nice, so it's a nice font to have available in your arsenal.
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
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.
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
I use Fira Code for coding, ligatures are really nice.
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.
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.