×
Namespaces

Variants
Actions
(Difference between revisions)

Font usability design guidelines

From Nokia Developer Wiki
Jump to: navigation, search
naresh99 (Talk | contribs)
hamishwillee (Talk | contribs)
m (moved Font usability to Font usability design guidelines: Better topic name)
 
(8 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090625
 +
|author= [[User:Rahulsingh1m]]
 +
}}
 +
 
[[Category:Usability]]
 
[[Category:Usability]]
 
  
 
== Description ==
 
== 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.
+
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 ==
 
== 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.'''
 +
 
 +
* '''If you are using custom fonts that not defined in system then make sure that it will render properly on all devices'''
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
Custom font rendering properly on device  <br>                   
 +
[[File:GoodCustomFonts.JPG]]
 +
  </td>
 +
    <td align="left">
 +
Custom font not rendering properly device<br>                   
 +
[[File:BadCustomFonts.JPG]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
* '''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.'''
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
Example of small sized font usage<br>                   
 +
[[File:Small fontsize.jpg]]
 +
  </td>
 +
    <td align="left">
 +
Example of very big sized font usage<br>                   
 +
[[File:Too bigfontsize.jpg]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
Example of right sized font usage<br>                   
 +
[[File:Right font size.jpg]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
* '''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.'''
  
* While defining the font size, the screen resolution must be kept in mind.
+
* '''One can make use of bold font styles or use underlines etc so that the text looks highlighted and easily noticable.'''
  
* Font should be simple and the characters should be easily readable.
+
<table>
 +
<tr>
 +
    <td align="left">
 +
Example of underline/bold font usage<br>                   
 +
[[File:Highlight text.jpg]]
 +
  </td>
 +
  </tr>
 +
</table>
  
* Keep the backgrounds behind your text solid and plain, it is more readable.
+
* '''The best combination for readability is black font on a white background and vice versa.'''
  
* Use Bold font for heading of text paragraph.
 
  
* The best combination for readability is black font on a white background.
+
<table>
 +
<tr>
 +
    <td align="left">
 +
Example of right colored font usage<br>                   
 +
[[File:Right color.jpg]]
 +
  </td>
 +
  </tr>
 +
</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/>
+
* [[Using fonts with S60 and Maemo Platform|Using fonts]]<br/>
[http://wiki.forum.nokia.com/index.php/Custom_font How to use custom fonts]
+
* [[Creating and loading custom fonts in Symbian|Custom font]]

Latest revision as of 04:32, 13 February 2012

Article Metadata
Article
Created: User:Rahulsingh1m (25 Jun 2009)
Last edited: hamishwillee (13 Feb 2012)

[edit] 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.


[edit] Some usability guidelines

  • Unless required, try to use the fonts which are already defined by the system.
  • If you are using custom fonts that not defined in system then make sure that it will render properly on all devices

Custom font rendering properly on device
GoodCustomFonts.JPG

Custom font not rendering properly device
BadCustomFonts.JPG

  • 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


[edit] Read more on font

This page was last modified on 13 February 2012, at 04:32.
117 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×