Collaborative research report with Kyushu University vol.2- About fonts for ultra-small screen devices-

Following the first “Universal Design (Universal Design) font evaluation research”, Fontworks will conduct the second research with Kyushu University and “Universal Design based on device display characteristics”. "Research on font design" as a joint research. Within the collaborative research, we conducted an experiment on the optimal fonts for ultra-small screen devices such as wearables in the IoT as part of collaborative research with the Content Creative Design Department and Design Human Science Department of Kyushu University Faculty of Design.

What are beautiful and easy-to-read fonts for IoT devices?

According to the Ministry of Internal Affairs and Communications, the number of IoT devices in the world will increase from approximately 20 billion in 2015 to 40.3 billion in 2020 due to the rapid spread of IoT devices. I will. Among them, “automobiles and transportation equipment” are expected to progress in IoT due to the spread of connected cars, “medical care” where the market of digital healthcare is expanding, and “industrial applications (factory, infrastructure) where smart factories and smart cities are expanding. , Logistics)” and other high growth. In addition, with regard to the miniaturization and power saving of IoT devices, which are increasing as a factor of rapid spread, it is expected that the size will be further reduced with the development of technology.
Development of beautiful and easy-to-read fonts for IoT devices is an important issue. Especially in the field of digital healthcare, even in wearable devices such as smart watches, we have received many Contact Us about optimal fonts that are legible in a limited space and that are readable and beautiful. "Type-D UD Kakugo_Small-M" is a font that was born in an experiment in a joint research with Kyushu University to solve these problems.

About the experiment

Experiment outline

Researcher Content Creative Design Department
Hisahiro Ihara Professor
Assistant Professor Kiriko Fuji
Yang Ning Academic Researcher

Design Human Science Division
Shoji Sunaga Associate Professor
Research name Study on Universal Design font design based on device display characteristics
research summary Subjective evaluation experiments of fonts and font morphological attributes are measured, and the obtained data is analyzed and compared to perform comprehensive analysis from both psychological and physical aspects.
Experiment flow In this experiment, the experimental fonts for this experiment were selected in three preliminary experiments. Regarding the method of selecting the font to be used as the starting point, based on the results of the joint research "Research on Universal Design font evaluation" conducted by Fontworks with Kyushu University, high readability has already been verified. (Universal Design) Uses a square Gothic font, and chooses a large type with a larger character. UD Kakugo_Large is selected as the starting font. Universal Design fonts from other companies are also selected for comparison.

Fontworks fonts for comparison in this experiment

  • UD Kakugo_Large R
  • UD Kakugo_Small Go_Small-RM

UD Kakugo_Small R and UD Kakugo_Small M intermediate Weight font

  • Tsukushi Gothic D
  • New Cezanne M
  • Tsukushi A MaruGothic MD

Tsukushi A MaruGothic-M and Tsukushi A MaruGothic middle of -D Weight

  • UD Marugo_Small MD

UD Marugo_Small-M and UD Marugo_Small middle of -D Weight

  • Universal Design corner go _SS-RM

UD Kakugo_Small reduced 94-96% font

  • UD Kakugo_Small M

* The underlined font is an improvement of the existing font based on the results of the preliminary experiment when conducting this experiment.

Preliminary experiment

The preliminary experiment was conducted to select the font for this experiment, starting from "UD Kakugo_Large", which was found to have excellent readability in the previous study on Universal Design fonts with Kyushu University. We conducted three preliminary experiments with the following font combinations.


Experiment environment

Experimental device Computer-controlled iPad mini 4
Observation distance 30 cm (parallel to eyes)
Observation condition Darkroom
Background color and text color Black (<0.35 cd / m²) / White (<185 cd / m²)
Heading 2 lines of short texts with mixed character types, 16pt size according to program settings
Text (Large) 7-line continuous sentence of mixed character types, size of 14pt on program setting
Text (small) 7-line continuous sentence of mixed character types, size of 11pt on program setting

experimental method

Presentation method Presenting a pair of strings
Evaluation methods Paired comparison method (comparing two samples to determine the outcome)
Subject task Answer which is “easy to read” for the presented string pair

[1] Fontworks Universal Design fonts + other companies' Universal Design fonts (fonts with good readability test results)

  1. 1 UD Kakugo_Large R
  2. 2 Other company's Universal Design font A (readability first place)
  3. 3 Other company's Universal Design font B (readability second place)
  4. 4 Other company's UD font E (1st readability)

Experimented again, including condensed typefaces, so that more characters could be displayed on a very small screen.

[2] font Works Co., Ltd. Universal Design font + other companies Universal Design Font (good font of the results of readability experiment) + Condensed font (font Works and any other company)

  1. 1 UD Kakugo_Large R
  2. 2 Other company's Universal Design font A (readability first place)
  3. 3 Other company's Universal Design font B (readability second place)
  4. Four Universal Design Kakugo _ Condensation 80-R / Universal Design font A of other companies A Condensation 90

Condensed typeface did not give good results and was excluded from the candidates. In addition, it is known that the subjects are affected by the morphological attributes such as the size and density (blackness) of the character face when evaluating readability, and the smaller the character face, the higher the density (blackness) and the higher the evaluation. I guess that it will be higher, initially it was an experiment with a large type of large character, but I added small fonts such as "UD Kakugo_Small" and "Tsukushi Gothic" and experimented again ..

[3] Fontworks Universal Design font + Fontworks other font (including round Gothic font)

  1. 1 UD Kakugo_Large R
  2. 2 UD Kakugo_Small RM *1
  3. 3 Tsukushi Gothic D
  4. 4 New Cezanne-M
  5. 5 Chikushi A Maru Gothic-MD * 2
  6. 6 UD Marugo_Small MD *3

1 ※ UD Kakugo_Small-R and UD Kakugo_Small middle of -M Weight of the font
*2 Font with a middle Weight between Tsukushi A MaruGothic M and Tsukushi A MaruGothic D
*3 UD Kakugo_Small M and UD Kakugo_Small D fonts with intermediate Weight
*The image is an image, not the one used in the actual experiment.


Experiment screen

* The image is not the one used in the actual experiment, but an image
* The image is not the one used in the actual experiment, but an image
* The image is not the one used in the actual experiment, but an image

Experimental result

As a result of three preliminary experiments, subjects tended to evaluate from several morphological attributes (Note *2) such as the size and density (blackness) of the character surface, with respect to the conditions for displaying characters on a very small screen device. I was seen. Therefore, we introduced "UD Kakugo_Small", which has a smaller character surface and stronger density (blackness) than the starting point, "UD Kakugo_Large". In an interview with the subject, a font with a 90% sizing rate is more readable than a font with a 80% sizing rate for condensed fonts. Regarding the round Gothic font, the display size of characters is so small that it cannot be clearly distinguished from the square Gothic font. Based on the above results, we limited the experimental fonts to square Gothic fonts and selected experimental fonts from Universal Design fonts made by Fontworks and Universal Design fonts of other companies.

This experiment 1-A Readability experiment [Overview]

About experiment contents and evaluation method

Experiment content

For each setting, the subject compares the samples in the two typefaces to determine "readability." Samples were brute force to perform a relative evaluation in each typeface setting. At the same time, we conducted an experiment on the effect of background color by dividing the subjects into two groups of 20 persons each. Specifically, one group was presented with samples in the order of black background to white background, and the other group was presented with samples in the order of white background to black background.


Experiment environment

Experimental device Computer-controlled iPad mini 4
Observation distance 30 cm (parallel to eyes)
Observation condition Darkroom
subject Some people (40 people)
Background color and text color Black (<0.35 cd / m²) / White (<185 cd / m²)
Heading Two lines of short texts of mixed character types, 21pt in size set by the program
Text (Large) 7-line continuous sentence of mixed character types, size of 18pt according to program setting
Text (small) 8-line continuous sentence of mixed character types, size of 16pt on program setting

experimental method

Presentation method Presenting a pair of strings
Evaluation methods Paired comparison method (comparing two samples to determine the outcome)
Subject task Answer which is “easy to read” for the presented string pair

Experimental font (7 typefaces)

  • Tsukushi Gothic D
  • UD Kakugo_Small Go_Small-RM
  • Universal Design corner go _SS-RM
  • Other company's Universal Design font A
  • Competitor Universal Design font B
  • Other company's Universal Design font C
  • Competitor font D

Experiment screen

* The image is an image, not the one used in the actual experiment.
* The image is an image, not the one used in the actual experiment.
* The image is an image, not the one used in the actual experiment.

This experiment 1-A Readability experiment [Result]

[1] 2 lines short sentence: Heading

Black background

Ranking font
1 Other company's Universal Design font A
2 Other company's Universal Design font C
3 UD Kakugo_Small Go_Small-RM
4 Competitor Universal Design font B
5 Universal Design corner go _SS-RM
6 Competitor font D
7 Tsukushi Gothic D

White background

Ranking font
1 Other company's Universal Design font A
2 Other company's Universal Design font C
3 Tsukushi Gothic D
4 UD Kakugo_Small Go_Small-RM
5 Universal Design corner go _SS-RM
6 Competitor font D
7 Competitor Universal Design font B

[2] 7-line continuous sentence: Text (large)

Black background

Ranking font
1 Other company's Universal Design font A
2 Universal Design corner go _SS-RM
3 Other company's Universal Design font C
4 UD Kakugo_Small Go_Small-RM
5 Competitor font D
6 Competitor Universal Design font B
7 Tsukushi Gothic D

White background

Ranking font
1 Other company's Universal Design font A
2 Other company's Universal Design font C
3 UD Kakugo_Small Go_Small-RM
4 Universal Design corner go _SS-RM
5 Competitor Universal Design font B
6 Competitor font D
7 Tsukushi Gothic D

[3] 8-line continuous sentence: Text (small)

Black background

Ranking font
1 Other company's Universal Design font A
2 Other company's Universal Design font C
3 UD Kakugo_Small Go_Small-RM
4 Competitor Universal Design font B
5 Universal Design corner go _SS-RM
6 Competitor font D
7 Tsukushi Gothic D

White background

Ranking font
1 Other company's Universal Design font A
2 Other company's Universal Design font C
3 UD Kakugo_Small Go_Small-RM
4 Competitor Universal Design font B
5 Universal Design corner go _SS-RM
6 Competitor font D
7 Tsukushi Gothic D

* Regarding background color: A significant correlation was observed in the order in which the black background and white background were presented. However, no significant correlation was found in the difference in background color between the black background and the white background.
* Significant differences in typefaces: The above table shows the typefaces divided into two groups (groups with significant differences in gray background), depending on whether there is a significant difference from the type-1 font. The numbers at the beginning of the typeface indicate the ranking.


We calculated the winning rate for each font and performed a significant difference test (*) based on this. The results are shown in the table below.

Our font that was not significantly different from the 1st place

Heading / black background UD Kakugo_Small Go_Small-RM
Heading / white background Tsukushi Gothic D, UD Kakugo_Small Go_Small-RM
Text (Large) / Black background Tsukushi Gothic D, UD Kakugo_Small Go_Small-RM, Universal Design corner go _SS-RM
Text (Large) / White background UD Kakugo_Small Go_Small-RM, Universal Design corner go _SS-RM
Text (small) / black background UD Kakugo_Small Go_Small-RM, Universal Design corner go _SS-RM
Text (small) / black background UD Kakugo_Small Go_Small-RM, Universal Design corner go _SS-RM

* Based on the average value, using the statistical software R, Wilcoxon rank sum test and multiple comparison by adjusted p-value of Holm method were performed.

Experimental result

UD Kakugo_Small was found to be not significantly different from 1st place in all cases. However, in the research, it was found from the results of analysis and comparison of the data obtained from the measurement of font morphological attributes that the character area (Note *2) and density (blackness) influence the experimental results. From this, we speculated that there may be more optimal fonts for the ultra-small screen device, and decided to conduct a new experiment. In addition, there was an impression that the character width of European characters was smaller than that of higher-level fonts, so adjustments were made to change the character width of European characters.

Main experiment 1-B Discriminant experiment

About experiment contents and evaluation method

Experiment content

For each setting, subjects are presented with similar letter pairs. After that, four character pairs will be displayed, from which you can select the first presented character pair. As a result, evaluation is performed in each typeface setting. At the same time, we will conduct an experiment on the influence of the background color by dividing the subjects into two groups of 20 persons each.


Experiment environment

Experimental device Computer-controlled iPad mini 4
Observation distance 30 cm (parallel to eyes)
Observation condition Darkroom
subject Some people (40 people)
Background color and text color Black (<0.35 cd / m²) / White (<185 cd / m²)

experimental method

Presentation method First, a pair of characters that are likely to be confused are presented to the left and right at the fixation point (presentation time :: 16.7 msec to 2.13 sec). Next, a mask is put on (presentation time: 200 msec). Finally, four pairs of letter choices are presented.
Evaluation methods Four-way selection method
Subject task Similar character pairs are presented at various presentation times. Forcibly select the same pair of characters from the four pairs of characters.

Character pair

A total of 20 pairs are available for 3 character types, katakana, hiragana, and alphanumeric.

Katakana Sun, cheetah, son, mar, co, youth, sheet, wow
Hiragana U-ra-re-wa-sa-ki-bo-ho-me-nu-po-ho
Alphanumeric 3-8, 1- (l lowercase L), 6-8, gq, 5-S, OQ, co

Experimental font (6 typefaces)

  • Tsukushi Gothic D
  • Competitor Universal Design font B
  • UD Kakugo_Small Go_Small-RM
  • Other company's Universal Design font C
  • Other company's Universal Design font A
  • Competitor font D

Experiment screen


Experimental result

Regarding the fonts used in the experiments, we could not confirm the problematic discriminativeness.

Main experiment 2 Readability experiment [Outline]

From Experiment 1, although "UD Kakugo_Small-RM" gave good results, the subjects tended to select the one with smaller characters and strong blackness when evaluating [readability]. I guessed that "UD Kakugo_Small-M", which has a stronger blackness and a thicker weight, would further improve readability. In addition, UD Kakugo_Small had the impression that the alphanumeric character width was narrowed when compared with the fonts that were ranked higher in this experiment 1 etc., so adjustments were made to expand the alphanumeric character width. .. The font was changed to "UD Kakugo_Small-M Kai" and an experiment was conducted in addition to the experimental font in Experiment 2.

About experiment contents and evaluation method

Experiment content

For each setting, the subject compares the samples in the two typefaces to determine "readability." Samples were brute force to perform a relative evaluation in each typeface setting. At the same time, we conducted an experiment on the effect of background color by dividing the subjects into two groups of 20 persons each. Specifically, one group was presented with samples in the order of black background to white background, and the other group was presented with samples in the order of white background to black background.


Experiment environment

Experimental device Computer-controlled iPad mini 4
Observation distance 30 cm (parallel to eyes)
Observation condition Darkroom
subject Some people (40 people)
Background color and text color Black (<0.35 cd / m²) / White (<185 cd / m²)
Heading Two lines of short texts of mixed character types, 21pt in size set by the program
Text (Large) 7-line continuous sentence of mixed character types, size of 18pt according to program setting
Text (small) 8-line continuous sentence of mixed character types, size of 16pt on program setting

experimental method

Presentation method Presenting a pair of strings
Evaluation methods Paired comparison method (comparing two samples to determine the outcome)
Subject task Answer which is “easy to read” for the presented string pair

Experimental font (7 typefaces)

  • Tsukushi Gothic D
  • UD Kakugo_Small Custom

UD Kakugo_Small R and UD Kakugo_Small M intermediate Weight font

Adjusted Western character width

  • UD Kakugo_Small M Kai

UD Kakugo_Small M with adjusted Western character width

  • Universal Design Corner Go_Medium-M Kai

UD Kakugo_Small-M and UD Kakugo_Large font with a character faces area between the -M

Adjusted Western character width

  • Other company's Universal Design font Ⓐ
  • Other company's Universal Design font Ⓑ
  • Other company's Universal Design font Ⓒ
  • Competitor font Ⓓ

* The underlined font is an improvement of the existing font based on the results of the preliminary experiment when conducting this experiment.


Experiment screen

Main experiment 2 Readability experiment [Result]

[1] 2 lines short sentence: Heading

Black background

Ranking font
1 Universal Design Corner Go_Medium-M Kai
2 Other company's Universal Design font A
3 UD Kakugo_Small Custom
4 UD Kakugo_Small M Kai
5 Other company's Universal Design font C
6 Competitor Universal Design font B
7 Tsukushi Gothic D

White background

Ranking font
1 Universal Design Corner Go_Medium-M Kai
2 UD Kakugo_Small M Kai
3 Other company's Universal Design font A
4 Other company's Universal Design font C
5 UD Kakugo_Small Custom
6 Tsukushi Gothic D
7 Competitor Universal Design font B

[2] 7-line continuous sentence: Text (large)

Black background

Ranking font
1 UD Kakugo_Small M Kai
2 Universal Design Corner Go_Medium-M Kai
3 UD Kakugo_Small Custom
4 Other company's Universal Design font C
5 Competitor Universal Design font B
6 Other company's Universal Design font A
7 Tsukushi Gothic D

White background

Ranking font
1 UD Kakugo_Small M Kai
2 Universal Design Corner Go_Medium-M Kai
3 Other company's Universal Design font A
4 Other company's Universal Design font C
5 UD Kakugo_Small Custom
6 Tsukushi Gothic D
7 Competitor Universal Design font B

[3] 8-line continuous sentence: Text (small)

Black background

Ranking font
1 UD Kakugo_Small M Kai
2 Universal Design Corner Go_Medium-M Kai
3 Other company's Universal Design font C
4 Other company's Universal Design font A
5 Competitor Universal Design font B
6 UD Kakugo_Small Custom
7 Tsukushi Gothic D

White background

Ranking font
1 UD Kakugo_Small M Kai
2 Universal Design Corner Go_Medium-M Kai
3 Other company's Universal Design font C
4 Other company's Universal Design font A
5 UD Kakugo_Small Custom
6 Competitor Universal Design font B
7 Tsukushi Gothic D

* Regarding background color: We concluded that there is no difference in the results in the order in which the black background and white background are presented. However, I decided to treat the black background and the white background as different results.
* Significant differences in typefaces: The above table shows the typefaces divided into two groups depending on whether there is a significant difference from the type-1 font. The numbers at the beginning of the typeface indicate the ranking.


We calculated the winning rate for each font and performed a significant difference test based on this. The results are shown in the table below.

Our font that was not significantly different from the 1st place

Heading / black background UD Kadogo_Medium-M Kai (1st place) , All remaining fonts
Heading / white background UD Kadogo_Medium-M Kai (1st place) , UD Kadogo_Small-M Kai (2nd place)
Text (Large) / Black background UD Kadogo_Small-M Kai (1st place) , All remaining fonts
Text (Large) / White background UD Kadogo_Small-M Kai (1st place) , All remaining fonts
Text (small) / black background UD Kadogo_Small-M Kai (1st place), Except Tsukushi Gothic D
Text (small) / white background UD Kadogo_Small-M Kai (1st place), Except Tsukushi Gothic D

Experimental result

UD Kakugo_Small-M Kai, Universal Design Kakugo_Medium-M Kai were proved to be not significantly different from the 1st place in all cases. However, UD Kakugo_Small-M Kai, which occupies almost 1st place, is the more readable font.

Remarks

* 2 Analysis and comparison of experimental results and morphological attributes

[1] Measurement of morphological attributes

In the research, the morphological attributes are measured for each font. Here are two examples.

Density (blackness)
The area of the black part of the character. For example, the minus sign (-) is a rectangle, so it is calculated as height x width.
The study will use the average of kana, kanji, and alphanumeric characters.

Character area
The area of the minimum bounding rectangle of the character.
The study will use the average of kana, kanji, and alphanumeric characters.


[2] Comparison with experimental results

By comparing the order obtained in the experiment and the value of the morphological attribute, I think that the morphological attribute may have an influence on the experimental result when they line up in the same way. The figure below is a correlation diagram on the white background of the Text (large). The fonts are arranged from the left in order of high readability, and the density is shown as a line graph. Since the line graph shows a downward sloping tendency, we assume that the font with higher density will be more readable.

Click here for evidence on fonts for ultra-small screen devices