Google Fonts Korean becomes interactive by manipulating path data

Initially launched in 2010, Google Fonts is an online collection of fonts available for designers and web developers to embed on their websites, for free. Until very recently, the collection was unable to support Korean. However, Google has now devised a more efficient means of serving Chinese, Japanese and Korean (CJK) font files, which have very large character sets, resulting in large file sizes.

The Korean alphabet, Hangul, has been used since the 15th century and consists of 19 consonants, which reflect the shapes of the articulators when making the sounds, and 21 vowels, evolved from three shapes representing the sky, the earth and humans. These elements, called jamo, can then be grouped into syllabic blocks which form the letters.

In a similar manner to Chinese letters or Japanese kana, the visual balance of a jamo changes in relation to its surrounding jamo. To enable this, a Korean font usually includes every possible combination of jamo, meaning it would contain a total of 17,388 glyphs. As well as being time-consuming to develop typefaces consisting of this many glyphs, it also results in large file sizes. “For example,” reads the Google Fonts Korean website, “Google is developing the Noto fonts to support all languages, and while the Noto Latin font is 445KB, the Noto Simplified Chinese (SC) font is 15.7MB, containing a total of 44,683 glyphs.”

However, by developing a new technique which sees it scanning Korean web pages, Google was able to ascertain which characters are most likely to appear together. This informed a “subset slicing strategy” which sorts the 17,388 glyphs into around 100 slices. This means when a user sees the font on a webpage, the browser will only load the font slices required for that page, resulting in much faster loading times. In order to showcase this fact, Google got in touch with E Roon Kang of New York City-based design studio Math Practice, to create a mini-site.

Roon worked with Seoul-based data visualisation specialist, Wonyoung So, on the development of the site but the team also included Yang Jang who curated the fonts, Guhong Min, the site’s Korean editor and Hannah Son, its English editor.

Designed in monochrome, the site features the supported fonts, which, as well as being editable to display any text is interactive via a series of mouse movements and clicks. “I wanted the site to be an interactive experience, as opposed to a simple list of available Korean fonts from Google Fonts,” Roon tells It’s Nice That. As all of the featured fonts are open-source, “it was possible to have full access to manipulate their path data – gaining access to a commercial font on this level is usually prohibited through their End User License Agreement.” Roon, therefore, decided to showcase the high levels of access possible through Google Fonts.

Whereas some of the interactions highlight this accessibility, others hint at the pragmatic aspects designers consider when working with type. When scrolling on the site, users can click anywhere to swap between these interactions to use the toggles at the top of the page. Throughout the experience, there is true attention detail that even sees the site’s favicon changing as users cycle through the interactions.