Typography For The Web

  • 3,522 views
Uploaded on

Christy Gurga (theMechanism) presents different perspectives on formatting type online and demonstrate methods you can use right away. While only basic CSS knowledge is required, Christy covers …

Christy Gurga (theMechanism) presents different perspectives on formatting type online and demonstrate methods you can use right away. While only basic CSS knowledge is required, Christy covers advanced techniques that are applicable for front-end developers of any level.

You'll learn how to establish the CSS foundation for your type using relative font sizes and ems, implement text replacement practices for specially formatted headings and polish your typography with extra detail.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,522
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
105
Comments
1
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Typography for the Web Christy Gurga, @christyyyjoy theMechanism 16 April 2009
  • 2. Building a foundation Formatting headings Noticing the details Typography for the Web, @christyyyjoy
  • 3. Building a foundation Font-family stacks Relative font sizes Typographic scales Baseline grids Typography for the Web, @christyyyjoy
  • 4. Building a foundation 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 Typography for the Web, @christyyyjoy
  • 5. Building a foundation Font-family stacks Simple sans-serif stack: body { font-family: Verdana, “Verdana Ref”, Arial, sans-serif; } Typography for the Web, @christyyyjoy
  • 6. Building a foundation 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/
  • 7. Building a foundation 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
  • 8. Building a foundation 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 Typography for the Web, @christyyyjoy
  • 9. Building a foundation Relative font sizes body { font-size: 62.5%; } 16px * .625 = 10px 10px = 1em Typography for the Web, @christyyyjoy
  • 10. Building a foundation Relative font sizes p{ font-size: 1.4em; } 1em = 10px 1.4em = 14px Typography for the Web, @christyyyjoy
  • 11. Building a foundation Relative font sizes Typography for the Web, @christyyyjoy Resource: http://pxtoem.com/
  • 12. Building a foundation 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> Typography for the Web, @christyyyjoy
  • 13. Building a foundation 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> Typography for the Web, @christyyyjoy
  • 14. Building a foundation 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 Typography for the Web, @christyyyjoy
  • 15. Building a foundation 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
  • 16. Building a foundation 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
  • 17. Building a foundation 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 Typography for the Web, @christyyyjoy
  • 18. Building a foundation Baseline grids Typography for the Web, @christyyyjoy Resource: http://alistapart.com/d/settingtypeontheweb/example_grid.html
  • 19. Building a foundation 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; } Typography for the Web, @christyyyjoy
  • 20. Building a foundation 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; } Typography for the Web, @christyyyjoy
  • 21. Building a foundation Baseline grids img { 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
  • 22. Formatting headings Image replacement FLIR sIFR Cufón @font-face Typography for the Web, @christyyyjoy
  • 23. 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 Typography for the Web, @christyyyjoy
  • 24. 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. Typography for the Web, @christyyyjoy
  • 25. 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
  • 26. 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 + 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/
  • 27. 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/
  • 28. 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 + 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
  • 29. 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/
  • 30. Formatting headings @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 Resource: http://www.css3.info/preview/web-fonts-with-font-face/
  • 31. Noticing the details Creative CSS attributes Elegant paragraph styles Typography for the Web, @christyyyjoy
  • 32. Noticing the details Creative CSS attributes 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. Typography for the Web, @christyyyjoy
  • 33. Noticing the details Creative CSS attributes 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. Typography for the Web, @christyyyjoy
  • 34. Noticing the details Creative CSS attributes 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! Typography for the Web, @christyyyjoy
  • 35. Noticing the details Creative CSS attributes 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 Typography for the Web, @christyyyjoy
  • 36. Noticing the details Creative CSS attributes 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/
  • 37. Noticing the details Elegant paragraph styles 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. Typography for the Web, @christyyyjoy Resource: http://jontangerine.com/silo/typography/p/
  • 38. Noticing the details Elegant paragraph styles 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 Pointing has no control about the blind texts it is an almost p+p{ unorthographic life One day however a small line of blind text-indent: 2em; 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 Resource: http://jontangerine.com/silo/typography/p/
  • 39. Noticing the details Elegant paragraph styles 3. Drop cap, bold small caps opening, justified F p{ ar far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind 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%; river named Duden flows by their place and supplies it with margin-bottom: 1.4em; the necessary regelialia. text-align: justify; 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 p:first-letter { far World of Grammar. float: left; The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and font-size: 5.32em; devious Semikoli, but the Little Blind Text didn’t listen. She font-weight: bold; packed her seven versalia, put her initial into the belt and made herself on the way. line-height: 1em; margin-right: .2em; } Typography for the Web, @christyyyjoy Resource: http://jontangerine.com/silo/typography/p/
  • 40. Noticing the details Elegant paragraph styles 3. Drop cap, bold small caps opening, justified F p + p:first-letter { ar far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind float: none; texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small font-size: 1em; river named Duden flows by their place and supplies it with font-weight: normal; the necessary regelialia. line-height: 120%; It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful margin-right: 0; 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 p:first-line { far World of Grammar. font-variant: small-caps; The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and font-weight: bold; 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-line { font-variant: normal; font-weight: normal; } Typography for the Web, @christyyyjoy Resource: http://jontangerine.com/silo/typography/p/
  • 41. 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, @christyyyjoy