May 15, 2012

New Site with Responsive Typography

With the chaos of different screen sizes and a new generation of web browsers, the design paradigms of layout and typography have shifted away from static layouts and system fonts to dynamic layouts and custom web fonts. Now, screens are changing not just in size, but also in pixel density. In other words: we do not just need responsive layouts, we also need responsive typefaces. To test that assumption, iA has created its new website with responsive typography and a custom-built responsive typeface.

Between just a MacBook Air, a Nokia Lumia 900, a Samsung Galaxy, and an iPad3 alone we have four screen sizes and resolutions. Until recently, we only had a couple of system fonts to choose from, there was not much choice. For serifed typefaces there was mainly one (Georgia) and for sans-serifed typefaces there were two or three (mainly Arial and Verdana). These typefaces were designed in the early 1990s for what we now consider low resolution screens. They have worked well so far. Unfortunately, they don’t work on high density screens. Why?

Goodbye Georgia?

Georgia works perfectly as body text up until 16 pixels. As soon as you go over that size, it starts to look odd. This is not a design deficiency of the typeface. It was simply not designed to work for big body text sizes and dense screens.

Which is why we designed a custom typeface that adapts to different resolutions. We call it iABC (a lot of shapes were inspired by a little side project of the same name). Currently you can only see it on mobile devices and OSX. Until iABC is properly hinted, PC users will see Georgia.

In retrospect, making a custom typeface was pure madness, and the microtypographic result is far from great. Professional type designers at TypoBerlin were frowning over the many bumps and spacing mistakes.

Our new typeface is also quite boring, conceptually. But it was not our goal to convince with a best type designers that we can create the best typeface. What we wanted is to test our concept of responsive typography. And since there are hardly any screen fonts that offer this feature, we had to create it ourselves. The idea of using graded fonts for different conditions is not new. Newspapers have been using graded fonts for different paper qualities for a long time.

Our custom typeface also gave us the liberty to embed all graphic elements of the site into the typeface. Except for actual pictures, the whole website is constructed with type.

Which fonts work where and why?

Now it gets complicated. Since there are so many different screen sizes, pixel resolutions and rendering processes, it helps remembering the following rules of thumb:

  1. PC: System fonts look ok in most cases. Custom fonts turn into a nightmare if they’re not hinted.
  2. OSX: System fonts look good on low resolution screens (e.g. the old PowerBook G4 12 inch), they look too bold on high resolution screens (MacBook Air) and they look okay on Retina displays (next MacBook Pro). Lighter fonts look excellent on high resolution screens, but they are too light for Retina displays.
  3. iOS: System fonts look too bold on high resolution screens (iPhone 1-3, iPad 1-2) and they look okay on Retina Displays (iPad 3). For perfect HTML performance on Retina displays, you need a bolder font on portrait mode and a regular weight in landscape mode. For perfect performance on high resolution screens, you need a lighter typeface.

Now this list will confuse you more than it will clear things up. To put it in simpler terms: For optimal performance beyond low resolution, and outside the PC world (where system fonts still perform adequately), you need three font grades:

  • Lighter (for high resolution screens)
  • Regular (for Retina landscape HTML mode)
  • Bolder (for Retina portrait HTML mode)

Show me!

You can see it right here; that is, actually, you can’t. You can’t see responsive typography on one and the same device. And you can’t even see it comparing the devices if it’s done right. The idea of responsive typefaces is that the typeface always looks and feels the same. Let’s look at two examples:

An example from our writing app iA Writer. If you squint you will notice that A and C look the same. However, it’s actually A and B that are the same font. This means in order to make the font look the same on iPad 2 and iPad 3, the low resolution font needs to be designed a little bit lighter.

For this website we use three grades. A lighter grade for high resolution screens (top), the regular grade for Retina landscape mode (middle), and a bolder grade for Retina portrait mode (bottom). If, again, you squint, you can see that we need three different grades to get one and the same appearance. (Actually, for perfect homogeneity the bolder grade needs to be a little bit bolder than here).

Why would you care about that?

Now, this kind of malarkey is not possible in every circumstance. It is literally impossible to make Mac and PC screens look the same, but that’s not big news. However, responsive layouts and responsive typefaces create a better digital reading experience. The more readable the typeface, the better the reading performance of a site. Most people can’t discern good from bad typography, but everyone can feel it. For now, we hope that our provisory typeface doesn’t make you uncomfortable.

If you’re interested in hearing more about this, we’ve just started a series that explains Responsive Typography from scratch: Here is part 1.

Ð

Contact

iA is a strategic design agency with offices in Tokyo and Zurich. For questions regarding our apps, please visit iAWriter.com. If you are interested in our services, please use our contact form.

Thank you

Your message was successfully sent.

Oliver Reichenstein Route Kamiya-cho Bld 5F 5-2 Kamiyama-cho Shibuya-ku Tokyo 150-0047 Japan