LEADING

Leading

Space between lines of type. Comes from traditional letterpress-style

typesetting, where strips of lead are used to separate one line of text from the next.

Establishing appropriate leading is one of the fastest ways to make your site look professional.

Leading rules of thumb

Blocks of type typically need positive leading. Blocks of type do not read well with no

leading. Short elements of type (e.g., headers) need

less leading. Darker (heavier) type needs more leading

than lighter type. Sans serif type needs more leading than serif. Longer line-lengths need more leading. Shorter line-lengths require less leading.

Jeff Croft, 2008

COLOR

Shades of gray

For legibility contrast must exist between the background and foreground colors.

Computer screens have much greater black/white contrast than typical printed page.

As a result, many web designers prefer off-black to pure black on white backgrounds.

Elegant to use very light gray instead of pure white on black backgrounds.Show Examples 1 - 4

Shades of gray

Make all visual distinctions as subtle as possible, but still clear and effective.

Edward Tufte

Visual Explanations

Grids

Bring order to page and help specify where things should go and their flow.

Use “gutters” (margins between columns) to separate your columns

http://960.gs/ http://developer.yahoo.com/yui/example

s/

Show Grid Examples

Additional items

Set body in a serif and headings in a san serif or visa-versa - add to visual appeal.

Set abbr and acronym elements in small caps (using the font-variant property).

Mark new paragraphs with indents, outdents, or other ornaments, drop cap and/or headers.

Simon Pascal Klein, Beautiful Web Typography

Additional items

Generally use flush-left (text-align: left;) for running text, particularly with narrow measure.

Justification can work at ample measures and better with serif typefaces.

Use high-contrasting link colors

Simon Pascal Klein, Beautiful Web Typography

Additional items - Indents

Tradition suggests there is no indent on a paragraph following a head or sub head.

Tradition suggests there is no indent following lists and blockquotes.

Achieve this using adjacent sibling selectors. For example, if you have already set an indent on your paragraphs:

p { text-indent: 2.5em; }

To stop any paragraphs following a heading of rank 1–3 having an indent you can set:

h1 + p, h2 + p, h3 + p { text-indent: 0; }

Examples:

http://www.andyrutledge.com/ Hierarchy of size and tone to indicate

chronology. Boundried blocks define thoughts.

http://acrossamerica.robweychert.com/ Use of indents Text set flush left and ragged right. Combination of indents and small-capped

openings in his blog posts.

Quotes |Jon Tan

“Skim reading is the norm on the Web…. it’s only when we become absorbed that we digest the meaning of the text linearly. It’s a way of filtering the noise in a page to try and get to the content of interest. However, this has become essential because of bad design; pages have been confused with intrusive advertisements, overbearing calls to action, and layouts that don’t serve legibility. It has forced people to skim, whether they want to or not. Better designers refuse such harmful techniques. Getting layout and content right in prototyping is essential.”

Jon Tan

Source: http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design

Quotes |Jon Tan

“A common mistake is to allow the design to dominate the text: Design for design’s sake, or even worse, fashion’s sake.

The text is made subservient to the canvas that the designer wished to paint on the screen. This is exemplified by the proliferation of fun, but ultimately harmful, web design galleries.

Once a user muscles past the gag reflex, or stops admiring the amazing graphical decoration, they can often realize the design is in their way. The content is obscured. The narrative space becomes broken into fragments, like pieces of torn parchment linked tenuously together by calls to action, or a nested index of links called a menu.”

Quotes |Jon Tan

“Careful choice of paragraph style (and other body text forms) can accommodate all of the differences in audience behavior and expectations. Choose judiciously, but most of all, designers should know why they are choosing a particular form; “because it looks good” is not a good reason on its own; “because it feels good” may well be.”

Typography Tools

Get text: http://html-ipsum.com/

EM Calculator http://riddle.pl/emcalc/ http://pxtoem.com/

Web Safe Typography on Screen http://www.suprb.com/apps/csstype/ http://www.typetester.org/ http://www.fonttester.com/

Preview your CSS text as you modify it http://csstypeset.com/

Typography Resources

http://webtypography.net http

://alistapart.com/topics/design/typography http://ilovetypography.com http://cameronmoll.com http://jeffcroft.com http://markboulton.co.uk http://zeldman.com http://960.gs/ http://developer.yahoo.com/yui/examples/