Webfonts and Autotranslate

Webfonts offer greater control and visual consistency when using automatic site translation. With a bit of tinkering, you can not only make your own browsing on foreign language sites less of an eyesore, you can help out visitors on your sites too.

Translate this article! Choose a language from the drop down menu to see auto translate in action:


Monsieur Papon page

Website for Julia Stagg’s book, “Monsieur Papon oder ein Dorf steht kopf” in its original German.

The experience of using automatic online translation has never been particularly smooth, especially for the website visitor. Using tools such as Google’s translation service or Yahoo’s Babelfish can be jarring and disruptive, requiring a new browser tab and entering website addresses into the box often returns a bare bones page stripped of, if not essential, then useful layout and styling. 

Monsieur Papon screengrab from Google Translate
Monsieur Papon translated to English

Left: Piping the site URL through Google’s online translation tool returns this rather wonky layout.

Right: Chrome’s built in translate tool retains styling and layout within the same browser tab.

Which is fine — at least we get to read that blurb about the Spanish villa we were planning to book for next summer.

More problematic for the translation tools are those bits of text created as images or rendered using Flash, these will remain in their original language. The example above, a webpage for the novel Monsieur Papon by German author Julia Stagg, uses a mixture of real text and images. HVD’s Reklame is used heavily; in the headlines and navigation, in a call out and on the cover of the book itself. Webfonts make for a consistent experience throughout, uniting the photograph of the book jacket with the page text and the promotion graphic. The only hitch comes when we translate the page and the Erscheint label remains in German – but that’s probably okay, we can work out what it means, and in any case, it’s a German book being promoted for German readers so facilitating translations into other languages isn’t the publisher’s priority, yet.

Seamless translations

But the web can, and does, do better, and webfonts are playing their part in making our global online community a more seamless place. Sophisticated layouts and hierarchies of information rendered in real text are now possible with all text ready for automatic translation. This site (below) for German design agency GoldOrange uses real text almost everywhere (set in Nimbus Sans), with only their logo rendered as an image.

GoldOranage website

Left: GoldOrange website in its original German.

Right: Using Chrome's built-in autotranslate, the site retains layout and styling

The site design survives the switch between languages admirably, even when parsed through the Google Translate website (through a sensible choice of fallback fonts), but it looks almost perfect in Google’s Chrome browser, the best thing out there right now for typographically concerned web users; it knows what your daily operating language is, automatically detects a site’s language and offers you a translation right in your browser with a single click. Its version of the page is a faithful rendition of the original.

Extensions and plug ins for the other browsers reproduce pretty much the same results, with more or less control required from the user.

More importantly from a user experience perspective, not leaving the browser window means that the back/forward sequence is unbroken, and the page title is retained for finding again in the history or in bookmarks.

Control your users’ experience

Which just leaves the obvious protest — we can’t choose our users’s browser for them, that goes against every UX recommendation ever handed down from the holy mountain.

As a basic tool, Google provides a few lines of code to add to your pages, meaning you can offer your visitors instant translation without any of the disruption to their browsing required by a visit to Google Translate or Babelfish. It’s not as integral a solution as building and maintaining a multilingual site from scratch, but if a small flag icon in your page isn't too disturbing, then it’s a good second best.

A human touch

In the last few weeks we've highlighted a few sites that have made good use of webfonts to make a seamless switch between languages. MusucBag and Ingenetix, both dual English/German sites, were clearly designed from the outset to be bilingual with layouts designed to accommodate the inevitable and (especially between English and German) wildly different word lengths. Either a mix of machine and human translation, or completely human, they highlight the extent to which webfonts make the whole workflow much smoother. Navigation, headlines, call-outs, promos and full texts can each have their own language versions and remain as live text in a consistently styled layout.

A language strategy is an important component of any web development project. Whether it’s simply choosing to write in the clearest possible English for an international readership, employing a multilingual team of editors and authors to create region-specific content, or relying on automatic translation services to deliver your message, webfonts are making an important part of the experience much smoother for everyone involved.