Transcript Simon Pascal Klein, Beautiful Web Typography

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/examples/
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/