08 Jul

Web fonts for Korean websites

Over the last decade or so, we’ve seen a tremendous increase in possibilities about what is possible in regards to fonts on the web. Online repositories like https://fonts.google.com/ or adobe typekit keep expanding the possibilities of fonts that we can use on the web. But how does it look with fonts that don’t use western alphabet, but rather something like 가, 나, 다, 라, 빨? Not so bright unfortunately.

What are web fonts built with?

In fonts, each character is called a Glyph. Imagine little vectorized drawings (points, lines, curves, angles) that are then displayed by your computer. The alphabet in english and most western languages consists of somewhere around 30 characters. Double that for upper and lowercase, and you have the number of glyphs required to draw a font.  An example of a small font from Google web fonts is ‘Bubbler One”. It will only add 10KB to the size of your website.

The size of Korean fonts

The Korean alphabet (called Hangeul) contains a lot more characters than this. A font for the Korean alphabet could support up to 11,172 characters. For web fonts, this will of course grow the size of the file significantly. The smallest korean web font I’ve come across was Ticket Monster’s Tmon at 5 MB. This size will increases the download time of your website and if there’s one thing everybody hates it’s a slow loading website.  Googles’  open source “Noto CJK” font even amounts to a whopping 99 MB. Those sizes are just too large to make users download them when viewing a website.

So how do you build nice looking websites in Korean?

In Korea, I’ve seen three aproaches to make websites look nicer. I will explain them and point out some advantages/disadvantages to the solutions.

1. The “one image” sledgehammer approach

This one is commonly found on all sorts of e-commerce websites in the country. The idea is that you create one big image in photoshop. This way, you can put all the product images, descriptions, fonts, icons, features, special offers, conditions (and whatever amount of lens-glare or sparkles you want) in there. Then upload this image as your product description on to the e-commerce site. I downloaded an example of this and put it here.


Pros:

  • Free choice of fonts
  • It will look the same in any browser
  • Easy to upload for the vendor/merchant

Cons:

  • You can not link parts of your image to different locations
  • The content does not adapt well to small screens so users need to scroll sideways or zoom in and out a lot
  • The text is not indexed by any search engines
  • Very hard to maintain or update. Each time you want to change a word or a price, you need the help of a designer
  • Customers can not copy/past parts of your product description, which they would do for all kinds of reasons. (send it as email, tweet it, translate, etc)

 

2. The strict western “text for text, images for images” approach

This is what we are mostly used to in the west. You use text as regular html content whenever possible and  images for single elements in the content like pictures or logos. The most common places where you would see this approach is content heavy websites such as newspapers (http://news.joins.com/article/21675296?cloc=joongang|home|newslist1) or blogs (http://blog.naver.com/woksusu/221031724093)

Pros:

  • Indexed by search engines
  • Easy to update and maintain
  • Can contain links inside the content
  • Easily scales to mobile screens
  • Users can interact with the content (mark, translate, share)*

Cons:

  • Can look very inconsistent or just ugly on devices with few korean fonts installed

(* it should be noted that a lot of korean websites are still employing the practice of restricting people’s browser functions such as completely disabling the right click)

 

3. The hybrid approach

This one I have seen increasingly on newer Korean websites that are more tech oriented. Especially in combination with flat design. Most of the written content will be text based and given some space to breathe. Headings, Links and Navigation elements that don’t change too often are displayed using rendered text in sprites. For example Kakao uses a combination of the two.

Kakao's homepage

Kakao is South Koreas leading chat, social commerce and upcoming payment platform.

The navigation on the left including the title are displayed using this single sprite image here:

I appreciate the pragmatic approach, and as a bonus, the content is much more searchable by search engines. get to use different html tags with alt-texts or content that can be better indexed by search engines than just one big image.

Pros:

  • Ability to use any font for small parts of the website
  • Indexing by search engines will work OK
  • Looks the nicest

Cons:

  • Very tedious to set up and even more if they decide to change the look of the site.

Other leads

While researching for this article, I found an interesting thing in Wikipedia:

Of the 11,172 possible Hangul syllables, the most frequent 256 have a cumulative frequency of 88.2%; with the top 512, it reaches 99.9%

So maybe someone could come up with a subset of the most common 99.9% characters and then find a solution for whenever that doesn’t work. (maybe including the missing characters as a separate resource whenever they’re needed?)

 

Basic font groups according to W3C recommendations

Apart from the explicit font names like “Verdana” or “Helvetia” there are the so called Generic Font Groups. Like serif, sans-serif, cursive, fantasy and monospace. The actual fonts that will be used for this depend on what you have installed on your machine or what your browser wants to do with it. And in most cases they are not the prettiest choices. Here is an example of those basic fonts on my “US system”.

koreanandenglish

Those font groups will also work for Korean content. But as it is in english, the aesthetic choices and the visual end result are far from what most clients or website owners would like to see on their online presence.

11 Oct

How to localize a website for South Korea

Like any culture, South Korea has its own challenges and pitfalls that you should keep in mind when you have to localize a website for the Korean market. This post is about the unique challenges I have encountered with my projects. I am aware that there are probably more things that are commonly overlooked.

 

Korean Names are short

The normal lenght of Korean names is 1 character for the last name, and 2 characters for the first name. There are some exceptions, like last names with more than one characters. But keep that in mind when you validate your forms.

Like other asian countries, they also generally write the Last name before the first name. So a typical name Lee Kyung-Su in a standard bootstrap form will look like this:

koreanname

Keep that in mind when you design your signup, checkout or login forms.

 

Addresses are written upside down

Addresses in the west are usually written from small to large entity. In Korea, the order of these is inverted. Here is a comparison.

Name
Street and Number
District
City and Postal Code
State
City
District
Street and Number
Name
Postal Code

 

How do you talk to your users?

In everyday English you only use one form of politeness. “You”. The Korean language has a whole bunch of them divided into levels of politeness and formality. And which form you use to address your customers or users makes a huge difference. The common form to write is the Haeyo-che form also known to English speakers as the polite form. Refrain from using the impolite form, as users will definitely feel offended by that.

Another thing worth mentioning is that you can’t just address your users in the same way you would in English. If your app or website greets the user after login with “Hi John”, that could be a bad idea in Korea as calling someone by his/her first name is much less common and only done if the speakers are either very close, or if the speaker is talking to a child.

 

 Date and Time

The common formats of how dates are written in Korea are:

  • 2015.9.13
  • 2015/09/13
  • 2015년 9월 13일

 

Currency

The official currency in South Korea is the Korean Won. It uses the international abbreviation of KRW or the currency symbol ₩. Prices are written in the format #,###. Often the name of the currency “Won” is written out in Hangul as 원 to show prices. So if your website is in English and Korean, it would be a good idea to display prices a little different. For example like this:

English
₩4,500
Korean
4,500원

One important thing to know is that the Korean language does not use blocks of three to separate numbers. They do have a word for thousand (cheon), but they also have a word for ten-thousand (man). 100,000 in english would be called one-hundred thousand. In Korea on the other hand it would be called ten-man. After that follows one-hundred man, one-thousand man and then one “eok”.

1,000 One thousand 1000 Cheon
10,000 Ten thousand 1,0000 Man
100,000 One hundred thousand 10,0000 Ship (ten) man
1,000,000 One million 100,0000 Baek (hundred) man
10,000,000 Ten million 1000,0000 Cheon (thousand) man
100,000,000 One hundred million 1,0000,0000 Eok

 

If I find more, I will keep posting things here. Or if you happen to know about more Korean localization topics I’m happy to include them here.