TYPOGRAPHY

Typography Typography is the art of creating and

setting type with the purpose of honoring the text it sets.

Typography exists to honor the content it sets to enhance legibility and embody the character of the words within.

Typography Principles of durable typography:

legibility some earned or unearned interest that

gives its living energy to the page.

Robert BringhurstThe Elements of Typographic Style

Typography Typography exists to bring order to

information by dividing and organizing.

It aids readers in finding what they are looking for.

RESET STYLES WITH CSS

Reset All the browsers have their own default styling

for various (X)HTML elements. Makes it difficult for cross-browser

consistency. You should Reset everything.

YahooReset.CSS Eric Meyer Reset :

meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Font sizing Sizing in pixels is absolute while sizing

in ems or percentages are an example of relative terms.

Font sizing |Relative | Use em EM is relative unit best to be thought of

as a box.

It is relative to the point size of a specific font (1 em in typical browser is 16 point).

(Sizing with EM Example | EM Box *)

Font sizing | Relative | Size of the em Size of the em square does not

define the size of individual characters within a font. Most fonts have characters that are either larger or smaller than an em (in height or width).

Size of type refers to the size of the em square, not the size of individual characters.

Font sizing | Relative Relative font sizes are relative to browser

default font size (usually16 pixels) or to the parent element.

p { font-size: 80%; }blockquote { font-size: 80%; }

If browser base font is 16px, 80% of 16px is 12.8px, so p and blockquote are same.

However, if p element is inside the blockquote, 80% of 12.8px is 10.42px.(Relative Sizing Example| Blockquote and

P *)

Font sizing | Relative | 62.5% Richard Rutter wrote article outlining a

trick to making EM sizing calculations simpler:

See:http://www.alistapart.com/articles/howtosizetextincss/http://www.clagnut.com/blog/348/

Font sizing |62.5% Browsers’ common default font size is 16px.

Set the body font size to be 62.5%, resetting the default value to 10px.

From here on, using ems is much easier: 12px in ems is 1.2em 8px is 0.8em.

This only works for direct child elements of the body; nested elements will be relative to their parents.

(Work on Example *)

Absolute font sizes Specified by designer, done in pixels. Overrides any preference for larger or smaller

type a user may want.

p { font-size: 14px; }blockquote { font-size: 14px; }

Both paragraphs and blockquote will be 14px even when a child of another element.

No inheritance. Simpler than figuring out math of relative font

sizing.

Absolute font sizesDownsides Takes control away from user. Accessibility issues if user needs larger

text to accommodate for poor vision.

Font sizing | Relative |AbsoluteWhen to use Relative versus Absolute Consider target audience, your design, your

resources. Relatively sizing will likely take more time.

Sites with target users who have poor vision use relative.

Situations where abnormally small text has been used for stylistic reasons and you want to make sure someone can resize text to read it - use relative.

Jeff Croft, 2008

STICK IT TO A SCALE

Stick it to a scale Stick it to a scale Use a scale when setting type. Find what suits you best for a given

project and stick to it.

Stick it to a scale Don’t compose without a scale “In the sixteenth century, a series of

common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. [...] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”

Source: http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/

Stick it to a scale

Traditionally-set type is composed to a scale. Above sizes are the classic typographic scale. Relationships between different sizes of type

within a composition is meaningful. Create a scale thoughtfully and then stick to

it.

Jeff Croft, 2008

Stick it to a scale For text which is to be printed, the font-

size property can and should be used to set in text in points, for example:

p { font-size:12pt }

Stick it to a scale Body of a web page has 16 px text by

default. Set paragraphs to 12 px would require

setting paragraphs at 0.75em.

p { font-size:0.75em; /* 16x0.75=12 */ }

Stick it to a scale The traditional scale:

body { font-size:100%; } h1 { font-size:2.25em; /* 16x2.25=36

*/ } h2 { font-size:1.5em; /* 16x1.5=24 */ } h3 { font-size:1.125em; /* 16x1.125=18

*/ } h4 { font-size:0.875em; /* 16x0.875=14

*/ } p { font-size:0.75em; /* 16x0.75=12 */ }(Scale Example 1*)

Stick it to a scalebody {font: 1em/1.5em "Lucida Grande“;}h1, h2, h3, h4, h5, h6 {font-family: helvetica, arial, verdana,

sans-serif;font-weight: normal;}h1 {font-size: 218%;}h2 {font-size: 164%;}h3 {font-size: 145%;}h4 {font-size: 118%;}

(Scale Example 2)

Stick it to a scale

Stick it to a scale

SELECT A GOOD MEASURE

Select a good measure Measure - length of a single line. Measure is a key element of readability.

Set with width property. Best to use ems or percentages to set

the width of blocks of text, units are directly proportional to the size of type.

Select a good measure min-width and max-width properties

are very helpful in ensuring a readable measure length, even when text is within larger elements.

Select a good measure | Length For optimal readability,

a measure of 45-75 characters in length is recommended

Between 30 and 50 ems can be seen as an ideal line length.

(Scale Example)

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 grayMake all visual distinctions as subtle as

possible, but still clear and effective.

Edward TufteVisual 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

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/