SIMPLE & USEFUL
A guide to web design

Text & Typography

Basics · Fonts · Unicode · Legibility & Readability


Basics

Most of web design is the designing of text – picking the fonts to use and shaping them with style sheets. The primary goal in designing text is to make it transparent, so it can be look through, not looked at. The fonts are there to support the information it presents, without intruding on it.

Legibility is the degree to which glyphs (individual characters) in text are understandable or recognizable based on appearance. “The legibility of a typeface is related to the characteristics inherent in its design ... which relate to the ability to distinguish one letter from the other.” Legibility includes factors such as “x-height, character shapes, stroke contrast, the size of its counters, serifs or lack thereof, and weight.”[1]

Legibility is different from readability which refers to entire words, sentences, and paragraphs. Readability is influenced by line length, primary and secondary leading, justification, typestyle, kerning, tracking, point size, etc.

Readability is the ease in which text can be read and understood.

In practical application some attributes cross over and affect both.

How paragraphs are presented is a central part of the design of useful and unobtrusive text. Following these directions can make them easier to read.

This table contains a list of some of the commonly used unicode entities – those used for punctuation, accented letters and common symbols.

Emphasis within a paragraph should be done using the <em> tag, not underlined – <u> tag, nor bold<strong> or <b> tag, nor ALL CAPS. The latter three distract from ease of reading a long text because they disrupt its flow.

Bold and all caps, both TOGETHER and SEPARATELY, are usually used only for titles and headings.

Any Unicode character can be inserted into a web page using either decimal or hexadecimal format in two different ways: decimal can be in the short form (&#65; A) or the long form (&#0065; A), as can the hexadecimal – short form (&#X41; A) or long form (&#X041; A)

Many common fractions can be presented in two ways – for instance: 1/4 or ¼, 3/8 or ⅜. This table shows the latter ones which are included in unicode.


Fonts

If someone says san-serif fonts are better than serif fonts, or the reverse, always ask which fonts they mean, since Georgia 123 ≠ Times New Roman 123 and Verdana 123Arial 123.

Also ask what font-size, line-height and line-length will be used – those often matter more for readability than the font chosen.

Here are six commonly used fonts, three serif – Georgia, Times New Roman, Palatino, and three sans-serif – Arial, Verdana, Lucida Grande. Arial requires some letter spacing so the r doesn't run into the n and make an m. The font size for these is 24px, so their individual characteristics can be more clearly seen. At the end of each font entry are –
1lI rnm jg
– so that those characters which sometimes cause problems with legibility can be seen.

These are the fonts set at 24px (1.5em of the body font size, 16px)

This serif font is Georgia and set at font-size 1.5em, word-spacing: -0.01em. 1lI rnm jg

This serif font is Times New Roman and set at font-size 1.5em, word-spacing: -0.025em. 1lI rnm jg

This serif font is Palatino and set at font-size 1.5em, word-spacing: -0.01em. 1lI rnm jg

This sans-serif font is Arial and set at font-size 1.5em, word-spacing: -0.095em, letter-spacing: 0.01em. 1lI rnm jg

This sans-serif font is Verdana and set at font-size 1.5em, word-spacing: -0.095em. 1lI rnm jg

This sans-serif font is Lucida Grande and set at font-size 1.5em, word-spacing: -0.05em. 1lI rnm jg


The fonts used in SIMPLE & USEFUL are Droid Serif, Droid Sans and Droid Sans Mono. All were designed by Steve Matteson to be used on Android mobile phones. These and hundreds of other fonts can be found at Google Fonts.

Here is a list of fonts which will work for extended text, most come in at least these four styles - Normal, Normal Italic, Bold and Bold Italic. – Google Fonts List


A tutorial about embedding fonts.