Difference between revisions of "Human Interface Guidelines/The Sugar Interface/Text and Fonts"
m (→Fonts) |
(→Fonts) |
||
| Line 3: | Line 3: | ||
===Fonts=== | ===Fonts=== | ||
| + | |||
| + | [http://en.wikipedia.org/wiki/Bitstream_Vera Bitstream Vera Sans] | ||
| + | |||
| + | ===Sizes=== | ||
[[Image:Sugar-font.png|thumb|218px|right|The font used in Sugar menus]] | [[Image:Sugar-font.png|thumb|218px|right|The font used in Sugar menus]] | ||
The OLPC display is 200DPI; therefore one point—1/72 inch—is just less than 3 pixels (2.78 pixels). Hence a 12pt font would be roughly 33 pixels. We are settling on a default size for Sugar menus (using [http://en.wikipedia.org/wiki/Bitstream_Vera Bitstream Vera Sans]) of an 11-pixel x height; 13-pixel ascender height; and 5-pixel descender height. In terms of that that is in point size on the actual display, about a 9 point font (it was a 19 point font in Illustrator on the Mac). It is quite legible. We will be looking at other faces, e.g., Arabic and Thai, and also looking into a large-type version of the interface for the younger children. | The OLPC display is 200DPI; therefore one point—1/72 inch—is just less than 3 pixels (2.78 pixels). Hence a 12pt font would be roughly 33 pixels. We are settling on a default size for Sugar menus (using [http://en.wikipedia.org/wiki/Bitstream_Vera Bitstream Vera Sans]) of an 11-pixel x height; 13-pixel ascender height; and 5-pixel descender height. In terms of that that is in point size on the actual display, about a 9 point font (it was a 19 point font in Illustrator on the Mac). It is quite legible. We will be looking at other faces, e.g., Arabic and Thai, and also looking into a large-type version of the interface for the younger children. | ||
| + | <br clear="all"/> <!--prevents image pushing title out--> | ||
| + | |||
| + | ===Readability=== | ||
| − | + | Due to the unique design of the OLPC display, particular techniques for text rendering will provide much better results than others. The dual mode display has a resolution of 1200x900 (200 dpi) in luminance mode, but only ~800x600 (133 dpi) in chrominance mode. Therefore, unless they are sufficiently large, fonts rendered with luminance and no chroma will appear sharper and more readable. | |
| + | |||
| + | Additionally, the display has higher resolution in black pixels than in white pixels. This results from the fact that each pixel has a color part which contains either red, green, or blue information. In order to create white, red, green and blue parts must all work together; when off, each of the color parts is black on its own. Therefore, we recommend the use of black text on a white background for best readability of fine text. | ||
{{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Rollovers}} | {{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Rollovers}} | ||
Revision as of 13:18, 18 December 2006
Fonts
Sizes
The OLPC display is 200DPI; therefore one point—1/72 inch—is just less than 3 pixels (2.78 pixels). Hence a 12pt font would be roughly 33 pixels. We are settling on a default size for Sugar menus (using Bitstream Vera Sans) of an 11-pixel x height; 13-pixel ascender height; and 5-pixel descender height. In terms of that that is in point size on the actual display, about a 9 point font (it was a 19 point font in Illustrator on the Mac). It is quite legible. We will be looking at other faces, e.g., Arabic and Thai, and also looking into a large-type version of the interface for the younger children.
Readability
Due to the unique design of the OLPC display, particular techniques for text rendering will provide much better results than others. The dual mode display has a resolution of 1200x900 (200 dpi) in luminance mode, but only ~800x600 (133 dpi) in chrominance mode. Therefore, unless they are sufficiently large, fonts rendered with luminance and no chroma will appear sharper and more readable.
Additionally, the display has higher resolution in black pixels than in white pixels. This results from the fact that each pixel has a color part which contains either red, green, or blue information. In order to create white, red, green and blue parts must all work together; when off, each of the color parts is black on its own. Therefore, we recommend the use of black text on a white background for best readability of fine text.