Mozilla's New Fira Typeface | Hacker News Reader

Mozilla's New Fira Typeface

github.com

328 pointspotch128 comments

It's designed by Erik Spiekermann:

https://twitter.com/espiekermann/status/382189483031949312

To anyone wondering, this is kind of the typographic equivalent to "by the way, this JS library was written by John Resig."

Words I can understand, thanks!

Spiekermann also designed FF Meta, which is the font used for the Mozilla and Firefox wordmarks ( http://www.mozilla.org/en-US/styleguide/communications/typef... ). So, the similarities between Fira and Meta aren't coincidental.

It makes me curious how they are going to deal with the issue tracker, pull requests etcetera… did they hire him also to follow up on them? I guess they don’t really count on accepting pull requests (seeing also how the font sources are not in the git).

This github repo is just here for convenience, to make it easy for developers.

Source: https://twitter.com/potch/status/382611551145840640

Very nice. It's awfully similar to Droid Sans, but the slightly lower x-height, and more more "playful" elements (like the gap in the lowercase 'g', the curve at the bottom of the lowercase 'l') make it bit more playful and legible. Above all, it feels more balanced, and accomplished, than Droid Sans.

Excellent work.

You know, I just don't think a humanist sans with a lot of character is the right choice for an operating system.

So stick with Windows and let the Free Software hippies have a little fun. :)

I'm not a huge fan of Windows, but I must say that the new Microsoft-designed fonts (Cambria, Calibri, Corbel, Consolas) strike a great balance between neutrality and character for an OS.

I like Constantia, by John Hudson. It has become my go-to font for screen reading, since it manages an almost-oldstyle feel without falling apart at current resolutions. MS did commission some good work for the C-series.

Have to say that Consolas is the best monospaced font (that supports a large swath of Unicode) for my terminal emulator. I've always taken a rather dim view of non-functional niceties but have been swayed by just how damn nice the terminal looks while programming in Vim using Consolas. Well worth the purchase so that I could use it on Linux.

If you want a free clone then Inconsolata is pretty good (and open source, hence improvable): http://www.levien.com/type/myfonts/inconsolata.html

To my eye, only the name looks similar.

My gnome-terminal seems to be using Source Code Pro from https://github.com/adobe/Source-Code-Pro at Semibold weight and 12 points, though I basically just fullscreen it and frequently resize up and down depending on requirements. In reality I probably mostly I use it at 14 or 16 points, on a black background of course.

compiz-fusion spins between desktop cube faces with ctrl+alt+arrow and a handy wacom tablet allow easy text selection, window placement and inkscape-driven thought-capture.

I'm very interested in striking a balance between a minimalist console and graphical thinking, and have become a big fan of tools like mscgen, graphviz, and inkscape.

Every time I use inkscape, default font selections irritate me to the point where I now generally the more tedious option of manually scribbling on the wacom tablet.

There's also Candara and Constantina.

I think they did a bang up job with them, especially Cambria (If I never saw Times again I'd be happy).

Agreed. Unfortunately I can't say the same about Frutiger ripoff Segoe UI. I got tired so quickly of that font, and I barely even use Windows 8. You still see it all the time on other Microsoft branded stuff though, and all I can think is 'meh'.

A neutral font like Helvetica is a much better choice IMO.

Yes, I was shocked how bad it looks, considering Microsoft has some really good font designers.

Ironically they are both in the same neutral family. https://www.dropbox.com/s/peqvvtw50ko6kbv/Screenshot%202013-...

That's probably also the reason why you think that it is meh.

I think his 'meh' was directed toward Segoe UI, not Frutiger.

Segoe UI is extremely similar to Frutiger Next, which is an expanded and slightly reworked Frutiger. That's what the whole fuss was about -- Microsoft not paying for a Frutiger Next license.

I wouldn't think that bubbly windows with cheesy drop shadows and gee-whiz transparency effects would be the right choice for an operating system, either. And yet look at the last decade's design trends there, too.

Honestly, a somewhat playful humanist sans looks just fine in context, and a lot cleaner than many other trendy OS designs recently.

I have to agree with you on that. I was really looking forward to iOS 7 being a step forward in that regard, but it's as bubbly as anything else, and inconsistent to boot. At least Helvetica is nice and neutral.

I think the word for all of this is kitsch.

Sure it is, so long as it's legible. Operating systems aren't just for getting work done. We spend our digital lives there. Why shouldn't they feel comfortable? Feel like home?

I don't think they are that similar.

The g looks like "Trebuchet MS" ugh. A traditional g would've been awesome.

Overall I find it very reminiscent of Trebuchet, but I happen to like both fonts.

Also, the l and the g are similar to Trebuchet too.

For me I wish more fonts made a clear distinction between 0 (number) and O (Letter), I, l, and 1, 5's and S's, and B and 8. Instead it seems to always be about a's and g's.

Fira is based on FF Meta, by Spiekermann. Trebuchet is an imitation of FF Meta.

https://blog.tilton.co/2013-08-01-fira-feura-typeface-from-m...

Hey look, its already in the AUR:

https://aur.archlinux.org/packages/otf-fira-sans/

https://aur.archlinux.org/packages/otf-fira-mono/

https://aur.archlinux.org/packages/ttf-fira-sans/

Who needs firefox OS (I do have the in-browser emulator running, though), I just changed my system font to this. I'll have opinions after a days usage.

Everything is in the AUR man ;)

Interesting. The character for greek k (kappa - κ ) is wrong though. The vertical line of the greek k doesn't rise above the rest of the character. It might seem small but it really strikes as ugly and wrong for anyone used to the language.

Since it's on Github, consider filing a new issue if someone hasn't gotten to it already:

https://github.com/mozilla/Fira/issues

Are the italic versions actually oblique (slanted)? In other words, is there a typographic standard for labeling typefaces italics and oblique? I seem to remember that there is a distinction.

>is there a typographic standard for labeling typefaces italics and oblique

As I recall it, oblique type uses the regular glyphs just slanted, whereas a 'true' italic typeface employs modified glyph versions having additional calligraphy- or cursive-like flourishes.

In the following picture I've just made using Arial and Times, both fonts are claiming an 'italic' version. The Times one really is italic by the above definition, while the Arial one is 'oblique'.

http://imgur.com/UVUZb5F

Thanks. Although obvious it totally escaped me. I just reported it. :)

This is a beautiful looking font and I could definitely see myself adopting it when typing papers.

I'd love to use it in my terminal, but my only problem is the zero isn't dotted or slashed. My terminal font is stupid-small (I think 10pt), and the 0 and O looking similar has bitten me in code a few times.

Well, shit...

Man, that is exactly the first thing I did as well. Lets hope they release a 'mono' version soon

There is already one. And it has a 0 dotted.

Good catch on the dotted zero.

The spacing is weird, I'll give it a shot and see if I like it.

I really don't like the lower case "r" in the monospace font. It looks almost like a small capital I (the serif portion on the upper left is almost equal in size to the right section of the arc).

I like the rest of it, but the r is pretty distracting.

Agreed. The "r" looks heavier weight than the others to me. (Though I can't be sure if I'm only noticing because you mentioned.)

I definitely noticed this independently and came here--Is it normal to mix a couple serif-like characters into an otherwise sans mono font?

According to this page there is one:

- http://www.mozilla.org/en-US/styleguide/products/firefox-os/...

It looks like it's included in the zip files when you download it at the bottom.

There is a monospaced version, scroll down... http://mozilla.github.io/Fira/

Here's a programmer font intended to be very legible at 10pt http://www.arcavia.com/kyle/Software/ProgFont/index.html However, he accomplishes that feat by redesigning some english letters.

What are you talking about? This font is a disaster, everything looks the same.

I've seen some shit fonts but this one...

April was quite a long time back...

Direct link to the specimen page: http://mozilla.github.io/Fira/

cool, they made the text contenteditable so you can see how things looks outside of their pre-canned text...

Does anyone else think that the word "Firefox" looks odd in the italic versions?

I'm not a fan. I just don't get why they adapted FF Meta. It's overly complex (the 'g' for example), and not a great display font. They should strive for simplicity, rather than individuality. Android's Roboto and iOS's Helvetica Neue achieve this, my personal preference being for for latter.

Yeah, the kink in the lowercase y, the gap in the g, and a few other touches don't scale down well IMHO. I am a big fan of the trend of designing free typefaces for general use like this, though.

I'm really curious as to why they would use images over font-face in the style guide examples http://www.mozilla.org/en-US/styleguide/products/firefox-os/.... As a designer you want to see how the typeface performs in the wild, not snaps of it with some arbitrary aliasing.

It's not a bad typeface, although the kerning on the light weight needs a lot of work. If you're wondering what I mean, look at the word 'quick'.

>I'm really curious as to why they would use images over font-face in the style guide examples

>style guide examples

You just answered your own question

Could you elaborate as to how? Examples aren't synonymous with rasterized images. They use font-face in the example column where they display Open Sans.

It's not a big deal but I just didn't understand your response

It's mainly because the raster images are going to be more accurate than @font-face as they'll display properly amongst all browsers and OSes just like a PDF would.

edit: Also the most obvious reason (which I forgot to mention) is that they are type specimens and type specimens are (AFAIK) always done in raster images.

Hmm. Looks like FF Meta optimized for screens. Odd that Mozilla and Erik Spiekermann felt this justified having its own name.

I made a quick side by side comparison between Fira and Meta Pro: http://i.imgur.com/Oo3yeYx.png

Those look pretty different to me. I mean, very clearly related, but with tons of small changes. Like, the angle of almost every terminal is different, and in general the new typeface is much more vertical.

But is it different enough to give it an entirely new name? Oh well.

Yes, as someone said below, what's the difference between most programming languages? Very small changes in the grand scheme of things, they mostly all have variables, classes, functions, etc. It's the same thing with fonts, they mostly all have the same sort of form, with variations. Put that font beside Arial and Helvetica and you can probably see similarities between them as well, yet they have a different name.

Arial should have never come to be. The only reason it exists is because changing it a little and giving it a new name meant Monotype didn’t have to pay Linotype license fees.

In this case, Spiekermann made both fonts.

Arial was originally it's own font (Monotype Grotesque), but got squished to match Helvetica's metrics which is a good example of how fonts can be different and similar to each other.

That is true, here’s a fun comparison: http://www.marksimonson.com/notebook/view/how-to-spot-arial

As you can see, all the areas in which Monotype Arial is different from Linotype Helvetica are borrowed from Monotype Grot. The reason to make such a monster is purely financial.

Well for one thing FF Meta isn't free or Free and is probably also trademarked.

Having an OFL (Open Font License) font of high quality is a good thing.

Also OFL licensed is Andika (http://scripts.sil.org/andika) which I'm using in an app for children as the letters are mostly in the form that they would be handwritten was the best I could find in a few hours searching (free and paid) and most of the licenses for use in apps looked very expensive.

I agree, licensing seems the most plausible reason for releasing it under a different name.

Also, I like Andika. To me, it looks like a proportional-width interpretation of Monaco, a monospaced font that has shipped with Macs for the last few decades.

http://en.wikipedia.org/wiki/Monaco_(typeface)

Looking forward to the next version of the typeface, Firaga.

I'm not a typography expert, so this looks like a hundred other fonts I've seen. Why does every OS need its own custom font?

Branding is one. They can't use a typeface another commercial OS used.

Also type designers keep making new fonts with tiny differences from older fonts because the older fonts were already used a lot and don't look fresh.

Just like programmers make new frameworks/libraries and using those is the cool thing to do.

>Branding is one. They can't use a typeface another commercial OS used.

Well, if the license permits it they can.

One thing that occurs to me is how "sticky" it might help make your product. Today I downloaded the new version of the JetBrains python IDE, and I'm a longtime SublimeText user. My first reaction was to be really uncomfortable (not surprising.. it's a pretty huge new tool for doing something I'm very familiar with)... however, I was suprised at how much comfort returned once I was seeing code in my familiar font again.

I wonder if this is a useful tactic in making users of your platform continue to feel especially comfortable with it, by making other platforms feel particularly uncomfortable.

Seems like that would only be a positive thing for the market leader. Everybody else would be bringing more people over into a less comfortable experience. Market leaders don't want to lose people...new entrants primarily want to bring new people in.

Firefox OS doesn't even really exist yet. Obviously, they need to bring new people in, and want people to be comfortable.

Imagine Erik Spiekermann commenting here or on LtU how all programming languages look the same...

At my work, one of the astronomers once sent a feature request that ended with this sentence: "I am not a software engineer, but I know enough about programming to know that this must be easy enough to do."

It may be a case of grass being greener on the other side but working with astronomers sounds pretty cool.

I work on web stuff and get requests like that all the time.

This particular user is the exception. For the most part, they're pretty understanding of how overworked we are. They tend to be content with workarounds and don't expect good performance. This is mostly because they all write code themselves and their own code is pretty lousy. To them, what we do is just a means to an end and they're not interested in appreciating the journey, as it were.

On the other hand, this classic xkcd is occasionally accurate. You get a few of these obnoxious ones from time to time: http://xkcd.com/793/

But was he right? Was the feature easy? :)

It amounted to changing an architectural assumption. If she'd suggested it four years earlier it would have been easy. :)

iOS doesn’t use a custom font, it uses Helvetica Neue, Helvetica, and Avenir. There’s no reason other OSes can’t just adopt an existing font to use system-wide. For instance, Futura is still up for grabs.

Another font that isn’t used anymore, but which was custom designed for a WebOS, is Font Bureau’s Prelude. I like that one a lot better than the choices all of the other platforms have made: http://palmwebos.org/wp-content/uploads/2009/07/webos-font-p...

Using an existing font for the sake of using it is << creating a new font and open sourcing it. More choice is good (especially with something like fonts) and open sourcing it is just icing on the cake. Everyone wins. PS: Thanks for the tip on Futura, I had not heard of it before.

I understand how creating a ‘new’ font and open sourcing it makes sense for Ubuntu and Firefox, where lots of unpaid workers need to share assets. I don’t see how it would benefit companies like Apple and Microsoft. Back in the early 80s, Apple commissioned a custom version of ITC Garamond to suit its needs better. Bitstream named it ’Apple Garamond’. As with many proprietary corporate fonts, that font was never released or open sourced, in large part because it was an integral to Apple’s brand identity.

Not to my taste — looks really stodgy and conservative to me.

Well, WebOS was created in 2008, so that may have something to do with it. IMO, the font itself could easily work in a more modern, flatter UI.

I mean the font, not the overall design. While I admit I can't rule out the possibility that the design on the left side of the image unconsciously influenced my reaction, I tried hard to only look at the font.

The dot on the lower case 'i' is so high! Outside of that, it looks alright, but still needs some work.

I think it is as much that the capitals are a little short but the i next to the capital F in Firefox is where it shows up.

Will be interested to see if it bothers me in real use.

That was the first thing I noticed. Lowercase i and j stand out due to the dot being too high. When the dot is taller than uppercase letters something is wrong.

I like it but I tried it on two different monitors and it looks reddish?

I'm guessing that's something to do with anti-aliasing but I haven't noticed it before...

I'm not sure about the hinting on the font, or maybe it's the rendering in the browser. It just doesn't seem that smooth.

It's the serifs on the lowercase letters.

Overall I like it a lot, but I don't like that the sides of the capital M are so slanted. It sticks out a lot in the third screenshot: http://mozorg.cdn.mozilla.net/media/img/styleguide/products/...

The typeface's original name was Feura: https://twitter.com/espiekermann/status/359353798663221248

  Why change from Feura to Fira? English-speakers pronounce it as “Fjura”, not “Foyra”. And
  Fjura sounds like Führer. Not good.

Letter spacing seems wide and overall kerning seems messy, but I don't know much about fonts.

Here's a link with some actual screenshot examples:

http://www.mozilla.org/en-US/styleguide/products/firefox-os/...

It's designed so that the different weights take approximately the same width, so that does mean that the lighter weights have larger tracking (ie spacing between letters) than the heavier weights.

I love the small g. Notice the differences between normal and italics (especially a, e, f, g, k). It's not just slanted, but curvier as well. Really makes it stand out.

The italics ampersand is especially stylized.

Nice! I wonder if they deliberately made it close enough to FF Meta that the Firefox wordmark is recognisable?

Not a fan of it all, but massive congratulations for them including the different weights properly.

Hm, currently no capital letters ''XYZ'' on the demo page.

Nice font! The demo site could use taller lines. (increase line-height)

The zero and O is similar aw. Other wise it's pretty nice.

Nice font face, just a shame that Mozilla spends time making web fonts while their actual browser is crap at rendering them. Sa-a-aaad....

I like it!

Clarity, share, curve. Bold, italicize.

is this gonna be the default font on firefox desktop and mobile?

Ugly as fuck. Can anyone make something that actually beats Helvetica Neue?

Adrian Frutiger's typefaces are very good. Univers and Avenir in particular have nice neutral designs.

Fira mono looks good.

I'm using it as my Sublime Text font, mostly as a trial. I'm digging it so far, in particular the funky '@'

Indeed. I have two quibbles with it, which I've already submitted on Github: the position of the asterisk and the shape lof the lower case r (looks like a small caps i).

Otherwise a very good font.

Agreed on the lowercase r. Tried replacing the Source Code Pro with Fira Mono in Sublime and this immediately stuck out as annoying to me.

Personally I'm not a fan of the & character in that image sample - at first I thought it was a 6.

Indeed. The curly brace needs to be little more pronounced. Other than that, it's a good alternative to Source Code Pro.

I always put new fixed-width fonts in iTerm to see how it looks. I cranked the vertical and horizontal spacing down, and it looks like I could have went another notch on the vertical.

Fira is on the right. It doesn't look bad, but it's a little cramped and thin for what I like.

http://imgur.com/GOi50xC

Does anyone know how/why Helvetica wound up the most appealing font?

Publishing content with Helvetica font seems to give the content an automatic, unconscious boost in credibility. Why is that?

It seems to be a primal reaction rather than a learned behavior. Helvetica looks the best to me because it looks the best, not because someone else said so.

I wouldn't say it's the most appealing. It's just the most simple, universal, sans-serif font. (Times is probably the serif equivalent.)

Medium Helvetica is super legible and has great proportions. It gets out of the way and lets you concentrate on the content, which is why it's used for things like subway signs. It's kerning is balanced and works at large and small sizes.

Helvetica is kind of like denim. It doesn't go out of style, but you can wear it hundreds of different ways.

It's also Swiss. They generally make good stuff. :)

Helvetica is great for logos, titles, headings, posters, etc., when you’re aiming for a specific (orderly/rigid/boxy/neutral/mid-to-late-20th-century, and generic, like corporate or government) kind of aesthetic. Helvetica is not a very readable typeface for body text – anything with more than a few words at a time – or anything small like labels on a map or diagram. This is because by design its letters have many extremely similar shapes which makes it harder to distinguish letters at a glance, and because it is designed not to flow.

There are particular situations where Helvetica is appropriate, but it is massively overused in contexts where it is a poor choice. A humanist sans serif like this new Mozilla typeface is much better for general purpose use.

And now I want to read a book titled Typefaces written by Jacob Rus.

I've really enjoyed flipping through this site which talks about the history of some fonts (as well as lots of other stuff about typograph): http://ilovetypography.com/

There's a documentary about Helvetica that's available on Netflix (US).

http://en.wikipedia.org/wiki/Helvetica_(film)

Highly recommended. Very interesting documentary about the origins of the type, it's use, those who love it, those who do not.

Feel free to skip this movie. It's mostly old white dudes gushing about how great helvetica is.

The "old white dudes" of course being many of the top type designers in the world including Hermann Zapf who dislikes Helvetica, Spiekermann, and many others.

Doesn't matter how famous the designers are. It's still just a typeface. And the people in the movie are getting worked up over it.

Perhaps this might have something to do with it:

Helvetica is widely used by the U.S. government; for example, federal income tax forms are set in Helvetica, and NASA uses the type on the Space Shuttle orbiter.

You're unconsciously conditioned to associate it with formal/official operations. Same reason why I'm so fond of Courier (although I'm apparently somewhat alone in that)

Does anyone know how/why Helvetica wound up the most appealing font?

It's not the most appealing, but it is quite a neutral font which I'd argue is the base of its appeal - there are no serifs, no whimsical curves, and it is associated with Modernism so it gives an impression of quiet authority going back to fonts like Univers and the International Style. That makes it appropriate for content that wants to be taken seriously, while not seeming too stuffy or traditional, so it has become popular for business use as well as in setting adverts, and of course it lends itself well to computer screens. Doubtless it will fall out of favour at some point, I have no doubt it will remain popular, but it's unlikely to maintain its hegemony.

It seems to be a primal reaction rather than a learned behavior. Helvetica looks the best to me because it looks the best, not because someone else said so.

What an incredible assertion. Without your culture, all the books you have seen, the adverts you have seen, the computers you use, your appreciation of helvetica would be entirely different. I'm sure there are cases where nature overcomes nurture, but in this case context is almost everything. You wouldn't even know what these squiggles represented without picking up a huge amount of cultural baggage associated with them, without listening to what other people say. Our opinion on fonts and matters of style is based almost entirely on cultural baggage.

Obligatory link to xkcd - http://xkcd.com/927/

A font isn't a standard, it's an identity. "Oh, they're using a non-primary colour? I'll stick to RBY, thanks."

Reply on news.ycombinator.com