Human Interface Guidelines/The Sugar Interface/Text and Fonts: Difference between revisions
m →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}} | ||