New?Type?Typograpy?

Research, Experiment
Individual project
2026


From Letter to Pattern: Testing the Conditions of LegibilityQ. How is legibility formed between graphic form and the act of reading?Web-tool
1. LegibilityAbout legibility
Legibility is often understood as the ease with which letters or words can be recognized. This experiment, however, treats legibility not as a fixed quality of a letter, but as a changing condition produced between graphic form, linguistic context, and the act of reading. By expanding the surface of letters through ornament, grid shifts, rotation, compression, and motion, the project observes when a letter remains readable, when it begins to function as a pattern, and how this threshold changes at the scale of a word or sentence.

Since the transition into the digital era, letters have been composed through elements such as structure, form, proportion, thickness, serif, and ornament. Within these characteristics, letters can be structurally expanded through the height of the x-height or the length of ascenders and descenders, and they can also be categorized by period or character, such as geometric, mono, cartoon, or old school. They can also be distinguished by serif characteristics that change depending on the tool, or by ornamental qualities borrowed from architectural elements. If these elements are compared to the stages that make up a living body, structure can be seen as the bones, form as the species, proportion and thickness as the relationships between the parts of the body, serif as style, and ornament as surface. In this experiment, I look at the legibility of letters and its expandability through surface, which is responsible for the external appearance of the letter.
Figure 1 : Letter structures





2. Expanding Letterforms through Ornament

Measuring Legibility
When the outer surface of a letter is expanded ornamentally, how can its legibility be measured? The first experiment was conducted using brush patterns in Illustrator. In this process, two values that could affect legibility were measured.

To observe this threshold, I used visual comparison methods such as SSIM(Structure smilarity index) and MCF(Morphological components function). These measurements do not define legibility in a human sense, but provide a comparative way to trace changes in visual similarity, structural retention, and form complexity. Through these measurements, the experiment asks how far a letter can be visually transformed while still remaining available to reading.


Figure 1-1 : Text

Stroke : 0
SSIM : 1
MCF : 100
Figure 1-2 : Text

Stroke : 0.5
SSIM : 0.92
MCF : 1360
Figure 1-3 : Text

Stroke : 1
SSIM : 0.87
MCF : 777
Figure 1-4 : Text

Stroke : 2
SSIM : 0.81
MCF : 298

This experiment was conducted based on gradual stroke values from 0 to 2. When SSIM was measured based on Figure 1, the results were 0.92, 0.87, and 0.81 in order. This suggests that, by adding a diamond pattern to the stroke, parts of the pattern continued to overlap with the original line, which may explain why Figure 4 still showed a relatively high value of 0.81.

The second measurement is particularly interesting. Since MCF measures the complexity of a letter, Figure 4 may appear more complex to the viewer’s eye. However, the actual measured value was highest in Figure 2. This may be because, although the forms follow the shape of the letter, the elements that make up the letter were analyzed only in terms of their visual form.
Figure 2-1 : Text

Stroke : 0
SSIM : 1
MCF : 100

Figure 2-2 : Text

Stroke : 0.5
SSIM : 0.81
MCF : 246
Figure 2-3 : Text

Stroke : 1
SSIM : 0.79
MCF : 225
Figure 2-4 : Text

Stroke : 2
SSIM : 0.73
MCF : 182
Figure 2-5 : Graph of SSIM


The second experiment showed higher SSIM values and lower MCF values than the previous experiment. The MCF values were lower because a gradient effect was used. Overall, the SSIM experiment seemed to be more closely related to legibility. Even when the visual complexity of a letter increases, it can still be read if its basic form is maintained through ornamental elements. On the other hand, as the similarity to the original letter decreases, the level at which the letter can be recognized also becomes lower.













3. Experiment
a. Start point
This work explores how the boundary between reading and seeing letters is formed. I considered that this boundary does not exist only in the shape of the letter itself, but also emerges within the systems and rules that organize letters. In typography, the grid usually exists outside the letter and works as an external structure that aligns and controls the form. This work moves that external system into the inside of the letter. Once the grid enters the letter, it is no longer just a tool for adjustment, but becomes a rule that disrupts and reconstructs the internal structure of the letter. As a result, the letter does not remain as a stable character, but appears as a variable state that moves between being read and being seen. I control this change through parameters and experiment with the threshold conditions where letters shift into patterns, and reading shifts into seeing.

a-1. Small Experiment 1
This experiment was an analog approach for the main experiment. I prepared two A4-size prints with the letter A on them, and combined the letters by arranging each one in different patterns, as shown in Figures 3-1 to 3-4. In Figure 3-1, the letters were placed horizontally in parallel at the same position, while in Figure 3-2, the arrangement from Figure 3-1 was rearranged vertically in parallel. Figure 3-3 shows a more extreme vertical arrangement, and Figure 3-4 shows a more extreme horizontal arrangement.

Through this experiment, I explored the possibility of a hypothesis in which the grid becomes a condition that disrupts and reconstructs the structure of the letter.. 

Figure 3-1 : Experiment 1
Figure 3-2 : Experiment 1
Figure 3-3 : Experiment 1
Figure 3-4 : Experiment 1
a-2. Small Experiment a-2
The second experiment was also an analog approach. While the previous experiment arranged two letter As only through x and y coordinates from a flat perspective, the second experiment added a z-value, allowing the letters to overlap within the grid. Through this overlap, the letter was no longer seen as a single flat form, but as a structure made through layered positions. This experiment explored how the addition of depth can change the way a letter is organized and perceived within a grid.

Figure 3-5 : Experiment 2



b. Web-Based Grid System
This work is created as a web-based experiment using JavaScript. The reason I did not use the Illustrator method from the previous experiments is that this work requires a process of adjusting and checking the result immediately in real time through control bars. The screen is composed of a square grid with 31 columns and 21 rows, making a total of 651 cells. Each cell is 80px wide and 80px high, and the gap between the cells is also set to 80px. As a result, the whole screen is aligned according to a regular 80px grid. The grid is placed based on the center of the screen, and expands left, right, up, and down from the central cell as its reference point.

What is important in this work is that the position of the cell and the position of the letter image are not the same. The grid cells themselves are arranged on fixed coordinates, but the letter fragments inside each cell move slightly through separate offset values. For example, part of the reference letter A is first placed in the central cell, and in the cell to its right, the same image is not simply continued in the same position, but is placed with a 40px shift, which is half the size of the cell. This method is repeated cell by cell, allowing the letter fragments to accumulate from the center without being perfectly aligned to the original cell boundaries.

Figure 4 : Size


b-1. Seven parameters
To experiment with the different layers between letters and graphics, I set up a total of seven parameters.
    1. Size
    2. Grid Shift X
    3. Grid Shift Y
    4. Squeeze
    5. Rotation
    6. Random Motion
    7. Speed
Figure 4-1 : Grid Shift X
Figure 4-2 : Grid Shift Y 
Figure 4-3 : Squeeze
Figure 4-4 : Rotation


Figure 4-5 : Random Motion
Figure 4-6 : Speed


b-2. Measuring the Shift from Letter to Pattern
In this experiment, I changed the threshold values set earlier in different ways and measured three aspects: Recognition, Structural Retention, and Pattern Emergence. Recognition measures whether the image can still be read as a word, while Structural Retention looks at how much of the original letterform structure remains. Pattern Emergence evaluates the degree to which the letter begins to function as a repeated visual pattern rather than as a readable sign. By using these three indicators together, it becomes possible to observe the transition from letter to pattern, and from reading to seeing, in a more layered way. Figure 5-1 was used as the reference image, and Figures 5-2 to 5-9 were created by combining different parameters.

The measuring method using Recognition, Structural Retention, and Pattern Emergence was particularly interesting. When each value is viewed separately, the relationship between them may seem weak. One example is Fragmentation, which measures how strongly the image is perceived as a pattern. This value does not judge the letter simply through legibility, but focuses on fragmented visual elements. However, when this value is considered together with the other values, a more meaningful reading becomes possible. For example, Figure 5-6 feels more difficult to read than Figure 5-3, and its Similarity, Outline, Skeleton, and Fragmentation values were also lower. Another noticeable point is that the Skeleton value, which measures the structure of the letter, was extremely low in Figures 5-4 to 5-8. This suggests that the skeleton may not be fully suitable for this experiment, where the letter expands into a pattern-like form. Even a small visual change can easily break the skeleton structure.



Figure 5-1 : Red

Recognition:  Red
Similarity: 100%

Outline : 100%
Skeleton : 100%

Fragmentation : 0.29

Figure 5-2 : Red

Recognition:  mize
Similarity: 11%

Outline : 27%
Skeleton : 11%

Fragmentation : 0.33

Figure 5-3 : Red

Recognition:  PRR Cees>CC
Similarity: 9.35%

Outline : 17%
Skeleton : 11%

Fragmentation : 0.45
Figure 5-4 : Red

Recognition:  -
Similarity: 0%

Outline : 15%
Skeleton : 0.6%

Fragmentation : 0.91
Figure 5-5 : Red

Recognition:  -
Similarity: 0%

Outline : 14%
Skeleton : 0.5%

Fragmentation : 0.87
Figure 5-6 : Red

Recognition:  -
Similarity: 0%

Outline : 3%
Skeleton : 0.5%

Fragmentation : 0.98

Figure 5-7 : Red

Recognition:  -
Similarity: 0%

Outline : 15%
Skeleton : 1.2%

Fragmentation : 0.88
Figure 5-8 : Red

Recognition:  oonllis3=3
Similarity: 12%

Outline : 13%
Skeleton : 0.8%

Fragmentation : 0.97
Figure 5-9 : Red


b-3. Expansion to sentence
Figures 6-1 to 6-4 show the result of expanding the scope of the experiment from words to sentences. In each experiment, different parameter values were applied to observe how letters shift into images within a sentence. If the image-making of words mainly concerns how readable each individual letter remains, the sentence level changes this condition. In a sentence, letters no longer exist independently. They connect one word to another, form relationships between the meaning of previous and following words, and operate within the overall flow of reading. Therefore, the image-making of letters within a sentence is not simply a question of whether a single character can still be read, but an experiment that reveals how far the connections, rhythm, and flow of meaning inside the sentence can be maintained or disrupted. Through this, the image-making of letters can be understood not only as a change in individual form, but also as something that can be reconsidered within a more social and relational field of language.

Figure 6-1 : Sentence
(Using Grid shift X, Y, Squeze)
Figure 6-2 : Sentence
(Using Grid shift X, Y, Rotation)
Figure 6-3 : Sentence
(Using Grid shift X, Y, Random Mosion)
Figure 6-4 : Sentence
(Using Grid shift X, Y)







4.Transition
Letter > Pattern / Linguistic Function > Graphic Presence
The transitions observed in these experiments show how, as the internal structure of the letter becomes distorted, the letter gradually moves from a readable character into a patterned visual form. Its linguistic function becomes weaker, while its graphic presence becomes stronger. In other words, the first transition I observed in this experiment was the shift from letter to pattern. As the grid was moved into the inside of the letter and the parameters were adjusted, the letter no longer remained as a stable character form, but appeared as a repetitive and fragmented visual structure. In this process, its linguistic function weakened, while its graphic presence and pattern-like quality became stronger.

The second transition I observed was the change in which legibility became a condition rather than an essence. At first, legibility seemed to be an inherent quality of the letter itself. However, as the experiment progressed, it became clear that legibility changes depending on structural rules, parameter values, and surrounding context. Therefore, legibility could be understood not as a fixed property, but as a state formed through different conditions.

The third transition I considered important was the shift from individual characters to relational reading. As the experiment expanded into sentences, letters no longer functioned only as independent units. They were read together through the flow of meaning between previous and following words, as well as through contextual expectation. In this way, reading appeared not simply as the recognition of individual letters, but as a process formed relationally.




5. PosibilityThis experiment does not aim to define legibility as a universal standard. Rather, it observes how readability becomes unstable and is reconstructed through visual conditions. At the scale of the letter, I examined how long a form can continue to function as a character before it is perceived as a pattern. At the scale of the sentence, I observed how reading can be maintained or disrupted through context, sequence, and the flow of meaning. Through this process, legibility appears not as a fixed property inherent in the letter, but as a condition formed through structure, pattern, context, and relational reading.