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 Bringhurst The 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/ meyerweb.com/eric/tools/css/reset/ 

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 *)Sizing with EM Example

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(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:

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 sizes Downsides  Takes control away from user.  Accessibility issues if user needs larger text to accommodate for poor vision.

Font sizing | Relative |Absolute When 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:

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(Scale Example 1*)

Stick it to a scale body {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

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 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 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   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         