TYPOGRAPHY

Typography  Type reset | Absolute versus Relative  Using a Scale  Measure  Line height  Examples 1 | 2 | 3 Examples23

Typography  Typography is the art of creating and setting type with the purpose of honoring the text.  Typography exists  to honor the content it sets  to enhance legibility and  embody the character of the words.

Typography  Principles of durable typography:  legibility  some earned or unearned interest that gives living energy to the page. Robert Bringhurst The Elements of Typographic Style

Typography  Principles of durable typography:  legibility  some earned or unearned interest that gives 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 browsers have their own default styling for various HTML elements.  Can make cross-browser consistency difficult.  Some suggest resetting everything.  YahooReset.CSS YahooReset.CSS  Eric Meyer Reset : meyerweb.com/eric/tools/css/reset/ 

Font sizing: Absolute | Relative  Sizing in pixels is absolute while sizing in em or percentages are an example of relative terms.

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 | 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 px).  1em is equal to the current font-size of the element in question. If you haven't set font size anywhere on the page, then it would be the browser default, which is probably 16px.  By default 1em = 16px. Source:

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.

(Sizing with EM Example | EM Box *)Sizing with EM Example

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 *)

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

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

 For text that 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 } {Example – setting print styles}Example

(Scale Example(Scale Example 1*)

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.  For single-column design 65 characters is considered ideal. (Scale Example)

Line Length  Good line length is one that allows the reader’s eyes to flow from the end of one line to the beginning of the next very easily and naturally. Martin (2009) examined web sites and obtained:  line length (pixels) ÷ line height (pixels) = 27.8

Too Long: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Good: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Too short: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

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 (e.g., headers) need less leading.  Darker (heavier) type needs more leading.  Sans serif type needs more leading than serif.  Longer line-lengths need more leading.  Shorter line-lengths require less leading. Jeff Croft, 2008

Leading  Sufficient line height makes the text ultimately more scannable.

Good: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Too little: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Too much: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Leading  According to Carusone (2009), a good rule is to set the leading 2 to 5pt larger than the type size, depending on the typeface.

Measure | Line Height According to Martin (2009):  line height (pixels) ÷ body copy font size (pixels) should = to 1.48 or 1.5  line length (pixels) ÷ line height (pixels) should = to ) Once you have decided on your body copy font size, multiplying this value by 1.5 will give you the optimal line height. E.G., 16px X 1.5px = 24px or 1.5em 2) Then multiply this new value by 27.8 to get your optimal line length: E.G., 24 X 27.8 = or 42em  Layout will need gutters, margins and padding to let the body copy breathe.