Getting Futura right in UI design
Having fun with Stanley Kubrick’s favorite typeface.
Geometric typefaces are still a big hit these days and far more like a temporary trend. It all started since Spotify came up in 2016 with the announcement of using Circular as the primary typeface for their brand and products. Designers around the globe love the constructed look and feel of fonts like Platform, Recta or Sailec, to name a few.
But next to the more modern and contemporary approaches, there is a classic one, who comes never out of fashion. I’m talking about Paul Renner’s Futura — a timeless gem.
After around 90 years of its release through Bauersche Gießerei, this geometric typeface is still widely used and found his way on screen. At least I would claim that it’s actually one of the most used typefaces on the web.
But with the extensive distribution, there comes the misuse. People tend to set the spacing too wide or too narrow, use wrong font weights and so on. So — I came up with the idea of this story and show how to avoid common mistakes.
Just to make it clear, this is no how-to or the definite guide to using Futura the best way. It’s more a small collection of thoughts from myself to get the most out of it. I’m also pretty sure, that all the stuff I’m talking about within the next minutes, can be adopted to every other typeface as well. Let’s Start.
Talking about characteristics
I don’t want to bore you out with historical insights about Paul Renner or Futura itself. If you want to know more about it, head over to Wikipedia and have a look. But it could be good to have a deeper view of the typical characteristics of her letterforms, to understand and figure out how to use it properly.
The large ascender-height and the obvious low x-height, give Futura a very elegant look. This makes her predestinated for use in headlines, quotes, and mid-sized body copy. On the other hand, you have the disadvantage, that the readability is slightly poor in very small sizes.
Besides, through the constructed approach, based on geometrical forms, Futura takes a lot of space and produces some extreme looking letterforms.
What does this mean in detail? If you look further, all the rounded letters like “C” and “O” which are built on a circle, are pretty wide. Against to this, the more upright ones like “F” and “P” look a lot more narrow. The sharped edged “M” and “N” accentuate the overall perfect geometric style.
Set your Letterspacing the accurate way
With the characteristics in mind, we head over to the mentioned capital letters. Designers love to use them for all their specific needs. Headlines, sublines, and quotes, to name a few. But you have to be a little bit tricky when you want to use Futura this way. Let me show you why.
In the example, you can see a sentence, transformed to uppercase. Yes, it is readable and the build in kerning made it look okay but at the same time a little bit unbalanced. Especially on the lighter font weights, it doesn’t work very well. This is caused by the mentioned extreme letterforms. So, what we can do to make them work?
My exploration and suggestion on this are, to give the letters more space and set the tracking or also known as letterspacing a bit more higher.
As you can see, with just some tweaking around, it looks far better — instantly. Although, the range I used varies between 1,5 and 0,5 which you can set very easy in Sketch. You maybe noticed, the lighter the font weight, the more spacing is needed. I will give a deeper explanation about it in one of my future reads.
Speed up your weights
With plenty of different weights and matching italics, Futura is a true workhorse of a typeface. If you want to design a web interface, an app or a visually striking website, it will help to get the job done.
But in advanced, you should figure out which weights will fit your needs the most. A simple style guide with a bunch of different headline sizes and body copy will give you a first impression how the type will perform. It will also help you to generate harmonic proportions of your type sizing.
I often see drafts or a published design, where a much too light weight is used for the body copy. I think the reason behind is, that designers try to archive a chic or somewhat fashionably look with it. But you really should avoid it. At least there is a well-designed book weight, which is a pleasure for the eyes and builds up a perfect contrast. Your readers will love it.
As you can see in the example, the lighter weight breaks apart and blinks on the screen. You have to squeeze your eyes to get an idea of what you are actually reading. On the other side, you’ll have fun reading the text on the right, set in Futura Book. Give it a try!
It’s all about lines and lengths
You have to set different parameters in a right manner to get perfect readability. It has to do with the length of the lines, the correct size of the type itself and the line height. I presume that you already have some experience about this and so I will jump right into it without too much theory.
If you want to set a good line height when using Futura, you have to keep the large ascenders and descenders in mind. Typefaces like Helvetica or Univers are much more compact so you can tighten the space between the lines a lot more and still get nice results.
My personal experience shows, that the factor of 1.5 to the chosen size of type, will deliver a suitable result. So if you set the font size to 20px you should go with 30px for the line height.
Keep in mind that the line height stands in direct connection to the length of the line. So if you’re using longer lines, you should increase the line height — maybe to a factor of 1.6 or even more. Obverse to this you sure can decrease it, when your design features shorter lines.
In this simple comparison, the column with the body copy is 690px long with a font size of 22px and a line height of 1.5, which will be 33px. Every line counts around 75 characters per line, which is suitable for long-term reading. You could even think about it, to increase the letter spacing a little bit. Against to this, the image caption features a font size of 16px and a line height of 1.3, which fits quite well.
Unnecessary capitalization? Avoid it!
There is one thing you really should avoid — the extensive use of uppercase text. It will look awful. To get it right, I don’t talk about headlines, quotes or something like categories. In detail, I’m talking about long-term reading text. It is a common practice to avoid capitalization but there are some typefaces who works still quite good when set in uppercase. But not Futura.
Through the already mentioned diverging widths of the single letterforms, Futura becomes hard to read and your eyes will get tired after some lines. If you have to use it this way, you can try to increase the line-height and letterspacing a little bit more. You have to figure it out, what will fit the most according to your column width and text size.
Again, you surely could use uppercase text as some kind of design element in headlines or graphics, like I did in this article, but an uppercase body copy — no, don’t do it.
How about your thoughts?
I’m pretty sure, that we’ve just scraped the surface and there will be a plenty of different points to get the most out of Futura. But for now, I’m curious about your thoughts.
I wouldn’t describe this as a conclusion, but what I want to say is, that readability and typography itself are very individual. Sure, you can — as I mentioned at the beginning — adopt all the points to every other typeface as well but at least you have to tweak them in every single case, minimum a little bit to get a perfect result. Also, it depends in someway on your personal preferences and what you like.
In the end, a little fun fact. Did you know that director and mastermind Stanley Kubrick loved Futura?
He used her for the opening screens in the iconic sci-fi movie “2001: a space odyssey” or late 1990’s “Eyes Wide Shut”. Kubrick definitely liked his fonts geometric.
Other Reads
About
I’m Florian Gaefke, a UI/UX designer based in Hamburg, Germany with a deep love and understanding of typography. Besides, Star Wars is my biggest passion, I occasionally talk about it on YouTube, and If you want to conquer my heart — try it with good food. I love it! Follow me on Twitter or get in contact with me through LinkedIn or XING.
