SCREEN DESIGN > TYPOGRAPHY

Selecting the right typeface for screen legibility

A designer must understand how to select the right typeface for screen design. Lynch and Horton states, "Typeface is a unique tone that should produce a harmonious fit between the verbal and visual flow of your content " (p126) Good legibility on a page can help keep the reader focussed on a page. Often times a user leave a page when it is hard to read the content (no visual flow) where incorrect typefaces or too many typefaces are used.

Examples of good use of typefaces are Georgia and Verdana (any type of sans serif fonts). There is a difference between reading on a printed page versus screen page. Why use Georgia instead of Times New Roman? Times New Roman looks more compact as opposed to Georgia. The whitepace between each word and broader type is easier on the eye. View examples below.

Example of Times New Roman - 12 pts (Except taken from WebStyle Guide)

Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of HTML, Web authors had no control over typefaces ("fonts" in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. The more recent versions of HTML and CSS allow designers to specify the typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one face may not format correctly in another.

Example of Georgia - 12 pts (Except taken from WebStyle Guide)

Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of HTML, Web authors had no control over typefaces ("fonts" in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. The more recent versions of HTML and CSS allow designers to specify the typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one face may not format correctly in another.

Example of Verdana - 12 pts (Except taken from WebStyle Guide)

Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of HTML, Web authors had no control over typefaces ("fonts" in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. The more recent versions of HTML and CSS allow designers to specify the typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one face may not format correctly in another.

Click here for examples of good & bad typography sites