REVIEW ABOUT FONT TYPOGRAPHY ON INSTRUCTIONAL DESIGN

Transcription

1 REVIEW ABOUT FONT TYPOGRAPHY ON INSTRUCTIONAL DESIGN Mucahit CAMNALBUR Uskudar Directorate of District National Education, TURKEY Master Teacher of ICT Duygu MUTLU Istanbul University, Computer Education and Instructional Technology Department ABSTRACT: Reading text from a website is somewhat different from reading text from the hard copy. This arise a term of legibility which depends on many factors: color combinations; foreground/background contrast, font, font size, word style (bold, italicized etc.), computer pixel size, along with many others. For these reasons, researchers are studying on readability of text on digital devices. In the present study, study about readability has been investigated and given brief information about factor of legibility such as font type, font size, color balance, contrast, and luminosity. As a result of these studies, they try to make a guideline of factor effect of legibility (font size, type, color, contrast etc). Even there is not common belief and contrary result of studies, the common belief is the best readability can happen, on the high contrast foreground and background color (black text on white background), 12 size Arial font type. Keywords: Reading, typeface, type size, legibility, readability. 1. INTRODUCTION Today s world computer and electronic devices has become a daily basic. Technologies and devices like computer, internet, smart phones, GPS devices has been significant part of our life as learning activities, entertainment, communication. Even life is getting more and more digitally, text still survives as an information form. Importance of reading and understanding never change since first discover of written text. So that understanding text as a information transmission on digital world. Reading text from a website is somewhat different from reading text from the hard copy. This arise a term of legibility which depends on many factors: color combinations; foreground/background contrast, font, font size, word style (bold, italicized etc.), computer pixel size, along with many others. For these reasons, researchers are studying on readability of text on digital divices. In the present study, study about readability has been investigated and given brief information about factor of legibility such as font type, font size, color balance, contrast, and luminosity. And then presenting a review about research result and factors of legibility. In the study of Bernard et. al. (2003), Times New Roman and Arial typefaces in 10- and 12-point, dot-matrix and anti-aliased format conditions were compared for readability (accuracy, reading speed, and accuracy/reading speed), as well as perceptions of typeface legibility, sharpness, ease of reading, and general preference. In assessing readability, the 10-point anti-aliased Arial typeface was read slower than the other type conditions. They found that 14-point fonts were more legible, led to faster reading, and were preferred to the 12-point fonts. However, they also found that even though participants performed tasks more quickly with serif fonts, they still preferred sans serif fonts. Examining perceptions of typeface legibility, sharpness, and ease of reading detected significant effects for typeface, size, and format. Overall, the 12- point dot-matrix Arial typeface was preferred to the other typefaces. In the study of Erdogan (2008), legibility of web pages which are designed for instructional purposes were compared according to font types and foreground/background color combinations. Three different font styles which are sans-serif (Verdana), serif (Times New Roman) and monotype (Courier New) were used. 15 background/foreground color combinations were investigated; basic colors that are available on most browsers were selected. Three different font types were used in the study. sans serif font types are better than serif font types Also four different background/foreground color contrast combinations were chosen (dark text on dark ground, light text on light ground, light text on dark ground and dark text on light ground). According to the results, the most legible background-foreground color/font type combinations are black text on white ground with Verdana (0=3.94); white text on black ground with Verdana (0=3.88); blue text on white ground with courier (0=3.80). At the end of the study it was found that Verdana is regarded as the most legible font type and white ground/black text is the best color

2 combination for web pages. Also, there was a significant difference according to color contrast; web pages which are prepared with dark text on light ground are more legible than other combination. Hill and Scharff (1997) investigated effects of 6 foreground/background color combinations (color), 3 font types (Arial, Courier New, & Times New Roman), and 2 word styles (Italicized & Plain) on readability of websites. An ANOVA showed significant main effects for color and font, and several significant interactions. The study found that the colour effect was often mediated by other factors, such as font type. More specifically, the better performance for green on yellow was due to performance with Times New Roman font, while the performance was much worse for this colour combination when Arial font was used. In the study of Woods, Davis & Scharff (2005) that, eighty children (kindergarten through 4th grade) performed discrimination and identification tasks for tachistoscopically-presented letter pairs. Letter pairs manipulated font (Times New Roman, Arial), point size (12- and 18-point) and letter-pair discrimination difficulty (easy, medium, and hard).. Higher percent correct scores occurred for the Arial font and 18-pt size, and performance was better for discrimination than identification. In the study of Hall & Hanna (2004) that, examine the effect of web page text/background colour combination on readability, retention, aesthetics, and behavioural intention. One hundred and thirty-six participants studied two Web pages, one with educational content and one with commercial content, in one of four colour-combination conditions. Important finding is colours with greater contrast ratio generally lead to greater readability. Zufic & Kalpic (2009) reported that, there was a great difference, over 40% (from to % in comparison to the black-on-white combination), in the percent of remembered terms in individual color combinations. Yager, Aquilante & Plass (1998) compared reading speed with two fonts, Dutch (serif) and Swiss (sans serif). Text was displayed on a computer monitor, white letters on black, with the RSVP method. the high luminance, there was no difference between reading rates. There was a significant advantage for the Swiss font at the low luminance. The acuity reserve for Swiss was higher than for Dutch at the low luminance, which may account for the difference In the study of Arditi & Cho (2005) that, five percentage serif fonts were slightly more legible than sans serif, but the average inter-letter spacing increase that serifs themselves impose, predicts greater enhancement than we observed. RSVP and continuous reading speeds showed no effect of serifs. When text is small or distant, serifs may, then, produce a tiny legibility increase due to the concomitant increase in spacing. However, our data exhibited no difference in legibility between typefaces that differ only in the presence or In the study of Feelya, M., Rubina, G.S., Ekstromb, K. & Pererab, S. (2005) evaluate the effects of print size, font type and line width on reading speed. For these aim, read texts presented randomly in four sizes (10, 12, 14 and 16 points), for each of four fonts (Times New Roman, Helvetica, Tiresias PCfont and Foundry Form Sans) at a standard line width (70 characters)., Larger point sizes were read faster than smaller point sizes and one of the fonts Tiresias PC font produced faster reading speeds. However, further investigation into font types revealed that Tiresias PCfont s nominal point size was not equivalent to the three comparison fonts and, after adjustment for amount of page space used, no significant differences were found. Our results suggest that font type has little effect on reading speed, once the size of the print is taken into account. In the study of Arditi & Cho (2005) reported that, reading speeds were higher for upper- than for mixed-case text at sizes twice acuity size; at larger sizes, the upper-case advantage disappeared. Results suggest that upper-case is more legible than the other case styles, especially for visually-impaired readers, because smaller letter sizes can be used than with the other case styles, with no diminution of legibility. Font Type Many studies have examined the effects of variations in typeface characteristics on legibility and readability. The typography of presenting characters on computer screens is as critical as on the paper have a direct impact on the legibility. However there is contradictory information about which font is the best to use for computer screens, experts do not always According to previous studies, some typefaces can be more legible than others on the screen. For example, a traditional typeface such as Times New Roman is considered to be one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. However, Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very large compared to more traditional typefaces in the same point size. Hozl claims that sans

3 serif font with uniform line thickness is easier to read; but Crawford doesn t agree with this idea. On the other hand, Horton warns against serif fonts in smaller font sizes (Erdogan, 2008). Nevertheless, sans serif fonts offer better legibility for instructional web pages because these fonts are designed specifically for legibility on the computer screen. Some studies reported that sans serif fonts are more readable than serif fonts; nevertheless results are disputable. One reason is that in these studies researchers did not hold the other font characteristics constant. For example, Yager, Aquilante, and Plass (1998) reported that participants preferred a sans serif font to a serif font for readability, but the researchers had failed to control stroke width. Similarly, participants preferred a sans serif font over other measured fonts; however, the measured fonts varied in several other ways including stroke width, size and ornamentation. Also serifs are preferable at larger letter sizes, while sans serifs are better at smaller letter sizes. In effect, these studies fail to provide conclusive evidence of the influence of serifs on legibility or readability. Other components of font may prove more influential. In addition, serifs have the potential to act as visual noise, cluttering incoming visual information. This gives Arial an advantage over Times New Roman because Arial has uniform stroke width and no serifs. Also, Arial s x-height is larger than Times New Roman in the same point size giving Arial a size advantage. Font Foreground/Background Color In addition, contrast is very important in any written text. Contrast is the value difference between two areas; the value is the amount of lightness or darkness in a color. For example, black on white has a high contrast, while black on gray has a lower contrast. The direction of the contrast (dark on light, or light on dark) might also affect legibility. When light text is placed on a dark background the text may seem to glow and become blurred; this is referred to as halation, and it may make the text harder to read. Using colors with high contrast between the text and the background is a basic rule that should be followed by all websites to ensure legibility (Erdogan, 2008). Text is much easier to read when there is a high degree of contrast between the text and the background. However, experts do not always agree which background/ foreground color contrast combination is the most appropriate for web use. For example, Nielsen says, Color using with high contrast between the text and the background is a basic rule that should be followed by all websites to ensure legibility ; however, Powell suggests designers to "avoid sharp contrast between foreground and background" (Erdogan, 2008). In fact, an examination of the research that exists on this topic indicates that the relationship between text-background color combinations and readability is not as clear as it might seem, though it is generally true that a strong contrast leads to more readable text. Black on white has a high contrast, while black on gray has a lower contrast. There is much confusion when discussing contrast and color. Saturated green (little white light) on saturated red has a very low contrast, but green on red could have high contrast. For example, one can place a fully saturated green on a red that is almost pink by adding white light. Font size Reading is relevant about recognize and seeing. Bigger size letter can be seen more clearly and easily read. Results from previous studies also show point size has effect on legibility. In some study report that larger point size (18-point) was found to be more legible for kindergarteners and first graders than the smaller point size (12-point). However, after the first grade, the point sizes used in this study showed no significant influence on performance. This indicates that the two sizes used in this study were equally legible for grades two through four, which supports the use of fonts as small as 12-points beginning at approximately the second grade. On the other hand, x-height (letter height), is the specific height of the lower case letters of a font. Letter height is different from point size, as letter height can vary between fonts of the same point size. For example, the x-height for Times New Roman at 12-points is smaller than Arial at 12-points. Researchers have found that both letter height and point size influence legibility. In general, larger letters provide better legibility, however, only to an upper threshold beyond which legibility decreases as size increases.

4 2. METHODS In the present study, study about readability has been investigated as a literature review. For these purpose, articles and presentation about readability and font issues has been collected. Presented similarities and differences of font typography in readability and then given brief information about factor of legibility such as font type, font size, color balance, contrast, and luminosity. 3. SUMMARY Legibility is a term for explain factors how can read faster or understand better on text. Since the publishing instructional publishing researchers study on legibility. But reading on computer screen has different effect from reading on written text. Because of that researcher follow fundamental factors on legibility on paper based text but try to understand and improve legibility on electronic screens. As a result of these studies, they try to make a guideline of factor effect of legibility (font size, type, color, contrast etc). Even there is not common belief and contrary result of studies, the common belief is the best readability can happen, on the high contrast foreground and background color (black text on white background), 12 size Arial font type. On the other hand, study and result examine one by one, result and generalization has become a questionable. In the studies, researchers try to find an effect of particular factors (font type, color, size etc.), control another factors. It means, result of the study can only acceptable according to these experimental conditions. For example it claims Arial font type can better readability then other font type as black text on white background. However another research can shown, if font size improve one size, Sans family font like Times New Roman can better readability then other font type as black text on white background To a certain degree, larger text sizes are considered more readable than smaller sizes. However font size can change height of characters. The size that is used is often determined at least in part by the x- height (the height of the torso for lower-case letters, or simply the height of a lowercase x ) of that particular typeface. For example, Arial, which has a proportionally larger x-height than Times, is often displayed in a smaller text size such as a 10-point size whereas Times is often displayed in a 12-point size, giving them approximately the same x-height and general appearance in height. Different font family has different x-height in the same font size, so that we should say x-height can effected legality instead of font size. Another example is contrast. Color harmony and contrast has great effect on legibility but there is not a common belief among the experts. Common results reveal that background/foreground color combinations which maintain a high contrast are more preferred than others. However, in the last studies on e-book and electronic devices screen, has been shown light and luminance is more affected then contrast. Monitors that was less effective in terms of luminance and luminance contrast, which turn out to be important factors in mediating the effect of font/background color combinations. Readability performance in most cases could be accounted for by luminance contrast, not hue (color). Lee et al. (2008) investigated the effects of character size under ambient luminance and light sources on legibility of electronic paper displays and compared them with paper. Results showed that search speed depends on the luminance but not light source. As mentioned above, it is not feasible to test every combination of variables, because legibility depends on many factors and there are thousands combinations. In the present studies there is no research for all combination and factors tried and show the effect. According the literature review and different opinion of experts, we can say there is not common formula for screen design and font usage on digital screens. The designer should not choice factors (font type, font size, color) by one by according to guideline or aesthetical view; they have to consider final result of combinations. Publisher or web designer can use a color chart so they can choice best and harmonious color together. Like color chart designer should have a chart for see total effect of factors. For further studies researcher should make a chart to shown all effect of combinations. So that designer can change to factors on the chart and can see total effect of all combinations.

5 REFERENCES Arditi A. & Cho, J. (2005). Serifs and font legibility. Vision Research 45 (2005) Arditi A. & Cho, J. (2007). Letter case and text legibility in normal and low vision. Vision Research 47 (2007) Bernard, M.L., Chaparro, B.S., Mills, M.M., Halcomb, C.G. (2003). Comparing the effects of text size and format on the readibility of computer-displayed Times New Roman and Arial text. Int. J. Human-Computer Studies 59 (2003) Erdogan, Y. (2008). Legibility of Websites Which are Designed for Instructional Purposes World Applied Sciences Journal 3 (1): Feelya, M., Rubina, G.S., Ekstromb, K. & Pererab, S. (2005). Investigation into font characteristics for optimum reading fluency in readers with sight problems. International Congress Series 1282 (2005) Hall, R.H. & Hanna, P. (2004). The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. Behaviour & Information Technology, May June 2004, Vol. 23, No. 3, Hill, A. & Scharff, L. V. (1997). Readability of screen displays with various foreground/background color combinations, font styles, and font types. Proceedings of the Eleventh National Conference on Undergraduate Research, Vol II, Lee, D.S., Shieh, K.K., Jeng, S.C. & Shen, I.H. (2008). Effect of character size and lighting on legibility of electronic papers, Displays 29 (2008) Woods,R.J., Davis,K. & Scharff L.V.F. (2005). Effects of Typeface and Font Size on Legibility for Children. American Journal of Psychological Research. Volume 1, Number 1 Yager, D., Aquilante K. & Plass R. (1998). High and low luminance letters, acuity reserve, and font effects on reading speed Vision Research 38 (1998) Zufic, J. & Kalpic, D. (2009). More efficient e-learning through design: color of text and background. World Conference on E-Learning in Corporate, Government, Healthcare, and Higher Education (ELEARN) 2009:1 E-Learn 2009