Image & Text
Semester 2, 2020
Modular Typeface Journal a
by Zhi Charles Teoh (899991)
First Draft When I first approached this task, my first inspiration was from the Chinese calligraphic strokes. As I have learned calligraphy from at a young age, I know that even as many of these strokes vary from character to character for the sake of aesthetics, the system of strokes can be largely characterised by something called the 永字 八法(CN: Yongzi Bafa; JP: Eiji Happou; lit. the Eight Principles of the “Yong” Character) 1. Much like how English words are constructed from letters in the alphabet, modern Chinese characters are constructed from a series of strokes of varying sizes, lengths, shapes, and so on, with the goal being to make a square-shaped character. I then sought to imagine each individual letter of the English alphabet as a logogram in itself, and with this concept in mind, I started out by imagining what kind of strokes would befit the 26 letters of the alphabet, thus resulting in letters whose shapes are largely consistent with those of other existing fonts.
The Yongzi Bafa explains how to write eight common strokes in regular script which are found all in the one character, 永(yong). It was traditionally believed that the frequent practice of these principles as a beginning calligrapher could ensure beauty in one’s writing. 1
From https://en.wikipedia.org/wiki/Eight_Principles_of_Yong
Surprisingly, as I was iterating my design, I found out that a lot of hooked endings of these strokes bear a certain resemblance to serifs that are commonly seen in fonts like Times New Roman, and I quickly worked this to my advantage and this allowed me to slim down the pool of strokes from which the typeface is derived. Ultimately, I managed to summarise all fundamental strokes for the construction of alphabetical logograms. Most of these strokes are actually in use to write Chinese characters and the Japanese Kanji. The circle is special because this stroke, in particular, is unique only to the Korean alphabet, nevertheless integrated into Korean calligraphy. I’ve documented the strokes as such, numbering them so that I may track which of these strokes are used in constructing the letters, and drawing the bounding box for each stroke on the grid which would serve as a rough guide for me to control the shape of the resultant letters.
The idea with the construction of letters from individual strokes is that the combination of strokes could be superposed onto one another, thus forming a letter with neither each individual stroke losing its structural integrity, nor with the resultant letters losing its consistency in its shape. Here you can see the bounding boxes of each individual stroke. There is also documented which individual strokes each letter is comprised of.
Upon reflection, it would seem like some of the strokes have been used only once (13, 16 and 24 for example), which undermines the consistency of the font in general. Certain letters may have also overstretched its boundaries. The letter Q, for example, stretches a tad too far to the right as if Q always appears as the last letter and never in any other place. If, for example, “qp� is written, it would result in an awkward void at the top-right corner of the Q that undermines the aesthetics. Similarly, lining a tall letter before T would result in the same void at the bottom-left corner of T as well.
Second Draft The one feature of this font that captured my attention was how striking the circles seemed to be, and how they stand out amongst other strokes. I realised that of all the letters in the alphabet, the individual line strokes seemed typical while the circles seem to be the anomaly of the group. This gave me another flash of inspiration for a new typeface that focuses entirely on circles and lines only, and done mostly on computer.
Iterations of the new font
One of the problems upon switching to this new typeface was that it was barely recognisable.2 Strung together, a normal reader would require at least ten seconds to decipher what is being written .
2
Feedback taken from my presenting the typeface to my friends
After some more iteration, I finally arrived at one which I found satisfactory. Using a typeface designing app called Birdfont, I quickly transferred this iteration into a True Typeface (TTF) file that can be used as a typing font.
One interesting iteration I have come up with is one where the circles within the typeface are divided into quadrants and shaded differently from letter to letter. The most immediate result is that identifier lines that complement the circles are rendered redundant (take “x” for example). The demarcations between the solid and the void within the circle also serves as an identifier line itself, serving its purpose in letters like “k”, “s”, “z”, among others. However, given that it’s impossible to do advanced shading that this iteration requires, this is not moved to Birdfont and thus shelved.
After some more iterations and I have from them developed some rules for this font: • All characters should have a circle and complementing identifier lines that make the characters recognisable. • Each letter and number should only have a single circle of the same size (except the number 8 which consists of two circles). • All capital letters should have the circle at 2px stroke width and complementing lines at 3px stroke width. They should also take up a maximum width of 1.5x the circle’s diameter. • Circles positioned within capital letters either take up a prescribed Top, Middle or Bottom position. Capital letters are aligned by the baseline of their bounding boxes. • All small letters should have the circle at 1px stroke width and complementing lines at 3px stroke width. They should also take up a maximum width equivalent to the circle’s diameter. • Circles positioned within small letters either take up the prescribed Top or Bottom position. Small letters are aligned by their constituent circles instead of their bounding boxes.
FABULOUS
summer thoughts
Final Design: The Circular Linear Font
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 !@#$%&*().,?”/:;+=
Final Design: The Circular Linear Font The quick brown fox jumps over the lazy dog. It’s a braw bricht moonlicht nichttae-nicht. She sells seashells on the seashore. BLACK LIVES MATTER 14+58=72