Typography For The Web

Typography for the Web
Christy Gurga, @christyyyjoy
theMechanism
16 April 2009

Building a foundation
Formatting headings
Noticing the details

Typography for the Web, @christyyyjoy

Font-family stacks
Relative font sizes
Typographic scales
Baseline grids



Font-family stacks
Multiple values for the CSS attribute font-
family. Browser will render the first font
that is available on the system.

+ Each user will see the typeface best optimized for
his/her system

- Designer must make sure the site looks good with
each font choice



Font-family stacks
Simple sans-serif stack:

body {
font-family: Verdana, “Verdana Ref”,
Arial, sans-serif;
}



Font-family stacks
Complex sans-serif stack:
body {
font-family: Corbel, “Lucida Grande”,
“Lucida Sans Unicode”, “Lucida Sans”,
“DejaVu Sans”, “Bitstream Vera Sans”,
“Liberation Sans”, Verdana, “Verdana
Ref”, sans-serif;
}

Typography for the Web, @christyyyjoy Resource: http://sitepoint.com/article/eight-definitive-font-stacks/2/


Font-family stacks
A quick note about using Helvetica in
your font stack:
Don’t do it.
I’ve read many accounts from Windows Firefox
users (a large percentage) that Helvetica
doesn’t render well in the browser; there are
major kerning issues.

Typography for the Web, @christyyyjoy Image: http://drupal.org/node/321896


Relative font sizes
Font sizes specified in ems instead of
pixels, points, or small/large. Fonts render
relatively to the default browser size.

+ Ability to set type in a fluid, expandable manner
+ Precision of working with specific units
- A bit of a learning curve
- Cascade issues


Relative font sizes
body {
font-size: 62.5%;
}

16px * .625 = 10px

10px = 1em



Relative font sizes
p{
font-size: 1.4em;
}

1em = 10px

1.4em = 14px



Relative font sizes

Typography for the Web, @christyyyjoy Resource: http://pxtoem.com/


Relative font sizes
li {
font-size: 1.4em;
}

<ul>
1.4em
<li>Item One
<ul>
<li>Subitem One</li> 1.4em * 1.4em
</ul>
</li>
</ul>



Relative font sizes
li li {
font-size: 1em;
}

<ul>
1.4em
<li>Item One
<ul>
<li>Subitem One</li> 1.4em * 1em
</ul>
</li>
</ul>



Typographic scales
An established set of font sizes that should
be used within a document, instead of using
random font sizes.

+ Established by typographers in the 16th century
+ Creates harmony and balance among headings
and body type



Typographic scales
ab ab
ab
ab
ab
ab ab
ab ab
ab ab ab
ab ab
ab ab

6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72

p{
font-size: 1.4em;
}
h1 {
font-size: 3.6em;
}
h2 {
font-size: 2.4em;
}

Typography for the Web, @christyyyjoy Resource: http://www.retinart.net/typography/typographicscale


Typographic scales
ab
ab ab
ab ab
ab ab
ab ab
ab ab ab
ab ab
ab ab

6 7 8 9 10 11 12 13 15 18 21 24 27 36 42 60

Should you choose to break this rule, do it
right! Create your own typographic scale,
and then stick to it.

Typography for the Web, @christyyyjoy Resource: http://www.retinart.net/typography/typographicscale


Baseline grids
Consistent value of vertical space (border,
line-height, margin, & padding) so that
baselines align across multiple columns.

+ Creates vertical rhythm between headings & body
+ Consistent vertical spacing across related columns
- Not necessary for unrelated columns
- More of a print technique


Baseline grids

Typography for the Web, @christyyyjoy Resource: http://alistapart.com/d/settingtypeontheweb/example_grid.html


Baseline grids
* { margin: 0; padding: 0; } CSS reset
p, li {
target ÷ font-size
font-size: 1.4em;
1.8em ÷ 1.4em
line-height: 1.286em;
margin-bottom: 1.8em;
}
ul {
margin: 1.8em 0 1.8em 1.8em;
}



Baseline grids
h1 {
font-size: 3.6em; 1.8em ÷ 3.6em
line-height: .5em;
margin: .5em 0;
}
h2 {
font-size: 2.4em; 1.8em ÷ 2.4em
line-height: .75em;
margin: .75em 0;
}



Baseline grids
img {
border: 1px solid #333;
padding: .8em .4em;
}

Images should be created to already fit into your
grid (height in multiples of 18). Use margins
and padding to give them appropriate space. To
compensate for a 1px border, use .2 less em in
your calculations.


Formatting headings
Image replacement
FLIR
sIFR
Cufón
@font-face

Formatting headings

Image replacement
A designed, static graphic in the place of
browser text.

+ No Javascript required
- Need a separate image for each heading & change
- Cannot highlight & copy text
- Cannot resize on text zoom only
- Nothing willoff displayed if CSS is on but images
be
are turned


Formatting headings

Image replacement
h2.chapter-six {
background: url(images/h2-chapter-six.
png) 0 0 no-repeat;
height: 37px;
text-indent: -9999px;
width: 458px;
}

You will have to specify text-align: left; if a different
value has been set.

Text-indent values larger than -9999px or -999em may
be ignored by the browser.


Formatting headings

FLIR (FaceLift Image Replacement)
A Javascript and PHP technique to replace
text with images as the page loads.

+ Dynamically replace text—easy to change headings

+ If images are turned off, text will be displayed

+/- Highlighting & copying text will use ALT attribute in FF,
other plugins available

+/- Requires PHP and the GD library

- Must upload fonts to the server

Typography for the Web, @christyyyjoy Resource: http://facelift.mawhorter.net

Formatting headings

sIFR (scalable Inman Flash Replacement)
A Flash and Javascript technique to replace
text with Flash objects as the page loads.

+ Ability to highlight & copy text
+ Degrades gracefully with CSS formatting
+ Doesn’t require font file to be uploaded to server
- Complex configuration, poor documentation
- Longer loading times because of Flash
Typography for the Web, @christyyyjoy Resource: http://wiki.novemberborn.net/sifr/

Formatting headings

sIFR (scalable Inman Flash Replacement)
sIFR.replace( delicious, {
selector: ‘h1’,
css: ‘.sIFR-root { color: #00a1ac; }’,
filters: {
DropShadow: {
distance: 1
,color: ‘#000000’
,strength: 2
,alpha: 1
,blurX: 0
,blurY: 0
}
}
});
Typography for the Web, @christyyyjoy Resource: http://wiki.novemberborn.net/sifr/

Formatting headings

Cufón (Custom Fonts)
A Javascript technique to replace text on the
canvas element as the page loads.
+ Degrades gracefully with CSS formatting
+ Faster loading times than sIFR
+ Fast configuration
- Text selection is invisible, but text can be copied
Typography for the Web, @christyyyjoy Resource: http://wiki.github.com/sorccu/cufon

Formatting headings

@font-face
A CSS2 attribute that is being improved for
CSS3 & implemented in a wider range of
browsers. Allows usage of any font!

+ Actual font renders in browser natively!
- May break EULAs because font must be uploaded
- Only version of Firefox (3.5) will be supported in
supported in Safari 3.1,
next

Typography for the Web, @christyyyjoy Resource: http://www.css3.info/preview/web-fonts-with-font-face/

Formatting headings

@font-face
@font-face {
font-family: Delicious;
src: url(‘fonts/Delicious-Roman.otf’);
}
@font-face {
font-weight: bold;
src: url(‘fonts/Delicious-Bold.otf’);
}
h1 {
}

Typography for the Web, @christyyyjoy Resource: http://www.css3.info/preview/web-fonts-with-font-face/

Creative CSS attributes
Elegant paragraph styles



1. line-height (leading)
Can use a specific value (pixels) or a percentage (%
or em) of the font-size.

p { line-height: normal; } p { line-height: 140%; }
When she reached the first hills of the Italic When she reached the first hills of the Italic
Mountains, she had a last view back on the Mountains, she had a last view back on the
skyline of her hometown Bookmarksgrove,
skyline of her hometown Bookmarksgrove,
the headline of Alphabet Village and the
subline of her own road, the Line Lane. the headline of Alphabet Village and the
Pityful a rethoric question ran over her
subline of her own road, the Line Lane.
cheek, then she continued her way.
Pityful a rethoric question ran over her
cheek, then she continued her way.



2. max-width (line length)
Columns are most readable at 40-80 characters per
line. Multiply your font-size by 30 to begin finding
the ideal length. Ignored by IE 6.
p { max-width: 100%; }
When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown
Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric
question ran over her cheek, then she continued her way.

p { max-width: 42em; } 1.4em * 30 = 42em
When she reached the first hills of the Italic Mountains,
Average: 57 characters per line
she had a last view back on the skyline of her hometown
Bookmarksgrove, the headline of Alphabet Village and the
subline of her own road, the Line Lane. Pityful a rethoric
question ran over her cheek, then she continued her way.



3. letter-spacing (tracking)
Use a specific value (in pixels or ems). Negative
letter-spacing permitted.

h1 { letter-spacing: normal; } h1 { letter-spacing: 2px; }

Welcome! Welcome!



4. text-shadow
Specify color, x-offset (relative to text), y-offset
(relative to text), blur radius. Only renders in Safari,
Opera, & Konqueror.
h1 {
Soft blur
text-shadow: -1px 1px 3px #F3F3F3;
}
h1 {
text-shadow: -1px -1px white, 1px 1px #333; Multiple
}
shadows for
bevel effect



5. Custom bullet points
Replace a bullet point with the image of your choice.

#col2 ul {
list-style-type: disc;
list-style-image: url(images/arrow.png);
}

Supply a back-up in case the browser
doesn’t support it, and then specify your
image location.

Typography for the Web, @christyyyjoy Resource: http://jontangerine.com/silo/typography/p/


1. Default browser style
Flush left, ragged right. 1em leading, 1em boundary.

Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the
coast of the Semantics, a large language ocean. A small
river named Duden flows by their place and supplies it with
the necessary regelialia.

It is a paradisematic country, in which roasted parts of
sentences fly into your mouth. Even the all-powerful
Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind
text by the name of Lorem Ipsum decided to leave for the
far World of Grammar.

The Big Oxmox advised her not to do so, because there
were thousands of bad Commas, wild Question Marks and
devious Semikoli, but the Little Blind Text didn’t listen. She
packed her seven versalia, put her initial into the belt and
made herself on the way.



2. Two em indent with no boundary, justified
p{
Far far away, behind the word mountains, far from the

font-size: 1.4em;
countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of
line-height: 140%;
the Semantics, a large language ocean. A small river named
margin-bottom: 0;
Duden flows by their place and supplies it with the necessary
text-align: justify;
regelialia.

}
It is a paradisematic country, in which roasted parts
of sentences fly into your mouth. Even the all-powerful
p+p{
text-indent: 2em;

}



3. Drop cap, bold small caps opening, justified

F p{
ar far away, behind the word mountains, far from the
font-size: 1.4em;
texts. Separated they live in Bookmarksgrove right at
the coast of the Semantics, a large language ocean. A small
line-height: 120%;

text-align: justify;
}
p:first-letter {

float: left;
font-size: 5.32em;
font-weight: bold;
line-height: 1em;
margin-right: .2em;
}



3. Drop cap, bold small caps opening, justified

F p + p:first-letter {
ar far away, behind the word mountains, far from the
float: none;
texts. Separated they live in Bookmarksgrove right at
the coast of the Semantics, a large language ocean. A small
font-size: 1em;
font-weight: normal;

line-height: 120%;
margin-right: 0;
}
p:first-line {

font-variant: small-caps;
font-weight: bold;
}
p + p:first-line {
font-variant: normal;
font-weight: normal;
}

Continue the conversation!
NY Web Standards email list
@nywebstandards on Twitter
theMechanism Blog

Body type has been set in Matthew Carter’s Verdana

Heading type has been set in Delicious, a free font by Jos Buivenga
http://www.josbuivenga.demon.nl/delicious.html


Typography For The Web

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to Typography For The Web

Similar to Typography For The Web (20)

Recently uploaded

Recently uploaded (20)

Typography For The Web