Design like a Bilingual
Being a good translator doesn’t only require grammatical skills, it also requires a grasp on how the language is actually spoken and written in the real world. Designing a Thai typeface to match a Latin typeface feels more or less like translating languages.
As a Thai type designer, I don’t want to Google translate Latin typefaces. I want to design typefaces like I understand them, so that it’s comfortable for native readers. Even for a native (Thai) like myself, this isn’t a piece of cake. With not much understanding and experience on type design, I can’t just jump into a pool of commercial work in hopes of surviving. I need a project–to learn, to practice, and to document my own how-tos for future reference.
And good for me, there’s something called an open-source project. This is a project that is open to anybody — free to study, use, modify, and distribute. I’d say this is a great opportunity to learn and get feedback from real users.
There is an international typeface family now available as an open-source project (OFL) on GitHub with four subfamilies (Sans, Sans Condensed, Serif, and Mono), eight weights and two styles (Roman & Italic). Yes, I’m talking about IBM’s first bespoke typeface, IBM Plex.
The Big Blue’s typographic history dates back to the beloved screenwriter typeface like Courier or the famous Eye-Bee-M rebus by Paul Rand. However, after years of speaking with Helvetica, it’s time for a change. Mike Abbink, the executive director of IBM brand experience and design, along with Bold Monday, a Dutch type foundry, developed IBM Plex to represent the company’s own unique voice.
Note to self: Step one, learn as much as possible about the Latin typeface you’ll be translating.
Designed to capture the history and spirit of IBM, Plex illustrates the idea of man and machine–balance between the natural and the engineered. Plex’s subtle but prominent details came about through a mixture of straights and curves.
For starters, Plex has straight interiors but smooth, curved exteriors in the verticals of its round forms. It also shows recognizable humanistic traits with its angled terminals influenced by Grotesque typefaces. Plex’s signature sharp-angled corners and round exteriors are rooted in the ‘B’ in IBM’s logotype. Also, notice the sharp vertex but flat apex.
Besides the mixture of straights and curves, one of the noteworthy features of Plex is its modulation. The contrast, while modest, is visible in the overall texture.
Plex is a corporate visual language meant to be used across the board–from product, website, to development code. Mike Abbink describes that “It has to be notable without being overwhelming, and flexible enough to satisfy the communication needs of a global company” in the article ‘IBM Plex brings a new look to IBM’.
More on https://www.ibm.com/plex
Now you’ll be hopping on a journey of case studies in matching a Thai typeface with a Latin typeface–from notes I’ve made during the process:
#1 CASE STUDY — COLOR
Designing a Thai typeface that matches a Latin typeface–in terms of texture is fairly complicated, at least for a less-than-a-year-of experience type designer like myself. Even though it is a Loopless to match a Sans, you can’t deny Thai characters are still way more complex.
There are 26 letters in the English alphabet while the Thai script has 44 consonants and 15 vowels that can be combined into at least 28 vowel forms (not to mention 4 tone marks that stacks up on vowels like a pancake tower). On top of the chaotic constructions of consonants and vowels and tone marks, writing in Thai is already more complex just by comparing the anatomy of the characters.
Even though there are some characters in the set that share the exact same form (i.e. noNu.thai and lowercase u), it is not possible to share side bearing metrics between Loopless and Sans. Sharing metrics will cause the Thai script to look way tighter due to the fact that we do not have space between words. Yes you read that right. We only have space between sentences. With no periods and no commas. Just imagine you’re readingthiswholethingwithoutspacebetweenwords, that’s pretty tight.
Crucial lesson learned:
Being aware of the nature of the language you are designing is important. Many of the Thai words commonly used have stacked vowels and tone marks on top of them (as well as marks below the baseline). Imagine both scripts being used together–one clean and one complex–how does one balance the overall color?
Of both languages, which characters are most frequently used? What percentage of Latin characters have sudden contrast? How to balance that with the amount of Thai characters? I guess that’s a better way to see how much of any characteristics should be applied.
Instead of assembling all possible features, finding the right amount of where to implement the design (and where not to) is actually the challenging part of the process. Understanding the characteristics of the existing typeface before designing one to match is vital. It is as important to refrain from over-applying details and features into as many characters as possible as it affects the overall texture. If the texture’s off, it’s not a match!
#2 CASE STUDY — VOICE
IBM Plex is meant to be distinctive yet timeless, noticeable but not distracting. Along the way, I spent a lot of my time ‘trying to design’. Now I learned–since I started designing Thai characters–that trying too hard to design can result in the opposite of timelessness, and the ‘distinctive’ design could end up being a distraction.
This will be the case study of toTao-thai:
Figure.1 and Figure.2 is too decorative. Their styles resemble oldstyle letterings and movie posters, and IBM Plex does not. The level of fanciness is way higher than its team members’. Distinctiveness is good, but not to the point where you would stop and question the font while you read. The structure, or the bone, of the character should still be as familiar/default as possible. Note to self: Notable, not overwhelming.
Figure.3 is heading in good direction, it is similar to the structure of the uppercase B. However, the overall proportion of Plex is not wide. If I go with this option there might be a problem when it gets to the thicker weights. It might also give off (especially to native readers) a somewhat ‘cute’ impression. toTao-thai in this particular style can be seen often on children’s product, cartoons, etc. Similar to an uppercase W with a curvy bottom.
Now we are left with Figure.4 and Figure.5.
Figure.5 seems to be the most rational solution, in fact its form is closer to the traditional toTao-thai (as seen in pink), plus the sharp vertex echoes that of the Latin ‘M’.
Crucial lesson learned:
When designing a Thai typeface that reflects Latin, make sure to convey the same intention, not only in the harmonious rhythm of its shape and form, but also in the formality of its voice. If it is meant to be read as formal, be formal in both languages. If it is meant to be read as distinct but not peculiar, translate that character as much as possible.
It is also important to know that some details that are present (but not distracting) in Latin characters, could actually be shouting at you, in a completely different tone of voice, when it is in a different language.
#3 CASE STUDY — LANGUAGE FAMILIARITY
We cannot deny that sharp-angled corner and smooth exterior is one of the most recognizable features of IBM Plex. It is applied to thoThung-thai and other similar characters. But why doesn’t it work when it comes to loLing-thai?
Call me old-fashioned, but by ‘not working’ I’m referring to details that stop you from focusing on the message and instead make you wonder why a character looks the way it is.
thoThung-thai is written from bottom to top, going up in a straight manner. While loLing-thai starts from bottom to top as well, it continues as a curve, and without the Loop, a curved counter needs to be present. Unlike serifs, loops can’t just be cut off, as traces of where the pen starts is mandatory. More on this topic at — ทบทวนความคิดอย่างช้าๆ เกี่ยวกับตัวอักษรไทย (ตอนที่ 2) by Chawanat Suwan.
The length of the horizontal line that lies on the baseline needs to be longer in order to make loLing-thai natural, not the man with short arms that he is now. However, with the extended line, it creates a different shape that does not exist anywhere in Latin. We do not want to create a new system but we also don’t want a man with short arms. Eventually I decided to take out the shape. (I told you earlier, I was trying too hard to implement everything.) Instead, I used a more natural curve, with the same terminal system I did for doDek-thai and toTao-thai. With the curved counterspace present, the loLing-thai became more familiar to native readers. That distinct shape now has to be applied somewhere else to create balance in the overall texture. I guess I tried, but in this case it’s gone for good.
Crucial lesson learned:
Language familiarity helps a lot. And if you read, write, and see the characters every single day, when something looks peculiar, you’ll know.
If anything looks like a man with a crooked shoulder and you cannot figure it out, look away from the screen. Go back to pencil and paper. Write any word containing that particular character. Look at the counter, the proportion, etc. Always check your proof. See characters in context. They all work as a team. As Matthew Carter once said, “Type is a beautiful group of letters, not a group of beautiful letters.”
#4 CASE STUDY — PROPORTION
Today we can see Thai script used alongside Latin everywhere–in advertisements, websites, mobile applications, or on the menu laying on the table of your favorite coffee shop (in Thailand, of course). I don’t mean alongside each other as a translation, but in a line, where Thai and English words work together in a sentence. The width and the height of the Thai script now needs to work with not only the Latin uppercase but also the lowercase, since Thai could be paired with anything–all caps, sentence case, or title case.
In order for Thai script to work in any situation (paired with all caps, sentence case, or title case), we must first determine the bo-height. In Latin, we call the distance between the baseline and the mean line of lowercase letters x-height. In Thai, we call it bo-height, ‘bo’ comes from boBaimai-thai–the most squarish form of all consonants. Generally, bo-height sits between cap-height and x-height. This will ensure Thai characters do not look too big nor too tiny. However it’s different when it comes to typefaces that have large x-heights. In this case, there’s a chance that the bo-height matches the x-height.
After our bo-height is set, we can briefly divide Thai consonants into three sets of proportions. First group, the regular width, or let’s say a square width. Second, the narrow, more of a condensed form basically. Third, the double square. The width between these group of characters must be visible.
woWaen-thai might seem to be a flipped lowercase c, phoPhan-thai might look similar to lowercase w and roRua-thai might share the same construction as lowercase s but the proportion cannot be shared.
For woWaen-thai, if the lowercase c is flipped straightforwardly, its proportion would fall into the first group. When supposedly woWaen-thai should be in the second.
phoPhan-thai might look like it could share the same structure with lowercase w–but phoPhan-thai is not lowercase w. Both legs (left and right stem) are less slanted and more space is needed in the second counterspace–based on the traditional anatomy of the character.
Same as woWaen-thai, roRua-thai is in the second category–narrow. roRua-thai needs to be narrower than lowercase s.
Crucial lesson learned:
Some of the forms might deceive us and seem easily interchangeable, but they’re not. Don’t let’em forms fool you! Keep in mind–different language, different proportion. Know which group the character you are working on belongs to. Put characters of different groups beside each other, and if they are too close in terms of width, fix the proportion!
FINAL THOUGHTS
With all due respect, this project and documentation is intended solely for self-improvement/educational purpose. There are crucial lessons I’ve learned along the way. Some things I would not have considered before–but now I do. I have always found blogs, process books, or behind-the-scenes articles helpful. It’s not only about the end product, but how designers made their decisions–their thought process. I have learned so much through process of others in the past. I hope this can be where I share my experience and if you find it just a tad useful, I’m thankful.
I honestly think there are no right or wrong answers when it comes to making design decisions. What I have documented is more of my preference and how/why I chose to do so (while being as logical as possible along the way). As it is an open-source project, harsh crits, better ideas and general feedback is more than welcome!
Download Anuphan now at https://github.com/cadsondemak/Anuphan
-
Original Source
https://cadsondemak.com/ibm-plex-thai/
Reference
https://medium.com/@Uxtrending/ibm-plex-a-typeface-and-a-story-e01b2e502aab
https://www.ibm.com/thought-leadership/innovation_explanations/article/mike-abbink.html
