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 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”.

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.