Upload
christy-gurga
View
3.682
Download
1
Tags:
Embed Size (px)
Citation preview
Typography for the WebChristy Gurga, @christyyyjoytheMechanism16 April 2009
Typography for the Web, @christyyyjoy
Building a foundation
Formatting headings
Noticing the details
Typography for the Web, @christyyyjoy
Building a foundationFont-family stacksRelative font sizesTypographic scalesBaseline grids
Typography for the Web, @christyyyjoy
Building a foundation
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
+
-
Typography for the Web, @christyyyjoy
Building a foundation
Font-family stacksSimple sans-serif stack:
body { font-family: Verdana, “Verdana Ref”, Arial, sans-serif;}
Typography for the Web, @christyyyjoy
Building a foundation
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/
Typography for the Web, @christyyyjoy
Building a foundation
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.
Typography for the Web, @christyyyjoy
Building a foundation
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
++--
Typography for the Web, @christyyyjoy
Building a foundation
Relative font sizes
body { font-size: 62.5%;}
16px * .625 = 10px
10px = 1em
Typography for the Web, @christyyyjoy
Building a foundation
Relative font sizes
p { font-size: 1.4em;}
1em = 10px
1.4em = 14px
Typography for the Web, @christyyyjoy
Building a foundation
Relative font sizes
Resource: http://pxtoem.com/
Typography for the Web, @christyyyjoy
Building a foundation
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
Typography for the Web, @christyyyjoy
Building a foundation
Relative font sizesli li { font-size: 1em;}
<ul> <li>Item One <ul> <li>Subitem One</li> </ul> </li></ul>
1.4em
1.4em * 1em
Typography for the Web, @christyyyjoy
Building a foundation
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
++
Typography for the Web, @christyyyjoy
Building a foundation
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;}
Typography for the Web, @christyyyjoy
Building a foundation
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.
Typography for the Web, @christyyyjoy
Building a foundation
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
++
--
Typography for the Web, @christyyyjoy
Building a foundation
Baseline grids
Resource: http://alistapart.com/d/settingtypeontheweb/example_grid.html
Typography for the Web, @christyyyjoy
Building a foundation
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
Typography for the Web, @christyyyjoy
Building a foundation
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
Typography for the Web, @christyyyjoy
Building a foundation
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.
Typography for the Web, @christyyyjoy
Formatting headingsImage replacementFLIRsIFRCufón@font-face
Typography for the Web, @christyyyjoy
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
-
Typography for the Web, @christyyyjoy
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.
Typography for the Web, @christyyyjoy
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
Typography for the Web, @christyyyjoy
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/
Typography for the Web, @christyyyjoy
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 } } });
Typography for the Web, @christyyyjoy
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
Typography for the Web, @christyyyjoy
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/
Typography for the Web, @christyyyjoy
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;}
Typography for the Web, @christyyyjoy
Noticing the detailsCreative CSS attributesElegant paragraph styles
Typography for the Web, @christyyyjoy
Noticing the details
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.
Typography for the Web, @christyyyjoy
Noticing the details
Creative CSS attributes2. max-width (line length)
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 { 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
Typography for the Web, @christyyyjoy
Noticing the details
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!
Typography for the Web, @christyyyjoy
Noticing the details
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
Typography for the Web, @christyyyjoy
Noticing the details
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.
Typography for the Web, @christyyyjoy
Noticing the details
Elegant paragraph styles1. Default browser style
Flush left, ragged right. 1em leading, 1em boundary.
Resource: http://jontangerine.com/silo/typography/p/
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.
Typography for the Web, @christyyyjoy
Noticing the details
Elegant paragraph styles2. Two em indent with no boundary, justified
Resource: http://jontangerine.com/silo/typography/p/
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;}
Typography for the Web, @christyyyjoy
Noticing the details
Elegant paragraph styles3. Drop cap, bold small caps opening, justified
Resource: http://jontangerine.com/silo/typography/p/
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.
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: 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
Typography for the Web, @christyyyjoy
Noticing the details
Elegant paragraph styles
Resource: http://jontangerine.com/silo/typography/p/
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.
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 + 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
Typography for the Web, @christyyyjoy
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