CSS— a talk about —
frontend development for designers
Idan Gazit • @idangazit
HIT • 24th November 2010
http://flic.kr/p/7TYgHL
http://flic.kr/p/6TnQbA
I COME FROM AMERICA
My Hebrew sucks.
don’t be afraid.
deep but doable
Photo by adesigna - http://flic.kr/p/7eukcs
Photo by Yandle - http://flic.kr/p/4sfHWp
WIREFRAMES
Photo by xiaming - http://flic.kr/p/JP3Xs
SEMANTIC MARKUP
Photo by wwarby - http://flic.kr/p/3q3A3r
LOTS OF EFFORT
especially IE6
Tables
Flash
<img>
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Future Proofing.
Block vs. Inline
The Box Model
Positioning
Selectors
Typography and CSS
break!
Markup
CSS
BLOCK VS. INLINE
Block Inline
div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline
BLOCK
100% width
height according to content
can contain both inline and block content
can control positioning
BLOCK
Block 1
Block 2
Block 3
Block 4
Block 5
INLINE
height according to content
width according to content
can contain content (and other inlines)
automatic position i...
INLINE
Block 1
Inline 1 2 3 4
5 6 7
7 8
Block 2
Inline 1 2 3 4
5 6 7
7 8
Block 3
width
height
margin
padding
width
height
margin
padding
Block Inline
width
height
margin
padding
width
height
margin
padding
Block Inline
div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline
<div id=“article_header”>
section
header, footer
article
nav
Block
HTM
L 5
display: block
force an element to be block-level
THE BOX MODEL
WTF?
Doesn’t work the way you expect.
HOW BIG AM I?
div {
width: 400px;
height: 500px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
HOW BIG AM I?
width: 400px +10 +10 +1 +1 = 422px
height: 500px +10 +10 +1 +1 = 522px
padding
left + right
border
left + ri...
Math
size + padding + border = actual size
More Math
“width: auto;”
containing block width
- margin
- border
- padding
= content width.
especially IE6
POSITIONING
position : Static;
Relative;
Absolute;
Fixed;
STATIC
Block 1
Block 2
Block 3
Block 4
Block 5
RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
left: 50px
top: 50px
RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
left: -50px
top: -50px
RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 5
Block 2
position: absolute;
left: 0;
ABSOLUTE
Block 1
Block 3
Block 4
Block 5
Block 2
position: absolute;
right: 0; bottom:0;
position: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 2
position: absolute;
right: 0; top: 100px;
position: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 2
position: absolute;
right: 0; left: 0; bottom:0;
position: relative
FIXED
Block 1
Block 3
Block 4
Block 2
position: fixed;
right: 0; bottom:0;
position: relative
FIXED
Block 1
Block 3
Block 4
Block 2
position: fixed;
right: 0; left: 0; bottom:0;
z-index
control overlap
floats
remove elements from flow
position: relative
FLOATS
Block 1
Block 2
Block 3
Block 4
position: relative
FLOATS
Block 1Block 2
float: left;
width: 200px;
height: 300px;
Block 3
Block 4
Margin Collapsing
unintuitive
MARGIN COLLAPSING
Block 1
margin-bottom: 50px
Block 2
margin-top: 30px
??px
MARGIN COLLAPSING
Block 1
margin-bottom: 50px
Block 2
margin-top: 30px
50px
W3C
www.w3.org/TR/CSS2/box.html
Photo by Wahlander - http://flic.kr/p/6UgrwM
POPCORN TIME!
SELECTORS
h1 { color: red; font-size: 32px;}
selector declaration block
h1 { color: red; font-size: 32px;}
declaration
selector declaration block
h1 { color: red; font-size: 32px;}
declaration
selector declaration block
property value
h1 { color: red; font-size: 32px;}
selector declaration block
IN THE BEGINNING,
THERE WAS THE DOM
<!DOCTYPE HTML>
<html>
<head>
<title>Show off the DOM!</title>
</head>
<body>
<div id="content">
<p>
Picture yourself on a...
HTML
head body
title div
p
RELATIONSHIPS
Ancestor/Descendant
Parent/Child
Sibling
HTML
head body
title div
p
ancestor
descendant
descendant
descendant
HTML
head body
title div
p
ancestor
descendant
descendant
child
parent
HTML
head body
title div
p
siblingsibling
http://flic.kr/p/C3C52
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p.large
p of class “large”
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p
type
#nav
any element with id ...
div > p
child
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS div p
descendant
h1 + p
adjacent sibling
IE6
...
img[alt=“foo”]
<img alt=“foo” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt]
<img alt=“…anyth...
img[alt^=“foo”]
<img alt=“foobar” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt$=“foo”]
<img ...
PSEUDO-CLASSES
:first-child
:link
:visited
:hover
:active
:focus
:lang(foo)
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
...
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div>p:first-child
<div>
<p>yes!</p>
<p>no</p>
</div>
IE8
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
:nth-child(formula)
An+B:
“Every A’th element starting from...
PSEUDO-ELEMENTS
:first-line, :first-letter
:before, :after
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE...
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
li.optional:before
li.optional:before {
font-color: red;
co...
SPECIFICITY
style=“…” attribute in an element
IDs
attributes, classes, pseudo-classes
elements, pseudo-elements
Later rule...
OMG WTF PPK
quirksmode.org/css/contents.html
TYPOGRAPHY
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
— the art and science of —
presenting textual information
Web Design is 95% Typography
http://informationarchitects.jp/the-web-is-all-about-typography-period/
http://flic.kr/p/6KcBR4
Gutenberg: 1436
574 years of tradition and best-practices.
The clothes in which
you dress your words.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna ...
Lorem ipsum dolor sit M
nibh euismod tincidunt
1 em
1.5 em
Line height of 1.3-2.0 ems
RULE
THUMB
of
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna ...
Measure: 2 alphabets
RULE
THUMB
of
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefgh...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna ...
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
Body Text: 16px
RULE
THUMB
of
16px = 100% in most browsers
http://www.wilsonminer.com/posts/2008/oct/20/relative-readabili...
Dolphins Are Just Gay Sharks
Jan 28th 2010 • 7:45 PM
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam no...
http://flic.kr/p/4Pdz2D
My eyes, ze goggles do NOTHING!
2-3 Typefaces, Maximum
RULE
THUMB
of
Sans-serif (ex. Helvetica) for titles
Serif (ex. Georgia) for body text
typographyforlawyers.com
webtypography.net
read and obey.
Questions?
Thank you!
@idangazit
slides: http://db.tt/GfcttW0
CSS for Designers
CSS for Designers
CSS for Designers
CSS for Designers
CSS for Designers
Upcoming SlideShare
Loading in...5
×

CSS for Designers

620

Published on

A wide-ranging overview of important CSS concepts for people new to CSS. These are the things I wish somebody sat me down and explained to me when I was first starting out with CSS.

Includes some material recycled from my other talks, including a little about selectors and typography.

Lecture given to 3rd year students of interactive design at the Holon Institute of Technology (Israel).

1 Comment
2 Likes
Statistics
Notes
  • these are the best done slides on the topic i have ever seen. great job.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
620
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

CSS for Designers

  1. 1. CSS— a talk about — frontend development for designers Idan Gazit • @idangazit HIT • 24th November 2010
  2. 2. http://flic.kr/p/7TYgHL
  3. 3. http://flic.kr/p/6TnQbA I COME FROM AMERICA My Hebrew sucks.
  4. 4. don’t be afraid. deep but doable
  5. 5. Photo by adesigna - http://flic.kr/p/7eukcs
  6. 6. Photo by Yandle - http://flic.kr/p/4sfHWp WIREFRAMES
  7. 7. Photo by xiaming - http://flic.kr/p/JP3Xs SEMANTIC MARKUP
  8. 8. Photo by wwarby - http://flic.kr/p/3q3A3r LOTS OF EFFORT
  9. 9. especially IE6
  10. 10. Tables Flash <img>
  11. 11. Tables Flash <img> unsemantic unsemantic unreadableiOS
  12. 12. Tables Flash <img> unsemantic unsemantic unreadableiOS Future Proofing.
  13. 13. Block vs. Inline The Box Model Positioning Selectors Typography and CSS break!
  14. 14. Markup CSS
  15. 15. BLOCK VS. INLINE
  16. 16. Block Inline
  17. 17. div p h1…h6 ul, ol, li span a img strong, em Block Inline
  18. 18. BLOCK 100% width height according to content can contain both inline and block content can control positioning
  19. 19. BLOCK Block 1 Block 2 Block 3 Block 4 Block 5
  20. 20. INLINE height according to content width according to content can contain content (and other inlines) automatic position in flow
  21. 21. INLINE Block 1 Inline 1 2 3 4 5 6 7 7 8 Block 2 Inline 1 2 3 4 5 6 7 7 8 Block 3
  22. 22. width height margin padding width height margin padding Block Inline
  23. 23. width height margin padding width height margin padding Block Inline
  24. 24. div p h1…h6 ul, ol, li span a img strong, em Block Inline
  25. 25. <div id=“article_header”>
  26. 26. section header, footer article nav Block HTM L 5
  27. 27. display: block force an element to be block-level
  28. 28. THE BOX MODEL
  29. 29. WTF? Doesn’t work the way you expect.
  30. 30. HOW BIG AM I? div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px; }
  31. 31. HOW BIG AM I? width: 400px +10 +10 +1 +1 = 422px height: 500px +10 +10 +1 +1 = 522px padding left + right border left + right padding top + bottom border top + bottom
  32. 32. Math size + padding + border = actual size
  33. 33. More Math “width: auto;” containing block width - margin - border - padding = content width.
  34. 34. especially IE6
  35. 35. POSITIONING
  36. 36. position : Static; Relative; Absolute; Fixed;
  37. 37. STATIC Block 1 Block 2 Block 3 Block 4 Block 5
  38. 38. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative left: 50px top: 50px
  39. 39. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative left: -50px top: -50px
  40. 40. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative
  41. 41. ABSOLUTE Block 1 Block 3 Block 4 Block 5 Block 2 position: absolute; left: 0;
  42. 42. ABSOLUTE Block 1 Block 3 Block 4 Block 5 Block 2 position: absolute; right: 0; bottom:0;
  43. 43. position: relative ABSOLUTE Block 1 Block 3 Block 4 Block 2 position: absolute; right: 0; top: 100px;
  44. 44. position: relative ABSOLUTE Block 1 Block 3 Block 4 Block 2 position: absolute; right: 0; left: 0; bottom:0;
  45. 45. position: relative FIXED Block 1 Block 3 Block 4 Block 2 position: fixed; right: 0; bottom:0;
  46. 46. position: relative FIXED Block 1 Block 3 Block 4 Block 2 position: fixed; right: 0; left: 0; bottom:0;
  47. 47. z-index control overlap
  48. 48. floats remove elements from flow
  49. 49. position: relative FLOATS Block 1 Block 2 Block 3 Block 4
  50. 50. position: relative FLOATS Block 1Block 2 float: left; width: 200px; height: 300px; Block 3 Block 4
  51. 51. Margin Collapsing unintuitive
  52. 52. MARGIN COLLAPSING Block 1 margin-bottom: 50px Block 2 margin-top: 30px ??px
  53. 53. MARGIN COLLAPSING Block 1 margin-bottom: 50px Block 2 margin-top: 30px 50px
  54. 54. W3C www.w3.org/TR/CSS2/box.html
  55. 55. Photo by Wahlander - http://flic.kr/p/6UgrwM POPCORN TIME!
  56. 56. SELECTORS
  57. 57. h1 { color: red; font-size: 32px;} selector declaration block
  58. 58. h1 { color: red; font-size: 32px;} declaration selector declaration block
  59. 59. h1 { color: red; font-size: 32px;} declaration selector declaration block property value
  60. 60. h1 { color: red; font-size: 32px;} selector declaration block
  61. 61. IN THE BEGINNING, THERE WAS THE DOM
  62. 62. <!DOCTYPE HTML> <html> <head> <title>Show off the DOM!</title> </head> <body> <div id="content"> <p> Picture yourself on a boat in a river, with tangerine trees and marmalade skies. </p> </div> </body> </html>
  63. 63. HTML head body title div p
  64. 64. RELATIONSHIPS Ancestor/Descendant Parent/Child Sibling
  65. 65. HTML head body title div p ancestor descendant descendant descendant
  66. 66. HTML head body title div p ancestor descendant descendant child parent
  67. 67. HTML head body title div p siblingsibling
  68. 68. http://flic.kr/p/C3C52
  69. 69. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS
  70. 70. p.large p of class “large” SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS p type #nav any element with id “nav” .intro.large multiple classes IE6
  71. 71. div > p child SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div p descendant h1 + p adjacent sibling IE6 IE6 *universal
  72. 72. img[alt=“foo”] <img alt=“foo” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt] <img alt=“…anything…” … > img[alt~=“foo”] <img alt=“blah foo bar” … > img[alt|=“foo”] <img alt=“blah-foo-bar” … > IE6 IE6 IE6 IE6
  73. 73. img[alt^=“foo”] <img alt=“foobar” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt$=“foo”] <img alt=“barfoo” … > img[alt*=“foo”] <img alt=“barfoobar” … > IE6 IE6 IE6 CSS 3
  74. 74. PSEUDO-CLASSES :first-child :link :visited :hover :active :focus :lang(foo) SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE6 - links only IE7 - links only IE8 IE8 - still not 100%
  75. 75. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div>p:first-child <div> <p>yes!</p> <p>no</p> </div> IE8
  76. 76. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS :nth-child(formula) An+B: “Every A’th element starting from B” 3n: 0, 3, 6, 9… 3n+1: 1, 4, 7, 10… even (== 2n+1) odd (== 2n) CSS 3None of this works in IE < 9.
  77. 77. PSEUDO-ELEMENTS :first-line, :first-letter :before, :after SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE8 webkit, opera
  78. 78. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS li.optional:before li.optional:before { font-color: red; content: “optional - ” } <h1>Bring for hike:</h1> <ul> <li>hat</li> <li>water</li> <li class=“optional”>camera</li> </ul> Bring for hike: • hat • water • optional - camera IE8
  79. 79. SPECIFICITY style=“…” attribute in an element IDs attributes, classes, pseudo-classes elements, pseudo-elements Later rules of same specificity trump earlier rules http://www.w3.org/TR/CSS2/cascade.html#specificity
  80. 80. OMG WTF PPK quirksmode.org/css/contents.html
  81. 81. TYPOGRAPHY
  82. 82. Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv
  83. 83. — the art and science of — presenting textual information
  84. 84. Web Design is 95% Typography http://informationarchitects.jp/the-web-is-all-about-typography-period/
  85. 85. http://flic.kr/p/6KcBR4 Gutenberg: 1436 574 years of tradition and best-practices.
  86. 86. The clothes in which you dress your words.
  87. 87. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Set “Solid” 1.3em
  88. 88. Lorem ipsum dolor sit M nibh euismod tincidunt 1 em 1.5 em Line height of 1.3-2.0 ems RULE THUMB of
  89. 89. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  90. 90. Measure: 2 alphabets RULE THUMB of abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  91. 91. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 12px 16px/1.3em
  92. 92. http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
  93. 93. Body Text: 16px RULE THUMB of 16px = 100% in most browsers http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
  94. 94. Dolphins Are Just Gay Sharks Jan 28th 2010 • 7:45 PM Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Tagged fake, news OMG PONIES BLOG
  95. 95. http://flic.kr/p/4Pdz2D My eyes, ze goggles do NOTHING!
  96. 96. 2-3 Typefaces, Maximum RULE THUMB of Sans-serif (ex. Helvetica) for titles Serif (ex. Georgia) for body text
  97. 97. typographyforlawyers.com webtypography.net read and obey.
  98. 98. Questions?
  99. 99. Thank you! @idangazit slides: http://db.tt/GfcttW0
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×