×
Namespaces

Variants
Actions
(Difference between revisions)

Font usability design guidelines

From Nokia Developer Wiki
Jump to: navigation, search
Rahulsingh1m (Talk | contribs)
(Read more on font)
Rahulsingh1m (Talk | contribs)
Line 1: Line 1:
 
[[Category:Usability]]
 
[[Category:Usability]]
 
  
 
== Description ==
 
== Description ==
Line 9: Line 8:
 
== Some usability guidelines ==
 
== Some usability guidelines ==
  
===Unless required, try to use the fonts which are already defined by the system.===
+
* '''Unless required, try to use the fonts which are already defined by the system.'''
  
===While defining the font size, the screen resolution must be kept in mind===
+
* '''While defining the font size, the screen resolution must be kept in mind.'''
  
It is important to keep a font size which is in sync with the display screen space available to the application. Using too big or too small sized font could either hamper readibility or look very bad on the ui, neither of which is a good idea.
+
* '''Keep the font size which is in sync with the display screen space available to the application.'''
  
 
<table>
 
<table>
 
<tr>
 
<tr>
 
     <td align="left">
 
     <td align="left">
'''Example of small sized font usage'''<br>                     
+
Example of small sized font usage<br>                     
 
[[Image:Small fontsize.jpg]]
 
[[Image:Small fontsize.jpg]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
''' Example of very big sized font usage '''<br>                     
+
Example of very big sized font usage<br>                     
 
[[Image:Too bigfontsize.jpg]]
 
[[Image:Too bigfontsize.jpg]]
 
   </td>
 
   </td>
Line 31: Line 30:
 
<tr>
 
<tr>
 
     <td align="left">
 
     <td align="left">
'''Example of right sized font usage'''<br>                     
+
Example of right sized font usage<br>                     
 
[[Image:Right font size.jpg]]
 
[[Image:Right font size.jpg]]
 
   </td>
 
   </td>
Line 37: Line 36:
 
</table>
 
</table>
  
===Font should look elegant and the characters should be easily readable===
+
* '''Font should make text easily readable. Font properties like color/size/style should make the text look nice on the UI.'''
  
The font properties like color/size/style should make the text look nice on the UI and be very easily readible. Another thing to consider would be the target audience, for instance if we are looking at targetting elderly people, it might be a good idea to use a bigger font and a darker color to make it easy for them to read the text.
+
* '''While using background images, use a proper combination of font type and colour so that the text is readable.'''
 
+
* Keep the backgrounds behind your text solid and plain, it is more readable.
+
 
+
* While using background images, use a proper combination of font type and colour so that the text is readable.
+
 
+
 
+
It serves to use the font in sync with the overall theme color/background image combinations to give it a harmonious look on the UI.
+
 
+
<table>
+
<tr>
+
    <td align="left">
+
'''Example of wrong colored font usage'''<br>                   
+
[[Image:Wrong color.jpg]]
+
  </td>
+
</tr>
+
</table>
+
 
+
<table>
+
<tr>
+
    <td align="left">
+
''' Example of right colored font usage '''<br>                   
+
[[Image:Right color.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
 +
* '''Keep the backgrounds behind your text solid and plain, it is more readable.'''
  
* Use Bold/underline properties
+
* '''Because blue-receptors in the eye are least numerous, avoid blue for small font.'''
  
 +
* '''It serves to use the font in sync with the overall theme color/background image combinations to give it a harmonious look on the UI.'''
  
While trying to emphasize/highlight a particular text, one can make use of bold font styles or use underlines etc so that the text stands out from the others and is easily noticable.
+
* '''One can make use of bold font styles or use underlines etc so that the text looks highlighted and easily noticable.'''
  
 
<table>
 
<table>
 
<tr>
 
<tr>
 
     <td align="left">
 
     <td align="left">
''' Example of underline/bold font usage '''<br>                     
+
Example of underline/bold font usage<br>                     
 
[[Image:Highlight text.jpg]]
 
[[Image:Highlight text.jpg]]
 
   </td>
 
   </td>
Line 81: Line 57:
 
</table>
 
</table>
  
* The best combination for readability is black font on a white background and vice versa
+
* '''The best combination for readability is black font on a white background and vice versa.'''
  
  
Line 87: Line 63:
 
<tr>
 
<tr>
 
     <td align="left">
 
     <td align="left">
''' Example of right colored font usage '''<br>                     
+
Example of right colored font usage<br>                     
 
[[Image:Right color.jpg]]
 
[[Image:Right color.jpg]]
 
   </td>
 
   </td>
Line 93: Line 69:
 
</table>
 
</table>
  
* Because blue-receptors in the eye are least numerous, avoid blue for small font.
 
  
 
==Read more on font==
 
==Read more on font==
 
* [http://wiki.forum.nokia.com/index.php/Using_fonts_with_S60_and_Maemo_Platform Using fonts]<br/>
 
* [http://wiki.forum.nokia.com/index.php/Using_fonts_with_S60_and_Maemo_Platform Using fonts]<br/>
 
* [http://wiki.forum.nokia.com/index.php/Custom_font How to use custom fonts]
 
* [http://wiki.forum.nokia.com/index.php/Custom_font How to use custom fonts]

Revision as of 10:57, 27 June 2009


Description

Font is defined as a design describing size, style, height and thickness for a groups of characters. E.g. a group of characters for Times New Roman for a certain size(lets say 10) is a font. While doing the usability design it is important to ensure that due consideration is placed on the right usage of the fonts, in terms of their style, size, color, highlighting/underline patterns etc. A rightly used font to display text/information to the user can go a long way in providing higher usability index for the application.


Some usability guidelines

  • Unless required, try to use the fonts which are already defined by the system.
  • While defining the font size, the screen resolution must be kept in mind.
  • Keep the font size which is in sync with the display screen space available to the application.

Example of small sized font usage
Small fontsize.jpg

Example of very big sized font usage
Too bigfontsize.jpg

Example of right sized font usage
Right font size.jpg

  • Font should make text easily readable. Font properties like color/size/style should make the text look nice on the UI.
  • While using background images, use a proper combination of font type and colour so that the text is readable.
  • Keep the backgrounds behind your text solid and plain, it is more readable.
  • Because blue-receptors in the eye are least numerous, avoid blue for small font.
  • It serves to use the font in sync with the overall theme color/background image combinations to give it a harmonious look on the UI.
  • One can make use of bold font styles or use underlines etc so that the text looks highlighted and easily noticable.

Example of underline/bold font usage
Highlight text.jpg

  • The best combination for readability is black font on a white background and vice versa.


Example of right colored font usage
Right color.jpg


Read more on font

75 page views in the last 30 days.