top of page

Typography

1 December 2011
Gabi Ben- zion

The characterization of a User Interface enfolds a world of details, from the structure and functionality level to the really small details. Typography is defined (according to Wikipedia) as "Typography is the art and technique of arranging type to make written language readable and appealing. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning)."

In the world of Web 2.0, in which an alternative for every source of information can be found, the website's visibility can become the determining factor between Use and No Use. Therefore, allow me to point out some emphases for designing correct typography for a User Interface:

 

*Relevant CSS code segments can be found in the article's references.


Some will claim that typography only includes choosing the font, its size and whether it's bold or italic. There are actually other aspects most of us tend to forget:

Line width

A line which too long or too short can be tiring or confusing to the user as well as the paragraph's tempo. The optimal width for a line is between 40 and 80 characters a line. If the page contains a single column, it is preferable for the line to contain approzimately 65 characters.

For the advanced: a formula for calculating the required length-size of font=30Xrequired length (10px X 30=300px)- the line will not be longer than 300px.

 

Space between lines

Correct spacing between lines eases the user's work process and improves the text's general visibility. There are many factors that affect the spacing between lines, such as: type of font, size, line width, the space between letters and words. The space between lines should be wider than the spacing between letters:

The bigger the width of the line- the bigger should the width between lines be;

The bigger the font- the more the space between lines can be smaller;

The optimal spacing ratio in regard to font size is 2-5 pt more than the defined font size so that that if font size 12 pt was chosen, the appropriate spacing is 15-16 pt.

 

Vertical tempo

A uniform vertical tempo allows consistent, continuous reading which keeps a balance and proportions created on the page- in regard to font size, to spacing between lines and margins. It is possible to maintain a tempo by adding lines/network to the page and force the text straight in order to network the CSS files.

 

End of Paragraph

A single word in the last line of a paragraph or a word cut off at the end of a column, create a sense of discomfort and disturb the readers' continuous read; it is recommended to maintain correct spacing, font size etc. and if required force the lines down manually (using the Enter button).


Emphasis

It is recommended to use emphases in a manner that will not disturb the readers and 'disconnect' them from the reading 'flow'. Different features can be used for emphasis, such as bold, italics, a change of color, emphasized font and underlining (used less nowadays, due to the universal use of hyperlinks), a change of font or size (Caps Lock can be used as well). The last three options are less recommended since they drastically cut off the reader's reading tempo. Anyway, no matter what method you choose- it is important to use only one of them each time and stay consistent throughout the sire (do not use bold + italics+ a change of font, or alternate between italics and a use of red).

Margins

It is important to keep the margins clean; "exiting the margins" provides a sense of discomfort and even distracts the user's opinion. If required, it is recommended to skip a line manually (Enter) than to noticeably deviate from the column's outline.

Lists and quotes

When the text doesn't begin at the beginning of the line- this generates a sense of discontinuity and harms the tempo. It is therefore important to make sure to leave punctuation at the end of a quote/add bullets to the list- outside of the margins, so that the text stays aligned with the paragraph and doesn't begin from the middle of the line. This subject usually meets application difficulties- since most software, such as Office, use alignment as part of the text's alignment thus harming the typographical aspect.

the letter A
bottom of page