Back to posts

January 07, 2014 Language, layout and the typographic details Natalie Dodd, Designer

Language, layout and the typographic details

Now that the design team is nearing completion of the responsive Jobseeker site, I am starting work on bringing the same responsive principles over to the self-service Recruiter Services Portal. All of our responsive products are increasingly being delivered to international markets. One of the challenges for a designer is to design responsive layouts for multiple languages.

This week a colleague pointed out that some buttons could be problematic, as in his experience over the last year; he had noticed how German words seemed to be consistently longer than the English translation. We looked at existing layouts on our jobseeker site to see where this had caused some issues. To give an example: A simple article button with the copy ‘Learn more’ translated to German is ‘Erfahren Sie mehr’. 15 Characters compared to 9 in English, with 3 words instead of two, so an extra character space to allow for that as well.

By changing my Twitter language preference to German, I was also able to compare how some of their buttons fared. Once more it became apparent that button copy is in danger of being too long.

With a responsive layout, this is problematic when the character size has a minimum threshold or when type is not designed to scale for varying screen sizes. If you are using breakpoints in your layout but not in your typography - you may end up with text that line wraps within a button. In my opinion the trouble with this, is that that may cause it to no longer look like a button, and when something doesn’t look like what it representing, the design and UX is compromised. A button is archetypal in web design meaning we are accustomed to this object taking on a certain and expected appearance, and archetypes can be really useful in helping the user carry out a task.

So what can we do? We could impose a minimum button width, which relies on knowing the copy length for all languages from the outset. Or possibly use a fall back alternative to a button, such as an icon and a text link. I’m sure there are a myriad of alternatives, and I am also sure that this problem is not limited to buttons. So to avoid a myriad of bespoke solutions for each layout element and language, this issue needs a method for approaching responsive layout and typography across multiple languages, and this is what I will be working towards.

I find it sometimes helpful to look at print type rules and how they came about. After a stint working alongside a German print designer in Amsterdam, I have since been aware that German typography does often seem to favour smaller font sizes. It would not surprise me if this was a result of aiming to adhere to the optimal number of words per line when the words are longer. Thereby complying with the already established optimal line-length (for reading) and page size standards in print.

While reading an article on logical breakpoints in responsive design, I came across an interesting 'Measure Help Tool' designed by Vasilis van Gemert. The tool is for viewing type in different languages. Despite prototyping only language and font family, you’ll see that these two variables alone can lead to some varying results.


Gemert also points out the problem that I suspected would affect more than just buttons. When comparing German set in Verdana with English set in Georgia: “The difference is huge: 10 German words set in Verdana can be 38.5 ems wide, while 10 English words set in Georgia are just 22 ems wide. In most default browser settings, that would be 616 pixels versus 352 pixels.”

Gemert proposes that ‘you could even go so far as to create different layouts for different languages. When you’re working on large international websites, this might actually be a good idea.’

Keeping this in mind, I will now be exploring further how all typography is affected by and can have affect on responsive layouts. I will also be reading more into methods for responsive type, talking more about this with the team and putting what I find to be best practice into practice.