87
edits
Changes
Jump to navigation
Jump to search
Human Interface Guidelines/The Sugar Interface/Text and Fonts (view source)
Revision as of 18:35, 16 May 2007
, 18:35, 16 May 2007→Readability
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
<noinclude>{{Translations}}</noinclude>
{{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Toolbars}}
===Fonts===
[http://dejavu.sourceforge.net/wiki/index.php/Main_Page DejaVu LGS Sans]
====Sizes====
[[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). We are settling on a default font size of 7pts. for the Sugar UI (using [http://dejavu.sourceforge.net/wiki/index.php/Main_Page DejaVu LGS Sans]). It is quite legible. This translates to a font size of approximately 19.45 pt in Adobe Illustrator, which bases its units on the traditional 72DPI display. For the purposes of preparing activity GUI mockups, you must always remember to make the conversion to the laptops' display resolution by multiplying by a constant factor of 0.36.
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"/>
====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. Furthermore, a grey background limits the readability of the display in sunlight. Therefore, we recommend the use of black text on a white background for best readability of fine text, and color on white for larger print.
{{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Toolbars}}
[[Category:Sugar]]
[[Category:Fonts]]
<noinclude>{{Translations}}</noinclude>
{{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Toolbars}}
===Fonts===
[http://dejavu.sourceforge.net/wiki/index.php/Main_Page DejaVu LGS Sans]
====Sizes====
[[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). We are settling on a default font size of 7pts. for the Sugar UI (using [http://dejavu.sourceforge.net/wiki/index.php/Main_Page DejaVu LGS Sans]). It is quite legible. This translates to a font size of approximately 19.45 pt in Adobe Illustrator, which bases its units on the traditional 72DPI display. For the purposes of preparing activity GUI mockups, you must always remember to make the conversion to the laptops' display resolution by multiplying by a constant factor of 0.36.
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"/>
====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. Furthermore, a grey background limits the readability of the display in sunlight. Therefore, we recommend the use of black text on a white background for best readability of fine text, and color on white for larger print.
{{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Toolbars}}
[[Category:Sugar]]
[[Category:Fonts]]