Typographic Best Practices for your language

[cpalmieri]

This topic was imported from the Typophile platform

I've been working as a designer in Japan for the last 7 years, and picked up a handful of tricks and rules of thumb to keep me out of trouble when designing Japanese or Japanese/English print pieces and websites, some of which I shared on my blog a few years ago.

Since then, I've had a few opportunities to design in other languages, and never ran into any major issues. Until recently when I hit a few copy-fitting bumps with German during a redesign project for a website that needs to support a dozen European languages.

Is there any resource out there that has some basic basic practices for designing in various languages? If not, shall we start one in this thread?

Here's my incomplete contribution to kick things off:

(All relative adjustments are "_____ than same in English")

Japanese:

• A little more leading to let heavy, mono-width/height Kanji breath.
• More reliance on decorative elements for list items (no caps in Ja.)
• Web-only: More reliance on graphic text (less system fonts to choose from)
• Web-only: WinXP will round down odd numbered font-sizes (e.g. 11px -> 10px)
• Allow for more design time for tracking/kerning adjustments.
• For multi-lingual: labels/navigation/titles can be drastically longer/shorter than En. Get key copy early for testing.

German (courtesy of Oliver R.)

• Wider columns (to accommodate longer words)
• Slightly more leading (to accommodate more capitalized words)

[poms]

Verdana shows the wrong standard german close quotation mark „Hallo“, but you could use guillmets instead – »Hallo«.
In the version of Corbel (vista font) i know, the same problem occurs also.

Wider columns (to accommodate longer words)
Yes, if you have wider colums, you should enlarge the leading anyway.

[guifa]

In Spanish there's no real different concern. Used to be you'd removed accents on the vowels when in all caps situations, but that's no longer the case. I would only highly recommend that angle quotes are used instead of curly quotes, as they are prefered by the RAE.

Also, that labels and such can be much shorter or longer is standard for any translation. In general, the recommendations I've also seen and used is to assume and prepare for up to a 50% increase in length of text when going from any one language to another.

«El futuro es una línea tan fina que apenas nos damos cuenta de pintarla nosotros mismos». (La Luz Oscura, por Javier Guerrero)

[illustarellite]

cpa..... you read my mind !!

This is my endless concern .... especially when designing a logo

there are so many issues in different languages

[joeclark]

No, use encoded text, not pictures of text.

No, IE (IE what? IE6?) does not alter odd point sizes. Do not use px-sized text with IE6, since it can’t enlarge or reduce such text without Herculean efforts.

This piecemeal list of greatest hits of typographic anecdotalism seems more dangerous than useful.

—
Joe Clark
http://joeclark.org/

[John Hudson]

Verdana shows the wrong standard german close quotation mark „Hallo“, but you could use guillmets instead – »Hallo«.
In the version of Corbel (vista font) i know, the same problem occurs also.

This is an interesting issue. Modern German punctuation uses what most of think of as the 'left quote' mark “ to close quotations, but the expectation of German typography is that this glyph curls or leans away from the text, as is the case in most serif faces and some sans serif faces. San serif faces that were designed specifically to work well on screen present a problem, though, because the easiest way to make the quote marks distinguishable at low resolution is to lean them in opposite directions (following a common written form, at least in Anglo-American usage). As you observe, this produces the 'wrong' form for the German closing quotes.

[cpalmieri]

Joe,

Sorry, some of my points were worded vaguely enough to be misinterpreted into the worst possible practices. You may disagree with some of them anyway, but they are based on my experience designing and coding Japanese and Ja/En websites over several years, with periodic experimentation and research as browsers and techniques changed.

I make mistakes sometimes, and I don't work for the W3C or an accessibility research group, so my advice may not be perfect, but on the whole it's worked well enough for my clients and their visitors.

Getting down to specifics:

* I've done tests several times over the last 4 years (including today) on different machines. I'll send you screenshots. Japanese characters set to 10px and 11px (or 1.0em and 1.1em within 62.5% body) are rendered identical in size in IE 6 and 7 (WinXP).

* I spoke in pixels because they're easy to understand in the context of this conversation, but I set all my type in ems, and recommend everyone to do the same.

* Re: pictures of text. Maybe "text" was the wrong word (I didn't mean body text), I don't recommend it for body copy of course, but I think image replacement of decently-sized static headlines is reasonable compromise between aesthetics and accessibility. Encoding won't help you when there are 2-3 decent Japanese system fonts to choose from on Mac and 2 assey ones on Windows and they're not the same fonts.

I'm not expecting the next Bringhurst to come out of this thread, but without any great resource on this specific topic (that I know of), maybe we can gather enough practical techniques to rise above a "piecemeal list of greatest hits of typographic anecdotalism".

[Solt]

German:
look for a typeface that features rather small and narrow caps. big caps make german texts blotchy.

[Chris Dean]

Tracking

[oprion]

In Russian:

«Guillemets» should be used for quotation marks, for a quote within a quote, it's customary to use „this format“ of the curly quote marks.

Abbreviated names need a non-breaking space after the dot: A. P. Checkhov vs A.P.Checkhov.

Abbreviations always terminate in a dot, so: tel.: (654)-55-4454 vs tel: (654)-55-4454

En-dash isn't used,it is generally replaced with an em-dash.

It is customary to move the single-letter conjunctions to the beginning of a new line rather then let them dangling at the end of the previous one.

L e t t e r s p a c i n g used to be commonly employed in the same function as one would use italics. This practice seems to be finally dying out.
_____________________________________________
Personal Art and Design Portal of Ivan Gulkov
www.ivangdesign.com

[joeclark]

If you have test cases (using extremely minimal valid markup and CSS) about odd-px-sized Japanese text, please publish them so standardistas can look at them.

—
Joe Clark
http://joeclark.org/