Designing for readability in other languages
San Francisco Digital Services is building a new citywide website at SF.gov. One of our priorities is readability, even across multiple languages.
On the SF.gov header, you can choose among our official languages to translate to. Right now they include English, Chinese (Traditional), Filipino, and Spanish.
When the site is translated, it uses the default text style for English. For languages using the Latin alphabet (like English does), readability is not affected. But I noticed that the readability of traditional Chinese needed work.
Readability in Chinese
Font sizes in Chinese happen to be smaller. You can see this with the differences in letter spacing and line-height. Chinese looks more cramped, even at the same font size.
Small text can affect readability in any language. But it’s especially important for Chinese.
When you read a language that uses an alphabet, you are not identifying each letter at once. Your eyes group the letters together. You identify each word by its general shape.
Unlike languages that use an alphabet, Chinese language text is written in logogram. Each character has multiple strokes. In Chinese, pattern recognition for reading happens on a character level. If a character is complex and small, it looks mushy and becomes hard to identify.
Because Chinese looked cramped on our default styles, we created separate text styles for it.
Why Chinese is a priority
Chinese speakers are the single largest ethnic minority group in San Francisco, with 21.4% of the total population. Some have limited proficiency in English. Some might not even understand nor speak any English. We had to make sure the translated site works for residents the same as it does in English.
Styling Chinese text
We used an open-source typeface called Noto Sans CJK TC. It contains 6 different font weights which give us the flexibility to create a strong visual hierarchy.
I modified the default English text style for Chinese by:
- Adding space between each character in headings and titles
- Increasing font size and line-height in the body text
- Changing any strong font weights to bold font weights
All of these changes help make the Chinese text more legible.
We weren’t concerned that increasing the font size would affect the page length. Chinese text is shorter than English, even if it means the same thing.
Supporting other languages further
Besides general readability, we are aware that translations need work.
Right now, we use Google Translate for all pages on SF.gov. The result can sometimes be quite bad. We aim to tackle this soon, to make sure the experience is the same no matter what language you read the site in.
