Web typography
Upcoming SlideShare
Loading in...5
×
 

Web typography

on

  • 2,180 views

Type basics and the CSS selectors that control them.

Type basics and the CSS selectors that control them.

Statistics

Views

Total Views
2,180
Views on SlideShare
1,657
Embed Views
523

Actions

Likes
1
Downloads
68
Comments
0

2 Embeds 523

http://lendegroot.com 521
http://paper.li 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web typography Web typography Presentation Transcript

    • T H Y A P G What does it sayR O about you? P T Y IG N E S D & BY LEN D E G RO OT Tuesday, October 12, 2010
    • Anatomy BASELINE Hlgx Tuesday, October 12, 2010
    • Anatomy CAP HEIGHT Hlgx Tuesday, October 12, 2010
    • Anatomy ASCENDER Hlgx Tuesday, October 12, 2010
    • Anatomy DESCENDER Hlgx Tuesday, October 12, 2010
    • Anatomy X HEIGHT Hlgx Tuesday, October 12, 2010
    • Anatomy a . . . . Quick Reference Ascender Handglovery Stem Terminal Ear Bowl Eye Shoulder Serif - - Crossbar Counter Aperture Bracket Axis Overshoot Link/Neck Loop/Lobe Tail Descender Typeface The upward vertical stem on some An imaginary line drawn from top to The curved part of the character that lowercase letters, such as ‘h’ and ‘b’, that bottom of a glyph bisecting the upper and encloses the circular or curved parts Anatomy extends above the x-height is the lower strokes is the axis. (counter) of some letters such as ‘d’ ‘b’, ‘o’, , ascender. ‘D’, and ‘B’ is the bowl. The imaginary line upon which the letters CREDIT: FontShop.com The aperture is the partially enclosed, in a font appear to rest. The bracket is a curved or wedge-like somewhat rounded negative space in connection between the stem and serif — Basic parts some characters such as ‘n’, ‘C’, ‘S’, the of some fonts. Not all serifs are lower part of ‘e’, or the upper part of a bracketed serifs. Tuesday, October 12, 2010typeface of a double-storey ‘a’.
    • Anatomy SERIFS Hlgx Tuesday, October 12, 2010
    • Anatomy SANS SERIF Hlgx Tuesday, October 12, 2010
    • Anatomy SANS (STYLIZED) Hlgx Tuesday, October 12, 2010
    • Anatomy WEIGHT (NORMAL - 400) Hlgx p{ font-weight: normal 100, 200, 300, 400, 500, 600, 700, 800, 900 } Tuesday, October 12, 2010
    • Anatomy WEIGHT (BOLD - 700) Hlgx p{ font-weight: bold 100, 200, 300, 400, 500, 600, 700, 800, 900 } Tuesday, October 12, 2010
    • Anatomy WEIGHT (OTHER) 100 = thin p{ 200 = extra-light font-weight: 300; 300 = light } 400 = normal, book 500 = medium p {font-weight: bolder} 600 = demi-bold p {font-weight: lighter} 700 = bold 800 = heavy 900 = black Tuesday, October 12, 2010
    • Anatomy STYLE (OBLIQUE) Hlgx p{ font-style: oblique } Tuesday, October 12, 2010
    • Anatomy STYLE (OBLIQUE) p{ font-style: oblique } Tuesday, October 12, 2010
    • Anatomy STYLE (ITALIC) Hlgx p{ font-style: italic } Tuesday, October 12, 2010
    • Readability LETTER SPACING (KERINING) Hlgx Tuesday, October 12, 2010
    • Readability LETTER SPACING (KERINING) OVEN Tuesday, October 12, 2010
    • Readability LETTER SPACING (KERINING) OVEN Tuesday, October 12, 2010
    • Readability LETTER SPACING (TRACKING) Hlgx Tuesday, October 12, 2010
    • Readability LETTER SPACING (TRACKING) oven Tuesday, October 12, 2010
    • Readability LETTER SPACING (TRACKING) oven Tuesday, October 12, 2010
    • Readability LETTER SPACING (TRACKING) h1 { oven letter-spacing: -3px; } Tuesday, October 12, 2010
    • Readability WORD SPACING Turn off the oven p{ word-spacing: 10px; } Tuesday, October 12, 2010
    • Readability WORD SPACING Turn off the oven Turn off the oven Tuesday, October 12, 2010
    • Readability WORD SPACING Turn off the oven Turn off the oven Turn off the oven p {word-spacing: 10px;} Tuesday, October 12, 2010
    • Readability LIGATURES Turn off the oven Tuesday, October 12, 2010
    • Readability LIGATURES Turn off the oven Tuesday, October 12, 2010
    • Readability LIGATURES Turn off the oven Turn off the oven Tuesday, October 12, 2010
    • Readability MONOSPACED (EM) Courier ham Tuesday, October 12, 2010
    • Readability SIZE (EM) size size size size size size size size .75 1.0 1.25 1.5 2.0 3.0 4.0 5.0 h1 { font-size: 2.5 em; } /* 40px/16=2.5em */ h2 { font-size: 1.875 em; } /* 30px/16=1.875em */ Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ font-size: 16px; line-height: 20px; } Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
    • Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
    • Readability VERTICAL SPACING (PARAGRAPH) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
    • Readability VERTICAL SPACING (PARAGRAPH) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p{ margin-bottom: 20px; } Tuesday, October 12, 2010
    • Readability VERTICAL SPACING (BASELINE GRID) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. reprehenderit in voluptate velit. GOOD BAD Tuesday, October 12, 2010
    • Readability VERTICAL SPACING (BASELINE GRID) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do body{ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut font-size: 13px; aliquip ex ea commodo consequat. Duis aute irure dolor in line-height: 15px; reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in } culpa qui officia deserunt mollit anim id est laborum. p{ Lorem ipsum dolor margin-bottom: 15px; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim } ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. h3 { font-size: 15px; line-height: 20px; GOOD margin-bottom: -5px; } Tuesday, October 12, 2010
    • Readability COLUMN WIDTH (620 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. TOO WIDE Tuesday, October 12, 2010
    • Readability COLUMN WIDTH (620 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. TOO WIDE Tuesday, October 12, 2010
    • Readability COLUMN WIDTH (420 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut GOOD Tuesday, October 12, 2010
    • Readability COLUMN WIDTH (80 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in TOO NARROW Tuesday, October 12, 2010
    • Readability INDENTS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-indent:30px; } Tuesday, October 12, 2010
    • Readability ALIGNMENT (FLUSH LEFT) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. DEFAULT Tuesday, October 12, 2010
    • Readability ALIGNMENT (CENTERED) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: center; } Tuesday, October 12, 2010
    • Readability ALIGNMENT (FLUSH RIGHT) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: right; } Tuesday, October 12, 2010
    • Readability ALIGNMENT (JUSTIFIED) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: justify; } Tuesday, October 12, 2010
    • Readability LINKS “ Lorem ipsum doloj sit game, consectetur “Lorem ipsum doloj sit game, consectetur adipisicing elit, sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. deserunt mollit anim id est laborum.” GOOD BAD Tuesday, October 12, 2010
    • Readability ALL CAPS ALL CAPS TYPE CAN ADD EMPHASIS. BUT TOO MUCH TYPE IN ALL CAPS IS VERY HARD TO READ. IT WILL HURT PEOPLE IN THE BRAIN AND MAY RESULT IN SEIZURES. MAKE SURE THAT YOU USE SIMPLE PHRASES OR SINGLE WORDS. Tuesday, October 12, 2010
    • Readability ALL CAPS Requires tight leading – less than the font size HIRE HIRE HIRE ME ME ME GOOD 16/12 BAD 16/16 WORSE 16/20 Tuesday, October 12, 2010
    • Readability ALL CAPS It can also look good with loose tracking. JU STIC E h1 { letter-spacing: 30px; } Tuesday, October 12, 2010
    • Web fonts Tuesday, October 12, 2010
    • Web fonts FORMATS .ttf .otf .svg .eot .woff Tuesday, October 12, 2010
    • Web fonts @fontface .ttf .otf .svg .eot .woff Tuesday, October 12, 2010
    • Web fonts Tuesday, October 12, 2010
    • Web fonts @fontface 29.95% 11.4% 5.5% 49.87% 1.6% Tuesday, October 12, 2010
    • Web fonts @fontface .ttf .otf .svg .eot Tuesday, October 12, 2010
    • Web fonts @fontface .ttf .otf .svg .eot .woff IE9 3.6 6 Tuesday, October 12, 2010
    • Web fonts @fontface @font-face { font-family: "Anivers"; src: url("Anivers.eot"); } @font-face { font-family: "Anivers"; src: url("Anivers.otf"); } body { font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif; } Tuesday, October 12, 2010
    • Web fonts TYPEKIT HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
    • Web fonts TYPEKIT IE6 3.5 4.0249.4 3.1 10.54 HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
    • Web fonts TYPEKIT 2.2 Experimental HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
    • PhotoShop FONT WEIGHT SIZE LEADING KERNING TRACKING COLOR Tuesday, October 12, 2010
    • PhotoShop ALIGNMENT INDENT LEFT INDENT RIGHT INDENT 1ST SPACE SPACE BEFORE AFTER Tuesday, October 12, 2010