Site icon +

Readi: A ‘Font’ To Teach Children To Write

Dr. Julia was working on a research project, which was funded by the Ministry of Higher Education (Fundamental Research Grant Scheme). Her research project involved teaching children with dyslexia and pandemic-induced learning loss how to read in English using multi-sensory learning approaches.

Interestingly, Dr. Julia developed “a set of fonts” for her project. After I read this sentence, I paused. You see, I had never come across an individual, from a non-design background, who wanted to create a font for their project. Most people are generally convinced by designers not to embark on such a path. Also, most people would merrily download (poor quality) fonts from the great expanse of the internet.

For most people, fonts and typefaces are simply ‘things’ that are free and preinstalled on a computer.

Dr. Julia on the other hand had the wherewithal and awareness to recognize that this is something that she needed to create specifically for her project and not something to compromise on.

Recently the JPJ or Jabatan Pengangkutan Jalan Raya (Road Transport Department) declared that all electric cars will mandatorily use a JPJePlate—a good step in the direction of standardising number plates in Malaysia. However, instead of developing their own font (such as Lembaga Lebuhraya Malaysia or Highway Transport Authority), the JPJ was quite content to adopt an archaic German font called FE-Schrift or Fälschungserschwerende Schrift (‘forgery-impeding typeface’) designed in 1978 instead of local options, like the one I myself designed called JPJ 1. The FE-Schrift option came with the manufacturing technology bought lock stock and barrel from Tonnjes via Handal Ceria in Cyberjaya who uses it to manufacture the JPJePlate. It is not that we lack the talent or the manufacturing technology, it is just easier to buy and thus continue to empower western creativity over our own. This is the prevailing mentality, and that is why Dr. Julia’s decision above was surprising as it went against the prevailing trend.

Figure 1. Some of the issues highlighted in the font, then called, Readie version 13.

Now the postgraduate student probably did not realise the complexity involved in creating a font and to be fair, neither did Dr. Julia at the time. For a font to work seamlessly, it takes a team of people with different capabilities. One of the individuals would be a font engineer, a person with some programming background to resolve the kinks in the codes to see how the font behaves on different software or operating systems. The crafting of an optimal working font requires experience that for a novice can be hard to find. Despite this, it is laudable that the postgraduate student was able to produce a font even though there were issues. It would have been a steep learning curve.

Even I am only able to design an optimally working font but to ensure seamlessness requires individuals with different specialities to collaborate in the making of a font or typeface. This can get expensive and is often the straw that breaks the camel’s back.

So, after receiving Dr. Julia’s email, I responded that I would be willing to help with the problem. However, after looking at the existing letterforms, I felt it would be easier to develop the ‘font’ from the ground-up again.

The objective in the creation of the font according to Dr. Julia was to create a font to teach children how “to write in the most natural manner possible…”. Essentially the letters of the ‘font’ would function as a demonstration on paper and a child would practice writing the letter in the same way.

One important consideration was to reduce the level of complexity in the letter forms and one way of doing so was to reduce the number of strokes in the letter (figure 2). To this end Dr. Julia provided a sample of her graduate assistant Elisa Fay’s handwriting which emulates the stroke simplicity mentioned. She also provided a slew of other material some related to diacritics and others handwriting practice templates to showcase sample use of the font.

Figure 2. (Left) Elisa Fay’s handwriting sample. (Right) Stroke simplification in the uppercase letter Y.

So, in a sense some of the considerations usually taken into font design may have to be reconsidered as that would add complexity in teaching and learning instruction. While this was the case most of the time, there were instances during the design process where such compromises would result in unusual letter spacing (figure 3). So, in cases like these Dr. Julia had to adhere to the norms in font design practice; in the case of the letter f, the blunting of the finial (upper curve) to avoid it creating large inter letter spaces.

Figure 3. (left) Lowercase f with a shortened finial as per font design convention vs (right) lowercase f with full finial as per teaching instruction. Notice the counter space for the right, highlighted in yellow, is larger. This does cause awkward inter-letter spacing in words/sentences.

Throughout the process, there was a lot of back and forth, long explanations, and detailed checks on the side of Dr. Julia and her graduate assistant Elisa. All would eventually result in a very readable font — even though its intended use was not as a font but rather as a sample that appears in workbooks/sheets on how to write.

For my part, I needed to determine the stylistic direction of the font, and based on the previous designer’s attempt, I suspected that the design needed to mimic some level of naturalness while also embodying clarity in its strokes for the purpose of teaching and learning.

Ultimately, once the design direction became clear to me, the process of designing the ‘font’ began. The design was straightforward, unassuming, geometrical, and simple. Despite this, there were some challenges. More on this later.

Figure 4. Above are some stylistic options that mimicked, to a degree, natural writing. Option one (left) seemed to be the initial direction. However, as discussions progressed it became clear that while naturalness was important, straight lines still needed to be straight, and curved ones smooth, because these examples are meant to be benchmarks for children learning to write. Hence, the changes on the right-most window, between the square edge and the rounded edge, was initially chosen but the ends would later be rounded.
Figure 5. Anatomy of Latin letters. A larger x-height generally results in better readability. In the example here, the ascender and descender spaces are large. I believe Dr. Julia felt that the larger spaces would allow children more space to draw letters with ascenders or descenders.

One of the challenges I faced were with the proportions of the letterform requested. The initial option 1 design (figure 4) had shorter ascenders and descenders — spaces above and below the x-height, see figure 5. However, Dr. Julia requested that the ascender and descender spaces be enlarged. The reasoning for this was that the larger spaces would allow children more room to draw letters with ascenders or descenders.

The reason for my initial consternation was that longer ascenders and descenders tend to reduce readability because our brain recognises and reads the shapes in the middle of the letterform (x-height) and thus the bigger it is, the more readable it becomes while conversely the opposite is true. These are common and successful strategies used for many text fonts i.e. Helvetica, Univers, Times New Roman, Caslon and so on. Since the primary objective of this font was not to function as a text font but rather as a means for instruction, Dr. Julia’s request made absolute sense.

Once the stylistic direction was determined, I constructed the first basic shapes of the letterforms within the proportions agreed upon (figure 6). These were simplistic letterforms using basic lines and curves without the introduction of any contrast or nuances commonly practised in font design. I did refer to Elissa’s handwriting sample at times to understand the stroke mechanics when constructing the shapes. Dr. Julia’s comments — there were many — would necessitate some revision and some rethinking throughout the process.

Figure 6. (Left) The first iteration of the letterforms. (Right) Dr. Julia had many suggestions for improvements. Many of her comments and suggestions would prompt a rethink and redesign.
Figure 7. (Left) My explanations in red to Dr. Julia in reply to her comments in black. (Right) Dr. Julia’s reply, highlighted in green, to my replies in red. This became a familiar pattern in our back-and-forth conversation with every iteration thereafter.
Figure 8. Dr. Julia’s references for numerals and her comments in black followed by my response in red and her replies and decisions highlighted in green.

Sometimes we were unable to find a common time to meet and so we fell into a pattern on commenting in the file (figure 7 and 8). Our comments, replies, and explanations were sent via email and as a result what would usually transpire over a conversation, and then later be lost, would be documented in detail.

This pattern of communication, I believe, gave both of us time to read and re-read each other’s explanations and suggestions and thereby understand our intentions and wants better.

Conversation often tends to be hurried, as we tend to be too quick to reply. The written replies slowed the process down and made it clearer as a result.

The next challenge in the process was the vowel letters and the diacritics. It was quite difficult to find the right Unicode for these individual letterforms. It took me a significant amount of time to first identify the Unicode for the diacritics and vowels and then later to find it in the software I was using (FontLab). Some of the diacritics were in the larger Latin letter set (Greek and Cyrillic), while 3 others did not feature at all.

Unicode: Every letter has a dedicated Unicode for your keyboard to type it out and for software to recognise it. A Unicode is, “an international encoding standard for use with different languages and scripts, by which each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs”.

Figure 9. Schwa, diacritics, and other punctuation and symbols.

The upside down e (schwa), which is part of the Cyrillic character set was one of the more difficult vowels to find. Once I completed the uppercase, lowercase, numerals, diacritics, and vowels, I took it upon myself to create the punctuation and a few other character glyphs in addition to what was requested.

There were a few technical challenges with the font due to its proportions (ascender, x-height & descender). The line gap was one and the other was (as is always the case) the kerning. I spent a couple of nights redoing it from scratch and I tested it on MS Word and PowerPoint and it performed as expected. At this point the name that was used for the font was “Readie”, I pointed out to Dr. Julia that the letters “…die” at the end may not be a good choice and so we eventually settled with “Readi”. Finally, it came time to generate the first version of the font.

Figure 10. Readi version 1.

The real work on the font began at this point for Dr. Julia and Elissa. They put version 1 through an extensive battery of tests where they began to highlight a gamut of issues. One of the issues was an embarrassing rookie mistake. During the process of construction and design, I was testing out different weights for the strokes — the difference was marginal. Once I decided on the stroke weight I thought I had selected and updated all the letters. I did not. The worse part was that it was not apparent to me until it was pointed out!

Now, this is a classic example as to why designers need to step back from their designs for a short while or to get a fresh pair of eyes to look at the designs before handing it off. I was so close to it that I did not spot the difference in weight. In any case, once this was pointed out, I looked through every character to ensure the correct weight was applied.

Figure 11. (Left) Dr. Julia and Elissa highlighting the discrepancy in weight between the lowercase letter “t” and “i”. (Right) Dr. Julia and Elissa pointing out the height in the placement of the hyphen. This was tricky to sort out because of the difference in height of the uppercase and lowercase as result of the proportions agreed upon. In the end I moved it marginally down to suit the lowercase more than it did the upper case simply because it would probably be used more in lowercase than in uppercase.
Figure 12. Some of the 25 pages of feedback provided by Dr. Julia and Elissa which also featured comparisons to other known fonts in similar conditions.

Many of the issues in the 25-page feedback document were easy to resolve; height of the vertical stroke for lowercase “t”, the distance of the underline from the baseline or the weight discrepancy in some of the letters. The more difficult challenges pertain to the kerning of certain letters like capital “J” or other letters like T, X A etc. The line gap was another difficult issue, it tended to make the sentence appear smaller in comparison to other fonts — this was largely due to the proportion of the letterforms, this took a lot more time to resolve.

Figure 13. I was able to address all of Dr. Julia’s and Elissa’s 25-page feedback in 4 pages or less because many of the issues were related.
Figure 14. Readi final version.

The net result from these changes resulted in the font looking and performing a lot better than it did before. At this point, Readi was performing well. However, I would get the occasional email off and on from Dr. Julia regarding an issue here or there to resolve. One issue that continues to perplex us is how the font sometimes behaves differently in certain software i.e. the letter J would appear properly kerned in Microsoft Word, Adobe InDesign, Text Edit, Pages but not in Microsoft PowerPoint or Excel. I assume this is something only a font engineer (or someone with more experience than myself) would be able to troubleshoot and resolve.

Figure 15. An example of how the font behaves differently in different software. Here the letter J’s kerning behaves differently in PowerPoint.

In any case I am glad that I was able to work with Dr. Julia and her graduate assistant Elissa. Readi performs as well as it does today only due to their tireless checks and tests.

The following are some font presentations of Readi:


Exit mobile version