- Journal
- Typography in GTK3
Typography in GTK3
Submitted by DanRabbit on Sun, 04/15/2012 - 19:41GTK3 really steps up the ability to give apps great visual design. Widgets can be more articulated with multi-stop gradients, multiple classes, fine-grained control over several states and more. But one unexplored area that GTK3 also provides for is really great typography.
As you may have noticed, the fantastic designer Ian Cylkowski (known to many as Izo or Ian Hex) has been working with us on establishing our new brand identity. Part of this identity is a set of clean and crisp typefaces to work with. We’ve chosen the light and classy “Raleway” as our Title typeface, several variations of "Open Sans" as our various header typefaces, and we’ve stayed with the tried-and-true "Droid Sans" as our interface font. This means we have something like this set to work with:
But how does this translate into GTK3? Well it looks something like this:
If you’re a developer curious to see how this works, you can try it for yourself with this bzr branch, provided you have Open Sans, Raleway, and Droid Sans installed.
But what does this really mean for our UI? Well it means stuff like this:
The best part is that the latest elementary theme already contains these classes (.title, .h1, .h2, .h3) which means that this will be available to developers in Luna and anyone currently testing the elementary theme from bzr. So let’s get excited about incorporating great typography into our apps, and see where it’ll take us!
Visually, it makes sense to use a thiner font in the title. The difference in size is enough to make a distinction. That said, it would be wise to consider some of the arguments voiced earlier in this discussion; (1) Choose a font that is not latin1-only and (2) ...keep it simple!
Open Sans also offer a thin version and using it will maintain visual consistency. And a third point; the title (raleway) is perceived as slightly thinner than the body font. I would rather see the title text slightly more bold.
I took the liberty to remix two examples to illustrate my point. The first one shows "Open Sans Light" (bottom) and raleway (top), and the second example shows "Open Sans Regular", which is slightly more bold.
Thin: http://bildr.no/view/1240571
Regular: http://bildr.no/view/1240573
What do you think?
Very nice article Dan, that last pic looks very sexy!
Check out this: http://www.infinality.net/blog/infinality-freetype-patches/
It is a patch to the freetype2 font renderer, that greatly improves rendering in Linux, I use it on my Arch laptop, and it is stunning.
hi there. i think it's generally a nice choice. i wonder: did you already decide which glyphs of Raleway you will use? i prefere the normal ones except for the w/W. here i like the one you used in the Switchbord-pic more. the other one is imho too fancy and deviates too much from the other fonts. one other thing: did you try to use open sans regular for h1 (or h2)? for my taste it is a little bit too much bold-light contrast if you combine it like in the samplepicture. but this depends on the usecases for this. could you give an "extreme" real example?
I like it, but why is there such a huge space between 'written' and 'by'. Seems odd :)
like it!
I like it! It's just sometimes Raleway looks too light or it's just me. Droid Sans will always be a favorite default. Open Sans as a window title font is also looking good.
Raleway is a sound choice for a title font, but unfortunately there's a huge problem with it - namely, the fact that using it gives both your title and your body text the same "visual weight". You might want to reconsider that.
In general, you only need one differentiator to tell the difference between elements; a bigger font *or* a bolder one should be enough.
EDIT: in other words, the additional differentiators are making the text less visually cohesive without any particular added benefit.
The thing is, we don't want nor need the title to be big and attention-grabbing. By keeping it light with Raleway, it matches the body text and allows the size to distinguish them. In contrast, the first "old and broken" picture makes the title feel heavy and in-your-face.
Is it just me? or do the new fonts look stunningly crisp?
While we're at fixing fonts, are there any plans to improve fonts for web pages? Default fonts (Arial and Times alternatives) are really poor so are default sans and serif. I think this is the main area regarding fonts that Linux desktop is years behind OSX or Windows.
Personally I diable all built-in fonts on my Linux box (except Ubuntu for UI) and install Segoe UI for all sans and Garamond for all that is serif. It makes web browsing a little bit more bearable, still I think there should be better defaults.
Midori supports web fonts, and in fact this website makes use of that. The default fonts for web pages should inherit the system default (droid)
so do Opera, Firefox, and Chrome.
I like Raleway, but I do think a slightly thicker version would improve readability. I understand I won't be seeing it as much as the others, but it's something to think about.
I think different, I like to see thinner fonts to Linux. I think all these fat fonts make Linux seem crude in comparison with Windows. Is seems that nowadays fonts are thick because the small mobile devices had thick fonds for readabilty, but I think they lack finesse and elementary definately is bringing finesse to Linux.
I like both... There are pros and cons about all version, I won't start to write philosophycal things about this, just keep it simple: the old one is much more raising, but the new one is more sexy, and more designed. But if we take a look at the original functionality of it, I think it's doesn't matter, which font is used by elementary OS for this purpose... Because it's informative both ways. At least, in my opinion. :)
I really like the new combination :D
My opinion is that elementary should associate itself only with a single font, not several, having multple fonts looks kind of inconsistent and (sorry) derpty to me. Old one looks better.
They used Droid Sans in Jupiter
Old one is better...
Raleway is attractive, but in practice it's harder to read on that second Switchboard about dialogue... It's about as thin as the regular font, so it's not visually separating out the information well enough. Maybe for subtitles it would work, or a bold version.
I agree with the fact that the second title is harder to read.
I prefer the old one..
I also prefer the old one.
I think this attention to detail is great, and I really agree with the font choices and art direction in general. Keep up the good work!
Glad to hear you guys are giving such attention to typography choice. One more way in which to demonstrate love of streamlined aesthetics.
From an æsthetics point of view I wouldn't say I do not appreciate the change. There is, however, a huge mistake here; one that is a showstopper for millions of users depending on character sets other than Latin-1. Designing without having those people in mind is, at the very least shortsighted and, to be honest, unacceptable for an open source desktop platform being designed in 2012. While both Open Sans and Droid, fonts used by Google in several products, support Cyrillic, Greek and other Latin-extended characters, Raleway doesn't. You should choose fonts that support as wide a range of character sets as possible --- and definitely more than Latin-1. Not doing so condemns your UX and comes across as amateurish and parochial. A good choice of fonts a priori is essential, even if you don't plan to localise elementary to many languages from day one.
Agree, also I think a HUGE problem with elemenary apps and desktop in general are translations.
I'd love to help translate.. but I just can't understand how to translate non-launchpad software (Like Yorba's and Midori) :/
We don't employ professional translators, so all of our translations have to come from volunteers just like our code. If you have some time, you can help us translate our apps into your native language here: https://translations.launchpad.net/elementary
Since Raleway is a Title font, I think it's only real use case in the UI would be that of either referring to the names of apps (which are not translated) or other trade marks. You won't see this huge style in the interface very often at all.
Well I think you˙re wrong. I use linux (Ubuntu at work, E at home) for everyday work which means hundreds of files in my native language which uses cyrillic characters. On one side apps whose name havent been translated will look fine, all documents in my language will look weird and as I said I have quite a number of them. So yes I agree with cosmix, when he said that you should have choosen font that supports cyrillic characters.
I think you're confused. Raleway will never be used to display the names of files.
Our body font *does* support Cryllic characters.
Let me say that again. The only font that doesn't have a wide range of character support is Raleway. This font will most likely only be used to display app names and other trademarks which are not meant to be translated.
The main ui font and all the header fonts support a wide range of characters "including Western Europe, Eastern/Central Europe, Baltic, Cyrillic, Greek and Turkish support. The Droid Sans regular font also includes support for Simplified and Traditional Chinese, Japanese and Korean support for the GB2312, Big 5, JIS 0208 and KSC 5601 character sets respectively."
«Which are not meant to be translated». Beautiful. Do you remember Murphy Laws? Anyway, don't you think that some applications' titles are not meant to be translated to English at all? Face it: μTorrent... oh sorry, �Torrent, right?
You make a good point. And personally I like the bold choice of going with Raleway. I also believe you'll be prepared to reconsider it, should problems arise with the character set during beta testing or after release :)
Can't +1 this enough.
una consulta para danrabbit, elementary sera un proyecto independiente, o siempre dependera de ubuntu (me refiero a repositorios, etc) ojala me puedes aclarar eso ya que tengo esa duda
google translate:
a query to danrabbit, elementary will be a separate project, or always depend on ubuntu (I mean repositories, etc) hopefully I can clear that up because I have this doubt
elementary será lo que necesita ser. En este momento, ganamos mas cerca dependiendo de Ubuntu que si somos completamente independientes :)
elementary will be whatever it needs to be. For the moment, we gain more by depending on Ubuntu than we would be being completely independent :)
Meh. I've used all of those fonts before, they're not as hot as you might think they are at first. I've moved a pretty huge amount of my designs to Roboto mainly. I use Lobster for my site's logo, which looks pretty nice (although I might switch it soon).
While there are tons of great (and probably newer) fonts out there, these fonts are the ones that Ian has chose for *our* brand identity in order to reflect *us*.
+1 for Roboto. It's such a beautiful typeface.
This makes me happy- I'm glad Izo's gotten involved. So this is an upstream GTK 3 feature? I can't believe it went under my radar.
Well, the upstream GTK feature is the ability to create gtk.css classes, and the ability to set font styles. What we've done is simply adopted what's done on the web with using the classes .title, .h1, etc
I really like it!