WEB TYPOGRAPHY
Presented by Matthew Buchanan
auckland web meetup, august af bjjg
With acknowledgement to Jeff Croft, Mark Boulton, Richard Rutter

august af bjjg
WEB TYPOGRAPHY auckland web meetup
“The screen is not a place where
you want to get fancy with fonts.”
— john gruber, the talk show

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
The em
* when type is distance(ie, with no leading)
An em is the between baselines
set solid
* Relative unit equivalent to type size
* Generally treated as a square entity
* An en is half the width of an em

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
In CSS, the em square is set using
the font-size property
* Can be set in a variety of units:
Absolute (pixels)
Relative (ems, percentages)
* Absolute sizes do not rely on inheritance
* Type with size specified in pixels cannot be
resized using browser controls in IE6 or below

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
WHicH is BETTER?
* Pixel sizing better for maths
* Em sizing more flexible as margins
grow as text size increases
* Sizing text in pixels is an IE problem, not a CSS problem
jeffcroft.com/sidenotes/2007/mar/13/clarifying-
comments-i-made-typography-panel-sxsw/
* IE7’s PageZoom circumvents problem

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
“As IE7 takes over more and more of the IE/
Win browser share, the decision to avoid pixel
sizing becomes less and less of a sealed tomb.”
www.wilsonminer.com/posts/2007/mar/16/problem-pixels/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
* Relative sizes are based on the current font size:
Either browser default (16 pixels); or
Inherited value from parent element
ExAmPlE Of nEsTEd RElATivE sizinG
p { font-size: 120%; }
strong { font-size: 120%; }
<p><strong>How big is my text?</strong></p>

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
* Richard Rutter suggests resetting browser
default font size to 10px using percentages
body { font-size: 62.5%; }
* Then size text in relative units from that
base: eg, 1.2em or 120% to obtain 12px
* Downside: inheritance means more complex
calculations required for nested elements
www.clagnut.com/blog/348/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
The Measure
* The measure is the length of a single line of text
* Choosing an appropriate measure for text
blocks is important for maintaining readability

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
In CSS, the measure is specified using
one of the width properties
* It is ideal to set the measure in ems, so it is
directly proportional to the size of the type
* words per line even when font sizecharacters/
Maintains a consistent number of
is scaled
* Use min-width and max-width to constrain
the measure within larger parent elements

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
* 45 – 75 characters (30 – 50 ems) per line is
generally considered optimal for readability
ExAmPlE Of mEAsURE sizEd WiTH Ems
#wrap {
width: 40em;
min-width: 300px;
max-width: 500px;
}

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
wikipedia.org
Good measure,
approximately 80
characters per line

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
wikipedia.org
Until you
do this...

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
Leading
* Leading is the distance between baselines of type
* Originates from traditional typesetting
methods, use of lead strips to separate type
* Establishing a vertical rhythm and appropriate
leading improves overall appearance and readability
* Single easiest way to make your page
look more professional

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
kstatecollegian.com, poor leading nytimes.com, good leading

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
In CSS, leading is specified using
the line-height property
* Can be specified in absolute or relative units
* Better to provide a unitless value to ensure
line-height scales when text is resized
p { line-height: 1.5; }

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic UniTs
* Calculate line-height as rhythm
(or baseline) divided by text size
16 ÷ 11 = 1.455
* Body copy generally benefits from positive
leading, while browser default is to set solid
* Sans-serif faces, heavier faces and
longer measures require more lead

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
“The density of texture in a written or typeset
page is referred to as its color. This has nothing
to do with red or green ink; it refers only to the
darkness or blackness of the letterform in mass…
evenness of color is the typographer’s normal aim.”
— robert bringhurst, the elements of typographic style

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
Baseline grids
* Establish a typographic grid as part of your design
* Select an appropriate baseline value, generally
matching the line-height of your body copy
* Derive margins and leading for other elements
as multiples of this baseline value
* Image dimensions can be made to fit the grid also
* An admirable goal, but not always achievable

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
ExAmPlE Of A BAsElinE GRid
* 11-pixel body text with 16 pixels of leading (11/16)
* Headings at 24/32
* Sub-headings at 13/16 with 8 pixels
of margin above and below
* Sidebar copy at 10/16
* Paragraphs and lists with 8 pixel margin below

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
REsETTinG BROWsER dEfAUlTs
* Reset all browser margins/padding to zero
* “perfectdependence on defaults and creates
Breaks
knowledge” about your styles
* “Reset Reloaded” by Eric Meyer
meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
* YUI (Yahoo! User Interface) Reset
developer.yahoo.com/yui/reset/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
REsOURcEs — BAsElinE GRids
* “Setting Type on the Web” by Wilson Miner
www.alistapart.com/articles/settingtypeontheweb/
* “Compose to a Vertical Rhythm” by Richard Rutter
24ways.org/2006/compose-to-a-vertical-rhythm/
* Syncotype by Rob Goodlatte
robgoodlatte.com/2007/07/31/syncotype-your-baselines/
* Vertical Rhythm Calculator
drewish.com/tools/vertical-rhythm/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
Example baseline
grid from “Setting
Type on the Web”
by Wilson Miner
alistapart.com

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
REsOURcEs — TYPOGRAPHic GRids
* “Gridding the 960” by Cameron Moll
cameronmoll.com/archives/2006/12/gridding_the_960/
* CSS Grid Calculator
www.29digital.net/grid/
* Blueprint CSS Framework by Olav Bjørkøy
code.google.com/p/blueprintcss/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
29 Digital’s CSS
Grid Calculator
www.29digital.net/grid/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
REsOURcEs — fURTHER REAdinG
* Read Mark Boulton, Khoi Vinh et al for more
on horizontal and vertical rhythm:
www.markboulton.co.uk/journal/comments/five_
simple_steps_to_designing_grid_systems_part_1/
www.subtraction.com/archives/2007/0318_oh_yeeaahh.php
webtypography.net

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
Entities
* Some typographic elements you may
be familiar with from the web:
'\"-

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
* Those are “primes” and the “hyphen”
* Often used when typographer’s quote marks
or a dash would be more appropriate:
‘’“”–—

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
* Examples: “Quoted text” 6' 10\" 6:00–7:00am
Phrase break – with spaces—or without
Catherine Zeta-Jones 10−2=8
* Convention changing as resolution increases
* Use the correct entity notation where possible
www.cookwood.com/html/extras/entities.html
* Work best with UTF-8 page encoding

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
nAmEd And dEcimAl EnTiTiEs
“ opening double quote &ldquo; &#8220;
” closing double quote &rdquo; &#8221;
‘ opening single quote &lsquo; &#8216;
’ closing single quote &rsquo; &#8217;
– en dash &ndash; &#8211;
— em dash &mdash; &#8212;
− minus &minus; &#8722;
× multiplication symbol &times; &#215;
© copyright symbol &copy; &#169;
™ trademark symbol &trade; &#8482;
… (horizontal) ellipsis &hellip; &#8230;

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
UsEfUl TOOls
* SmartyPants and Textile plugins
daringfireball.net/projects/smartypants/
textism.com/tools/textile/
* Typogrify for Django
code.google.com/p/typogrify/
* “The trouble with EM ’n EN” by Peter K Sheerin
www.alistapart.com/articles/emen/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
fROm THE smARTYPAnTs mAnUAl
* “curly” quote HTML entities
Straight quotes ( \" and ' ) into
* Backticks-style quotes ( `` like this ' ' )
into “curly” quote HTML entities
* Dashes ( -- and --- ) into en- and em-dash entities
* Three consecutive dots ( ... ) into an ellipsis entity

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
“Because proper typographic
punctuation looks sharp.”
— john gruber, creator of smartypants

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
Ampersands
* Elements of Typographic Style 5.1.3: “In heads
and titles, use the best available ampersand.”
* SimpleBits specifies italic versions of Baskerville,
Goudy Old Style, Palatino and Book Antiqua
www.simplebits.com

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
SimpleBits ampersand: <span class=\"amp\">&amp;</span>
span.amp { font-family: Baskerville, \"Goudy Old Style\",
\"Palatino\", \"Book Antiqua\", serif; }

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
Typefaces
* Client-side rendering means fonts must be
installed on target computer for HTML pages
* Common web faces are designed for the medium
* Make deliberate choices for your defaults
* Specify common system fonts such as
Helvetica Neue (comes with OS X)

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
cOmmOn issUEs
* Font stacks only specify a single size for all faces
* Arial and Verdana not a good typographic match
* The default font stack from applications
such as Dreamweaver includes both
Arial Verdana
Arial is visually more compact than Verdana

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
nEW OPTiOns — visTA fOnTs
* New fonts included with Windows Vista OS
* Ligatures, lining figures
* Size issues, better match with Arial than Verdana
* withoutfor ClearType, look awful
Tuned
anti-aliasing

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TYPOGRAPHic TEcHniqUE
visTA fOnTs & GOOd mATcHEs
Calibri Arial
Myriad
Corbel
Cambria Georgia
Verdana
Candara
Palatino, Book Antiqua
Constantia
Consolas Andale Mono

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TRicks & TREATs
* Negative text indent – image replacement technique
by Mike Rundle, based on an idea by Todd Fahrner
h1 { text-indent: -999em; overflow: hidden; }
* sIFR for headings – unobtrusive JavaScript Flash
replacement technique by Mike Davidson and Mark
Wubben, based on an idea by Shaun Inman
www.mikeindustries.com/sifr/

august af bjjg
WEB TYPOGRAPHY auckland web meetup
TRicks & TREATs
* TextPattern, Joomla, evenInman for WordPress,
Widon’t plugin by Shaun
SlideShowPro!
www.shauninman.com/archive/2007/01/03/
widont_2_1_wordpress_plugin/
* Use color: #333; for dark text on a light background
and color: #ccc; for light text on a dark background
* Don’t justify without reason until support for automatic
hyphenation and resolution-independence improves

august af bjjg
WEB TYPOGRAPHY auckland web meetup
THE End
“95% of information on the web is written
language. It is only logical … that a web
designer should get good training in
the main discipline of shaping written
information, in other words: Typography.”
— oliver reichenstein