January 26, 2020 2

CJK Variable Font Based on Source Han Sans | Masataka Hattori | ATypI 2019 Tokyo

CJK Variable Font Based on Source Han Sans | Masataka Hattori | ATypI 2019 Tokyo


Is this on? I’m Hattori from Adobe. This is my personal research project of developing a CFF2 pan-CJK variable font. I’ve made a CJK variable font using special tools and tested it in various applications. During the experiment, I noticed that I could not make a CJK variable font with only Latin-centric approach. Especially, vertical and bilingual settings raise a lot of questions. This presentation is about me trying to find a method necessary for making a CJK variable font. And this will not necessarily be released as an Adobe product in the future. I’m sorry. Weight axis comes to mind in variable fonts. You make thin and thick masters, and you get 1-axis variable font. You can interpolate medial weights in infinite steps. So far, it’s not hard to understand. While I am at it, I want to also change character width like you can with Latin variable fonts. This little idea was the start of my struggle. I made condensed glyphs at 75% of the original width. I used a technique called anisotropic scaling to preserve the stroke thickness that would otherwise become thin. Now, I could make a variable font with weight and width axes. The finished font works well in horizontal setting. Both the 75% width and full-width text look as intended. There is no animation in this talk. Please use your imagination. Vertical text looks like this. You normally don’t condense letters this way, but you can. It gets strange when you throw Latin in the mix. The width of Japanese and the height of Latin no longer match. This… This is because the interpolation happens horizontally in Japan while it does vertically in Latin. I showed this to our layout engine developer. He said the direction of interpolation should be the same, regardless of the text orientation. Quite troublesome. Therefore I needed to control character height as well. In addition to the condensed, I added a master of shorter height. But I wanted to avoid 3-axis setup. 3-axes model requires 8 masters, and the design space becomes cubic. Not only the graphics, but also the settings necessary to make it function will also multiply by eight. That’s very hard to manage. In 2-axes setup, I can keep that to 4. And I could come up with a good solution in order to keep it 2-axes. You draw two glyphs, one’s condensed master is squashed horizontally, and the other’s is done vertically. They substitute each other using OpenType GSUB features depending on the text orientation. The merit of the alteration approach is to be able to condense glyphs in both directions without adding another axis. They can use the same interpolation values. In this image, both glyphs are width=75%. I now generated a variable font. Horizontal. As expected. Vertical setting no longer has that problem. However, Vertical setting still poses a problem. I was expecting the advance heights of the glyphs would be condensed. But it didn’t happen. The outlines got condensed, but the heights weren’t. Why…? At this point, I noticed the VVAR problem. The variable height information needs to go to the table called VVAR. But the font didn’t have the table. This was a problem with the development tool, with which I can’t make the font work in vertical text. After some time of struggle, FontTools fixed the issue and I could add the VVAR table. In the long lists of bug fixes, it wasn’t easy to look for that one particular fix. I started to have the pieces together, and wanted to try expanded designs too. I’ve made the new masters of +25% width, also using the anisotropic technique. These are the horizontal masters. And these are the vertical ones. And I generated a variable font that combines everything I’ve made so far. This is the Regular weight of the font. The texts on the white background are the normal horizontal and vertical texts. Characters shrink and expand in the text direction. And you have access to the design variations in the grey area. Glyph width and height change perpendicular to the text direction. The Latin also has vertically expanded masters. Now, Latin and the text direction. The orange and blue Latin glyphs are shared. They’re recycled. And this is the same as the background colour, how glyph widths change. But the Japanese and vertical-upright Latin glyphs are shared among the red and black groups. In a vertical-savvy variable font, each scripts behaves differently and a very complex setup is required. This is a sample of the final font including the weights. You can have this much variety from only one font. And I’ve made this sample using Illustrator. Currently, both the fonts and applications have issues, but it’s already possible to make graphics like this. So this is where I am with the project. Before I end my presentation, let me mention one issue for the future. Pay attention to the animation on the right. Did you see it? I’ll play it again. Here, the gaps are eliminated. As the letter gets thick, the stroke automatically extends before the gaps become too thin. In a linear interpolation on the left, the uncomfortably thin counter stays for a long time. Putting the level of details aside, you can achieve this by adding intermediate masters. I couldn’t do this due to another bug in the tool, but now I can. I would like to keep doing the research, including the design aspects like this. Thank you very much. Thank you.

2 Replies to “CJK Variable Font Based on Source Han Sans | Masataka Hattori | ATypI 2019 Tokyo”

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.