Upload
wynn
View
51
Download
0
Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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/ 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 sizes
Downsides 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 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
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 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
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/