Beautiful Web Typography (#4)

of 64 /64
Beautiful Web Typography Simon Pascal Klein Letter, text, & page Version 4 Monday, 30 March 2009

description

The fourth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.

Transcript of Beautiful Web Typography (#4)

Page 1: Beautiful Web Typography (#4)

Beautiful WebTypography

Simon Pascal Klein

Letter, text, & page

Version 4

Monday, 30 March 2009

Page 2: Beautiful Web Typography (#4)

Intro…

Beautiful Web Typography

Monday, 30 March 2009

Page 3: Beautiful Web Typography (#4)

I’m Pascal Klein.

Beautiful Web Typography

Monday, 30 March 2009

Page 4: Beautiful Web Typography (#4)

I’m…

a graphic & web designer;1.

a bit of a UI and UX aficionado;2.

and, incurably, a rampant ‘typophile’.3.

Beautiful Web Typography

Monday, 30 March 2009

Page 5: Beautiful Web Typography (#4)

‘Typophiles’ are über gεεks who

♥ typography.

Hands up and make yourselves known.

Beautiful Web Typography

Monday, 30 March 2009

Page 6: Beautiful Web Typography (#4)

The intertubes today are

info-heavy.

Much of it is textual.

premise:

Much of it is a pain to read.

Beautiful Web Typography

Monday, 30 March 2009

Page 7: Beautiful Web Typography (#4)

ty•pog•ra•phy | tīˈpägrəfē | •n

Typography is the art of creating and setting type

with the purpose of honoring the text it sets.

Beautiful Web Typography

Monday, 30 March 2009

Page 8: Beautiful Web Typography (#4)

Typography exists to bring order to information

by dividing and organizing — aiding readers in

finding what they are looking for.

Beautiful Web Typography

Monday, 30 March 2009

Page 9: Beautiful Web Typography (#4)

i.e. make textual stuff look pretty.

Beautiful Web Typography

Monday, 30 March 2009

Page 10: Beautiful Web Typography (#4)

Assumptions.

Limited to sans-serif only for readability?1.

Only ‘web-safe’ fonts?2.

Limited control—resort to Flash and other

technologies?

3.

It sucks?

Beautiful Web Typography

Monday, 30 March 2009

Page 11: Beautiful Web Typography (#4)

Beautiful Web Typography

Not quite.(Yay!)

Monday, 30 March 2009

Page 12: Beautiful Web Typography (#4)

Letter (micro)1.

Text2.

Page or grid (macro)3.

Beautiful Web Typography

Monday, 30 March 2009

Page 13: Beautiful Web Typography (#4)

Reset0.

All the browsers have their own default styling for

various (x)HTML elements. This makes it a pain for

cross-browser consistency.

Beautiful Web Typography

Monday, 30 March 2009

Page 14: Beautiful Web Typography (#4)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym {border:0;}

Googling “CSS reset stylesheets” should land you

with numerous examples. This one above is from

the Yahoo! UI library.

Beautiful Web Typography

Monday, 30 March 2009

Page 15: Beautiful Web Typography (#4)

Letter & Texttypeface (font) and style•

spacing (tracking/letter-spacing)•

individual glyphs•

Beautiful Web Typography

Monday, 30 March 2009

Page 16: Beautiful Web Typography (#4)

serifsanserifscript

blacklettermonospace

Beautiful Web Typography

Monday, 30 March 2009

Page 17: Beautiful Web Typography (#4)

Mixing typefaces requires special attention. Try to

align x-heights and sizes. X-heights?

Beautiful Web Typography

Helvetica Regular 96pt & Minion Pro Regular 96pt.

x-height x-height

Helvetica Regular 96pt & Minion Pro Regular 114pt.

x-height x-heightMonday, 30 March 2009

Page 18: Beautiful Web Typography (#4)

Use a limited palette of type families. A common

and effective technique is to pair a serif and a

sanserif face together. E.g.:

one sets the body, the other the headings;1.

one sets primary content, the other UI controls.2.

We do this with the font-family property.

Beautiful Web Typography

Monday, 30 March 2009

Page 19: Beautiful Web Typography (#4)

roman (‘normal’)italicultralight regular bold

& bold italic condensedSMALL-CAPITALS

oblique≠

Beautiful Web Typography

Monday, 30 March 2009

Page 20: Beautiful Web Typography (#4)

Beautiful Web Typography

ArialVerdanaCourier New

Times New RomanGeorgiaTrebuchet MS

Monday, 30 March 2009

Page 21: Beautiful Web Typography (#4)

– Jeff Cro

“Typography is not picking a ‘cool’ font.”

Beautiful Web Typography

Monday, 30 March 2009

Page 22: Beautiful Web Typography (#4)

Options for web fonts:

Installed fonts—mostly web-safe•

sIFR—JS and Flash replacement•

Beautiful Web Typography

Other js—Cufón!http://wiki.github.com/sorccu/cufon/about

Monday, 30 March 2009

Page 23: Beautiful Web Typography (#4)

Monday, 30 March 2009

Page 24: Beautiful Web Typography (#4)

Font stacks:

desired•

fallback•

Beautiful Web Typography

generic (e.g. serif, sans-serif, monospace)•

Monday, 30 March 2009

Page 25: Beautiful Web Typography (#4)

Use a combination of families, styles, weights and

to breath some fresh air into your web type.

font-weight controls weight and accepts

numerical and descriptive (e.g. ‘black’) values.

font-style controls… style. Accepts the descrip-

tive values (normal, italic, and oblique).

font-variant controls case and accepts the

values normal and small-caps.

Beautiful Web Typography

Monday, 30 March 2009

Page 26: Beautiful Web Typography (#4)

Monday, 30 March 2009

Page 27: Beautiful Web Typography (#4)

Web Typography 1.1

Letter-spacingLetter-spacingTRACKINGTRACKING

Monday, 30 March 2009

Page 28: Beautiful Web Typography (#4)

Letʼs see some loose word-spacing in action…

And now both loose word-spacing and tracking featured together.

Beautiful Web Typography

Monday, 30 March 2009

Page 29: Beautiful Web Typography (#4)

And finally, the recent popular trend of negative tracking.

Beautiful Web Typography

Monday, 30 March 2009

Page 30: Beautiful Web Typography (#4)

Tracking and word-spacing can help differentiate,

aiding readability by removing disruption.

Examples might include spacing acronyms or

setting numerical tabular data.

Beautiful Web Typography

Monday, 30 March 2009

Page 31: Beautiful Web Typography (#4)

Full-capital acronyms, along with other full-cap-

sized glyphs can disturb the flow of the text. E.g.

Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque habitant orci tristique senectus et 4,962 malesuada fames ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia.

Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque habitant orci tristique senectus et , malesuada fames ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia.

Beautiful Web Typography

Monday, 30 March 2009

Page 32: Beautiful Web Typography (#4)

letter-spacing and word-spacing controls

tracking and word-spacing respectively. Both take

numerical values and normal.

Sadly no property for controlling figure variants—

hopes set for CSS3. For now use Georgia which

(only) features hanging or ‘old-style’ figures.

Beautiful Web Typography

Monday, 30 March 2009

Page 33: Beautiful Web Typography (#4)

font-size controls… font sizes. Takes numerical

and descriptive values. Most user agents

(browsers) set default value at 16px.

Size font sizes relatively using ems or %.

An em is a relative unit best to be thought of as a

box. It is relative to the point size of a specific

font (i.e. 1 em in a 12 point typeface is 12 point).

Beautiful Web Typography

Monday, 30 March 2009

Page 34: Beautiful Web Typography (#4)

Why?

Old UAs don’t support font-resizing (Ctrl + +/-) or

page zooming/scaling when measurements are

defined in absolute terms.

The web is increasingly being accessed by a

number of different devices and user agents—be

careful of assumptions.

Beautiful Web Typography

Monday, 30 March 2009

Page 35: Beautiful Web Typography (#4)

Key: remember font sizes are inherited from

parents → children.

1 ÷ parent font-size × required pixel value= em value

To calculate, find what one pixel is in ems and

then multiply by the desired font size (in pixels):

Beautiful Web Typography

Monday, 30 March 2009

Page 36: Beautiful Web Typography (#4)

80% of 16px is 12.8px, so p and blockquote

elements will be that size, but what happens

when we put a p element inside a blockquote

element? The parent (blockquote) is 12.8px so

the p will be rendered at 80% of that: 10.42px.

.% trickSimplify your calculations. Consider:

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

Beautiful Web Typography

Monday, 30 March 2009

Page 37: Beautiful Web Typography (#4)

In 2004 Richard Rutter wrote an article outlining

a trick used to make these calculations simpler:

.% trick (cont’d)

browsers have common default size of 16px; thus:•

set body to 62.5% and reset all to 10px; thus:•

from here calculations are simpler for direct

descendants of the body, e.g. 12px = 1.2em; 8px =

0.8em. Further nested elements are (still) relative.

Beautiful Web Typography

Monday, 30 March 2009

Page 38: Beautiful Web Typography (#4)

To find an element’s font size in absolute terms

(e.g. pixels) you can use the Firefox Web Develop

Extension, Information → Display Element

Information.

Beautiful Web Typography

Monday, 30 March 2009

Page 39: Beautiful Web Typography (#4)

Don’t just arbitrarily set type; use a scale:

Stick it to a scale

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72.the “classic scale”

9, 10, 11, 12, 13, 14, 18, 24, 36, 48, 64, 72, 96.another scale

8, 13, 21, 34, 55, 89.scale based on the Fibonacci sequence

Beautiful Web Typography

Monday, 30 March 2009

Page 40: Beautiful Web Typography (#4)

Beautiful Web Typography

At small font sizes text-decoration:

underline; can render descender glyphs (g, j, p,

q, y) difficult to read: use border-bottom: 1px solid;

Monday, 30 March 2009

Page 41: Beautiful Web Typography (#4)

Correct glyphsConsider:

' "1'61"

Beautiful Web Typography

Monday, 30 March 2009

Page 42: Beautiful Web Typography (#4)

"is is a group of words surrounded by a bunch of tick marks."

Beautiful Web Typography

Monday, 30 March 2009

Page 43: Beautiful Web Typography (#4)

“is is a quotation!”- Jeff Cro

Beautiful Web Typography

Monday, 30 March 2009

Page 44: Beautiful Web Typography (#4)

‘ ’ “ ”’

Beautiful Web Typography

Monday, 30 March 2009

Page 45: Beautiful Web Typography (#4)

- hyphen Mary-Anne, Dominique Strauss-Kahn

– en dash April–May, ages –, pp. –

— em dash Phrase marker—not spaced—like this.

– minus 5–4=1

Beautiful Web Typography

Monday, 30 March 2009

Page 46: Beautiful Web Typography (#4)

Beautiful Web Typography

“ opening double quote “” closing double quote ”‘ opening single quote ‘’ closing single quote ’– en dash –— em dash —− minus −× multiplication ×… ellipsis …

Monday, 30 March 2009

Page 47: Beautiful Web Typography (#4)

Smartypants et al. are scripts that translates plain

ASCII punctuation characters into “smart”

typographic punctuation HTML entities.

Smartypants et al.Let scripts do the conversion for you.

Beautiful Web Typography

Smartypants (PHP, Perl, & Movable Type);•

Typogrify (Python/Django);•

wp-typogrify (WordPress);•

…•

Monday, 30 March 2009

Page 48: Beautiful Web Typography (#4)

Giving ampersands some love

& & & &

Beautiful Web Typography

& & & &

Monday, 30 March 2009

Page 49: Beautiful Web Typography (#4)

Don’t be afraid to mark new paragraphs with

indents, outdents, a plain white-line, a pilcrow (¶)

or other ornament, drop cap and/or headers.

Marking paragraphs

Beautiful Web Typography

Monday, 30 March 2009

Page 50: Beautiful Web Typography (#4)

Beautiful Web Typography

MeasuresThe measure is the length of a single line. It is important to select a good measure for running

text. Do this with the width property.

Ideally these should be relative to the font size, such that the type scales proportionately to the measure; use ems or percentages.

Monday, 30 March 2009

Page 51: Beautiful Web Typography (#4)

Beautiful Web Typography

Measures (cont’d)

An apt measure for running text ranges from about 45-75 characters for serif type set in a single column on a page (print).

On the web, type generally benefits from a smaller measure.

Generally use flush-left (text-align: left;) for

running text, particularly when set in a narrow

measure. Justification can work at ample

measures and better with serif typefaces.

Monday, 30 March 2009

Page 52: Beautiful Web Typography (#4)

Beautiful Web Typography

Leading (line-height)Don’t forget to set an ample leading for running

text! Done using the line-height property and

you can use a unit-less number (e.g. 1.5 which acts as a multiplier of the font size);

Leading spans from baseline to baseline… and I

need some more text to illustrate the point. :)

Monday, 30 March 2009

Page 53: Beautiful Web Typography (#4)

Beautiful Web Typography

Hanging punctuationTraditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer a odio. Vivamus placerat felis id risus. Cras mollis est. Suspendisse molestie imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam at turpis non massa rhoncus sodales.)”

(

Monday, 30 March 2009

Page 54: Beautiful Web Typography (#4)

Beautiful Web Typography

Hanging punctuation (cont’d)

Easily done with lists by just setting their margins to zero.

Possible for opening punctuation marks using background-image or a negative text-indent. CSS3 will hopefully support hanging punctuation with the proposed hanging-punctuation property.

→ http://www.w3.org/TR/css3-text/#hanging-punctuation

Monday, 30 March 2009

Page 55: Beautiful Web Typography (#4)

Beautiful Web Typography

Web: text = UIDistinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title).

Often done with colour (i.e. setting controls gray), size (making them smaller) and typefaces.

Monday, 30 March 2009

Page 56: Beautiful Web Typography (#4)

Beautiful Web Typography

Monday, 30 March 2009

Page 57: Beautiful Web Typography (#4)

Beautiful Web Typography

Monday, 30 March 2009

Page 58: Beautiful Web Typography (#4)

Page (grid).

Beautiful Web Typography

Grids bring order to your page and help specify

where things should go and their flow.

Remember to put in apt “gutters” (margins

between columns) to separate your columns

particularly when neighbouring columns hold

running text.

Ruler guides help enormously: use the Web

Developer extension for Firefox or ruler

background images. Also see the YUI library.

Monday, 30 March 2009

Page 59: Beautiful Web Typography (#4)

Beautiful Web Typography

Monday, 30 March 2009

Page 60: Beautiful Web Typography (#4)

Beautiful Web Typography

Monday, 30 March 2009

Page 61: Beautiful Web Typography (#4)

Addendum

Beautiful Web Typography

• Please don’t use Comic Sans unless you have a

very, very good reason.

• For the free desktop: stick fonts into ~/.fonts

and to reload your font cache: fc-cache -fv

Monday, 30 March 2009

Page 62: Beautiful Web Typography (#4)

ISBN: ---

Monday, 30 March 2009

Page 63: Beautiful Web Typography (#4)

Resources & reading

Beautiful Web Typography

• http://webtypography.net

• http://alistapart.com/topics/design/typography

• http://ilovetypography.com

• http://usabletype.org

Ta.

• http://www.papress.com/other/thinkingwithtype/

Monday, 30 March 2009