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.
- For paragraphs – the
<p>tag – use: - Line height between 1.3 and 1.6em.
- Font-size between 16px and 18px, depending on x-height of the font. For instance, here are two, one with tall x-height and one with short one:
- PT Serif, 18px – The sound is forcʼd, the notes are few!
- Neuton, 18px – The sound is forcʼd, the notes are few!
- A text width between 30 and 35em - this page is set at 33em.
- A small reduction in word spacing can make the text flow more evenly:
word-spacing:-0.05em - And don’t justify the text. It makes large word spaces and those disrupt reading.
- In all the text, including paragraphs, use:
- Smart quotes ‘ ’
‘ ’“ ”“ ”– not generic quotes ' "" - A smart apostrophe ʼ
ʼ– not a generic one '' - An – (en dash
–or–) with a space on either side, instead of—(em dash—) with no spaces. - Use Unicode for special characters –
énotéfor é, and“not”for “.
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 (A A) or the long form (A A), as can the hexadecimal – short form (A A) or long form (A 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.