STUDY TASK 4 - legibility, readability and hierarchies

Definitions

Layout: The use of grids, whitespace, and images can all have an impact on readability. Images can help create a flow through your text and give readers a place to rest. A lack of space around text blocks and in your design in general can make elements blend into each other. Grids help align your type across the page.

Alignment: Text can be centered, justified, left-justified, or right-justified. Each has it’s appropriate place in a design. Left-justified is generally best for long blocks of copy. Having a strong left edge gives the eye an easy place to come back to after reaching the end of the line.

New paragraphs: Should you indent paragraphs or start a new paragraph with a line space? Either can be fine as long as you’re consistent. The line space is more common online and probably a little easier to read on a monitor. Other ways to indicate new paragraphs include drop caps, ornamentation, and outdenting. Pick one or combine two ways to signify a new paragraph and stick with it.

Measure: refers to the length of a line of text.Long lines of text tire the eye and make it hard to find your way back to the next line. Your measure should be 45 – 75 characters long with 66 characters as an often been cited ideal. If your design uses multiple columns of text you probably want to keep your measures shorter (40 – 50 characters).

Leading: (line-heght in css) is the vertical space between lines of text. It’s the distance between one baseline of text and the next. Common advice says your leading should be at least 25% to 30% larger than your font size, however I find that 50% larger is most readable online. You can use negative leading for shorter phrases and text blocks, but make sure the ascenders and descenders of the type don’t collide.

Kerning: refers to adjusting the space between specific character pairs. Letter combinations where one or more characters have an open space or angle out (T, A for example) require an adjustment (when paired with some letters) to make the space between them appear more uniform. This is usually taken care of in the typeface and not something you would often do manually Monospaced fonts have no kerning.

Tracking: is related to kerning. It’s the overall space between letters instead of specific pairs of letters (letter-spacing in css). Tracking can be used for effect as well as readability. Script typefaces often require a positive tracking as do all caps and small caps.

Case: Type can be lowercase, uppercase, and mixed case. Lower case (with capitalization for grammar) is the easiest to read in longer blocks of text. Upper case (all caps) is more difficult to read, though it can work fine in short blocks of text.

Font Style and Font Weight: Roman face fonts are the easiest to read. Italics and bolding can become difficult in long blocks of copy and are best use in small doses.

Color: Typographic colour refers to the space between letters, words, and lines of text as well as the weight of the font. Leading, and tracking among other things help control typographic color and can be used to control the hierarchy of your text. When text gets too dense (has too much color) it becomes harder to read.

Contrast: relates to the actual colors chosen for text and the background on which the text sits. The more contrast between text and background the more readable the text will be. Black text on a white background is the easiest to read. From there every combination makes text less readable.

Number of different fonts: Using too many fonts in a single design can be a struggle to adjust to. Consistency helps readability. Rule of thumb advice is to use 2 fonts (3 at most) and to contrast a serif and sans-serif font. Perhaps one for body copy and one for headings.

Typeface: We started this discussion with the idea that not all type needs to be legible. Your first choice for readability is therefore to choose a legible typeface. Your choice for body copy is going to come down to either a serif or sans-serif typeface.

Serifs help lead the eye and they’re typically chosen in print. However they can become difficult to read at smaller sizes as the serifs collide, which is why sans-serif fonts have become more common online. Either serif or sans-serif fonts can work well online as long as you do most of the other things in this post right.

At smaller font sizes you want to find a typeface with a heavier stroke weight and less contrast between thick and thin parts otherwise strokes can overwhelm the thinner strokes. You’d typically want to choose a font with a wide-set width and a larger x-height. Often you’ll need to add tracking at smaller font sizes.

(source)


Further information can also be found:
http://gd.tuwien.ac.at/languages/html/webstyle/wsg3/8-typography/3-legibility.html
http://www.tomontheweb2.ca/CMX/4D5E2/
http://www.csarven.ca/web-typography