Typography For The Web

Typography for the WebChristy Gurga, @christyyyjoytheMechanism16 April 2009

Typography for the Web, @christyyyjoy

Building a foundation

Formatting headings

Noticing the details


Building a foundationFont-family stacksRelative font sizesTypographic scalesBaseline grids



Font-family stacksMultiple 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 stacksSimple sans-serif stack:

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



Font-family stacksComplex 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;

}

Resource: http://sitepoint.com/article/eight-definitive-font-stacks/2/



Font-family stacksA quick note about using Helvetica in your font stack:

Image: http://drupal.org/node/321896

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.



Relative font sizesFont 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

Resource: http://pxtoem.com/



Relative font sizesli { font-size: 1.4em;}

<ul> <li>Item One <ul> <li>Subitem One</li> </ul> </li></ul>

1.4em

1.4em * 1.4em



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

<ul> <li>Item One <ul> <li>Subitem One</li> </ul> </li></ul>

1.4em

1.4em * 1em



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

Creates harmony and balance among headings and body type

Established by typographers in the 16th century

++



Typographic scalesab ab ab ab ab ab ab ab ab ab ab ab ab ab ab ab6 87 9 10 11 12 14 16 18 21 24 36 48 60 72

Resource: http://www.retinart.net/typography/typographicscale

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



Typographic scalesab ab ab ab ab ab ab ab ab ab ab ab ab ab ab ab6 87 9 10 11 12 13 15 18 21 24 27 36 42 60

Resource: http://www.retinart.net/typography/typographicscale

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



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

Consistent vertical spacing across related columns

Creates vertical rhythm between headings & body

Not necessary for unrelated columns

More of a print technique

++

--



Baseline grids

Resource: http://alistapart.com/d/settingtypeontheweb/example_grid.html



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

CSS reset

target ÷ font-size1.8em ÷ 1.4em



Baseline gridsh1 { font-size: 3.6em; line-height: .5em; margin: .5em 0; } h2 { font-size: 2.4em; line-height: .75em; margin: .75em 0; }

1.8em ÷ 3.6em

1.8em ÷ 2.4em



Baseline gridsimg { border: 1px solid #333; margin-bottom: 1.8em; 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 headingsImage replacementFLIRsIFRCufón@font-face


Formatting headings

Image replacementA 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 will be displayed if CSS is on but images are turned off

-


Formatting headings

Image replacementh2.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+

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

+/-

Requires PHP and the GD library+/-

If images are turned off, text will be displayed+

Must upload fonts to the server-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.

Dynamically replace text—easy to change headings+Ability to highlight & copy text+

Complex configuration, poor documentation-Longer loading times because of Flash-

Degrades gracefully with CSS formatting+Doesn’t require font file to be uploaded to server+

Resource: http://wiki.novemberborn.net/sifr/


Formatting headings

sIFR (scalable Inman Flash Replacement)

Resource: http://wiki.novemberborn.net/sifr/

sIFR.replace( delicious, { selector: ‘h1’, css: ‘.sIFR-root { color: #00a1ac; }’, filters: { DropShadow: { distance: 1 ,color: ‘#000000’ ,strength: 2 ,alpha: 1 ,blurX: 0 ,blurY: 0 } } });


Formatting headings

Cufón (Custom Fonts)

A Javascript technique to replace text on the canvas element as the page loads.

Dynamically replace text—easy to change headings+Degrades gracefully with CSS formatting+

Text selection is invisible, but text can be copied-

Faster loading times than sIFR+Fast configuration+

Resource: http://wiki.github.com/sorccu/cufon


Formatting headings

@font-faceA 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!+

Only supported in Safari 3.1, will be supported in next version of Firefox (3.5)

-May break EULAs because font must be uploaded-

Resource: http://www.css3.info/preview/web-fonts-with-font-face/


Formatting headings

@font-face

Resource: http://www.css3.info/preview/web-fonts-with-font-face/

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


Noticing the detailsCreative CSS attributesElegant paragraph styles



Creative CSS attributes1. line-height (leading)

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.

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 { line-height: normal; } p { line-height: 140%; }

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



Creative CSS attributes2. max-width (line length)



p { max-width: 100%; }

p { max-width: 42em; }

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.

1.4em * 30 = 42em

Average: 57 characters per line



Creative CSS attributes3. letter-spacing (tracking)

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

Welcome!

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

Welcome!



Creative CSS attributes4. text-shadow

Specify color, x-offset (relative to text), y-offset (relative to text), blur radius. Only renders in Safari, Opera, & Konqueror.

h1 { text-shadow: -1px 1px 3px #F3F3F3;}h1 { text-shadow: -1px -1px white, 1px 1px #333;}

Soft blur

Multiple shadows for bevel effect



Creative CSS attributes5. Custom bullet points

Replace a bullet point with the image of your choice.

Resource: http://jontangerine.com/silo/typography/p/

#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.



Elegant paragraph styles1. 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.



Elegant paragraph styles2. Two em indent with no boundary, justified


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.

p { font-size: 1.4em; line-height: 140%; margin-bottom: 0; text-align: justify;}

p + p { text-indent: 2em;}



Elegant paragraph styles3. Drop cap, bold small caps opening, justified


ar 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.



p { font-size: 1.4em; line-height: 120%; margin-bottom: 1.4em; text-align: justify;}

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

F



Elegant paragraph styles


ar 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.



p + p:first-letter { float: none; 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;}

F3. Drop cap, bold small caps opening, justified


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

Body type has been set in Matthew Carter’s Verdana

Continue the conversation!NY Web Standards email list

@nywebstandards on Twitter

theMechanism Blog

Typography For The Web

Design

Transcript of Typography For The Web