Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
the life of <p>
bringing digital products to life with type & typography
Jason Pamental / @jpamental / Lead UX Strategist
A bit about your guide
• Lead UX Strategist at Fresh Tilled Soil
• Have found peace, even with IE6–8
• Believe the best as...
Tristan, @aProperCollie
Type & Typography on the Web
not such strange bedfellows after all
–Beatrice Ward, circa 1933
“the clothes which words wear”
Begin at the Beginning
–Mark Boulton, March 24th, 2011
“create layouts from the
content out”
–Elliot Jay Stocks, October 7th, 2011
“designing from the type
outwards”
So we narrow the focus.
–Tao Te Ching, ascribed to Laozi
“A journey of a thousand li
starts beneath one’s feet”
so a volume of a 

thousand lines begins 

with a single <p>
parallaxel processing
*Atomic design, anyone? Image from bradfrost.com
We design in visual systems,
building patterns of objects & code
So what’s the most basic
primitive of content itself?
So what’s the most basic
primitive of content itself?
The American Spelling Book by Noah Webster, courtesy of merrycoz.org
The American Spelling Book by Noah Webster, courtesy of merrycoz.org
AVING examined the first part of the new Grammatical Institute of the 

English Language, published by Mr. Noah Webster we...
<p>
a thought;
Cogito, ergo sum.
–René Descartes, circa 1629
an idea;
Nothing in life is to be feared, it is
only to be understood. Now is the
time to understand more, so that
we may ...
* thanks Wikipedia
a basic unit of discourse*;
Four score and seven years ago our
fathers brought forth on this continent,...
παράγραφος (paragraphos)
http://www.shadycharacters.co.uk/2011/02/the-pilcrow-part-1/
παράγραφος (paragraphos)
παράγραφος (paragraphos)
p {
position: relative;
}
p:before {
content: "2E0F";
position: absolute;
left: 0;
top: 0.1em;
}
Middle Ages: The Pilcrow Years
http://www.smithsonianmag.com/arts-culture/the-origin-of-the-pilcrow-aka-the-strange-paragr...
Middle Ages: The Pilcrow Years
http://www.smithsonianmag.com/arts-culture/the-origin-of-the-pilcrow-aka-the-strange-paragr...
as it was, so it can be
Medium Daily Digest
as it was, so it can be
Medium Daily Digest
Middle Ages: The Pilcrow Years
Middle Ages: The Pilcrow Years
p {
display: inline;
}
p:after {
content: "00B6";
}
late 15th century & onward
late 15th century & onward
when I indent, I prefer 1em
late 15th century & onward
p {
margin-bottom: 0;
text-indent: 1em; // naturally
}
block party
http://typecast.qwriting.qc.cuny.edu/2012/11/28/a-typewriter-links-ideas-to-their-owners/
block party
Not ignoring what is good, I am quick to perceive a
horror, and could still be social with it—would they let
m...
block party
Not ignoring what is good, I am quick to perceive a
horror, and could still be social with it—would they let
m...
last line without any
orphans
last line without any orphans
wt.fix({
elements: 'p',
chars: 10,
method: 'nbsp',
event: 'resize'
});
http://bit.ly/rt-wido...
a dash of dashes
a dash of dashes
a dash of dashes
a dash of dashes
a dash of dashes
a dash of dashes
a dash of dashes
.hyphens {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphen...
drop it like a cap
drop it like a cap
http://www.dragoart.com/tuts/641/1/1/how-to-draw-homies-character-bobby-loco.htm
drop it like a cap
p:first-of-type:first-letter,
.lt-ie9 p:first-letter {
font-size: 5em;
font-family: ‘Bluntz W00’;
font-...
first-line of defense
first-line of defense
p:first-line {
font-size: 1.1em;
font-weight: bold;
}
link it, link it good
link it, link it good
link it, link it good
link it, link it good
link it, link it good
link it, link it good
.nicelink {
font-size: 5em;
text-shadow: 1px 0 0 #fff, 1px 0 0 #fff, 

-1px 0 0 #fff, -1px 0 0 #fff;...
a flare for the dramatic
a flare for the dramatic
.otf {
-moz-font-feature-settings: "dlig=1","liga=1";
-moz-font-feature-settings: "dlig" 1, "liga...
much ado & giving us nothing
12.15 sec
much ado & giving us nothing
much ado & giving us nothing
much ado & a tiny bit better
7.1 sec
much ado & on our merry way
5.1 sec
much ado & on our merry way
p {
font-family: “Playfair Display", serif;
font-size: 1.5em;
}
.wf-inactive p {
font-family: ...
just what is the perfect <p>?
question:
answer:
the right one for your project
The Seattle Times
Buzzfeed
The Shape of Design
The Shape of Design
the only wrong answer
no answer at all
thank you
Jason Pamental
@jpamental
typefaces: Salomé & Scala Sans
photoography: unless otherwise noted, photos by @jpamen...
Life of P FITC & CreateUpstate
Upcoming SlideShare
Loading in …5
×

Life of P FITC & CreateUpstate

1,921 views

Published on

A look at the history of the smallest element of text content: the paragraph. Where did it come from, how has typography been used to represent it and further our understanding of the content itself, and how can we translate that to the web. (This is a slightly evolved version of the talk being presented at FITC Toronto & CreateUpstate)

Published in: Design
  • Be the first to comment

Life of P FITC & CreateUpstate

  1. 1. the life of <p> bringing digital products to life with type & typography Jason Pamental / @jpamental / Lead UX Strategist
  2. 2. A bit about your guide • Lead UX Strategist at Fresh Tilled Soil • Have found peace, even with IE6–8 • Believe the best aspects of design are often never seen • Author of Responsive Typography from O’Reilly (bit.ly/rwtbook) • Husband, father, son, brother, tinkerer, teacher & student • Walker of @aProperCollie
  3. 3. Tristan, @aProperCollie
  4. 4. Type & Typography on the Web not such strange bedfellows after all
  5. 5. –Beatrice Ward, circa 1933 “the clothes which words wear”
  6. 6. Begin at the Beginning
  7. 7. –Mark Boulton, March 24th, 2011 “create layouts from the content out”
  8. 8. –Elliot Jay Stocks, October 7th, 2011 “designing from the type outwards”
  9. 9. So we narrow the focus.
  10. 10. –Tao Te Ching, ascribed to Laozi “A journey of a thousand li starts beneath one’s feet”
  11. 11. so a volume of a 
 thousand lines begins 
 with a single <p>
  12. 12. parallaxel processing
  13. 13. *Atomic design, anyone? Image from bradfrost.com We design in visual systems, building patterns of objects & code
  14. 14. So what’s the most basic primitive of content itself?
  15. 15. So what’s the most basic primitive of content itself?
  16. 16. The American Spelling Book by Noah Webster, courtesy of merrycoz.org
  17. 17. The American Spelling Book by Noah Webster, courtesy of merrycoz.org
  18. 18. AVING examined the first part of the new Grammatical Institute of the 
 English Language, published by Mr. Noah Webster we are of opinion, that it is far preferable, in the plan and execution, to Dilworth's or any other Spelling Book, which has been introduced into [o]ur schools. In these the entire omission of the rules of pronunciation is a capital defect, which very few of the parents, schoolmasters or mistresses, employed in teaching children the first rudiments have sufficient knowledge to supply… H The American Spelling Book by Noah Webster, courtesy of merrycoz.org
  19. 19. <p>
  20. 20. a thought; Cogito, ergo sum. –René Descartes, circa 1629
  21. 21. an idea; Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less. –Marie Curie
  22. 22. * thanks Wikipedia a basic unit of discourse*; Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. –President Abraham Lincoln, 1863
  23. 23. παράγραφος (paragraphos) http://www.shadycharacters.co.uk/2011/02/the-pilcrow-part-1/
  24. 24. παράγραφος (paragraphos)
  25. 25. παράγραφος (paragraphos) p { position: relative; } p:before { content: "2E0F"; position: absolute; left: 0; top: 0.1em; }
  26. 26. Middle Ages: The Pilcrow Years http://www.smithsonianmag.com/arts-culture/the-origin-of-the-pilcrow-aka-the-strange-paragraph-symbol-8610683/
  27. 27. Middle Ages: The Pilcrow Years http://www.smithsonianmag.com/arts-culture/the-origin-of-the-pilcrow-aka-the-strange-paragraph-symbol-8610683/ ¶
  28. 28. as it was, so it can be Medium Daily Digest
  29. 29. as it was, so it can be Medium Daily Digest
  30. 30. Middle Ages: The Pilcrow Years
  31. 31. Middle Ages: The Pilcrow Years p { display: inline; } p:after { content: "00B6"; }
  32. 32. late 15th century & onward
  33. 33. late 15th century & onward
  34. 34. when I indent, I prefer 1em
  35. 35. late 15th century & onward p { margin-bottom: 0; text-indent: 1em; // naturally }
  36. 36. block party http://typecast.qwriting.qc.cuny.edu/2012/11/28/a-typewriter-links-ideas-to-their-owners/
  37. 37. block party Not ignoring what is good, I am quick to perceive a horror, and could still be social with it—would they let me—since it is but well to be on friendly terms with all the inmates of the place one lodges in. By reason of these things, then, the whaling voyage was welcome; the great flood-gates of the wonder-world swung open, and in the wild conceits that swayed me to my purpose, two and two there floated into my inmost soul, endless processions of the whale, and, mid most of them all, one grand hooded phantom, like a snow hill in the air.
  38. 38. block party Not ignoring what is good, I am quick to perceive a horror, and could still be social with it—would they let me—since it is but well to be on friendly terms with all the inmates of the place one lodges in. By reason of these things, then, the whaling voyage was welcome; the great flood-gates of the wonder-world swung open, and in the wild conceits that swayed me to my purpose, two and two there floated into my inmost soul, endless processions of the whale, and, mid most of them all, one grand hooded phantom, like a snow hill in the air. p { margin-bottom: 1em; }
  39. 39. last line without any orphans
  40. 40. last line without any orphans wt.fix({ elements: 'p', chars: 10, method: 'nbsp', event: 'resize' }); http://bit.ly/rt-widotamer
  41. 41. a dash of dashes
  42. 42. a dash of dashes
  43. 43. a dash of dashes
  44. 44. a dash of dashes
  45. 45. a dash of dashes
  46. 46. a dash of dashes
  47. 47. a dash of dashes .hyphens { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; text-align: justify; } JS alternative: http://mnater.github.io/Hyphenator/
  48. 48. drop it like a cap
  49. 49. drop it like a cap http://www.dragoart.com/tuts/641/1/1/how-to-draw-homies-character-bobby-loco.htm
  50. 50. drop it like a cap p:first-of-type:first-letter, .lt-ie9 p:first-letter { font-size: 5em; font-family: ‘Bluntz W00’; font-size: 5em; color: 5em; line-height: 0.9em; float: left; padding-right: 0.05em; margin-top: -0.125em; } http://www.dragoart.com/tuts/641/1/1/how-to-draw-homies-character-bobby-loco.htm
  51. 51. first-line of defense
  52. 52. first-line of defense p:first-line { font-size: 1.1em; font-weight: bold; }
  53. 53. link it, link it good
  54. 54. link it, link it good
  55. 55. link it, link it good
  56. 56. link it, link it good
  57. 57. link it, link it good
  58. 58. link it, link it good .nicelink { font-size: 5em; text-shadow: 1px 0 0 #fff, 1px 0 0 #fff, 
 -1px 0 0 #fff, -1px 0 0 #fff; background-image: linear-gradient(to bottom, 
 transparent, rgba(#00194d, 0) 75%, 
 rgba(#00194d, 0.85) 75%, transparent)); background-repeat: repeat-x; background-size: 2px 2px; background-position: 0 0.8em; display: inline; word-break: break-word; }
  59. 59. a flare for the dramatic
  60. 60. a flare for the dramatic .otf { -moz-font-feature-settings: "dlig=1","liga=1"; -moz-font-feature-settings: "dlig" 1, "liga" 1; -webkit-font-feature-settings: "dlig" 1, "liga" 1; -ms-font-feature-settings: "dlig=1", "liga=1"; -o-font-feature-settings: "dlig" 1,"liga" 1; font-feature-settings: "dlig" 1,"liga" 1; } https://github.com/jpamental/otfeatures
  61. 61. much ado & giving us nothing 12.15 sec
  62. 62. much ado & giving us nothing
  63. 63. much ado & giving us nothing
  64. 64. much ado & a tiny bit better 7.1 sec
  65. 65. much ado & on our merry way 5.1 sec
  66. 66. much ado & on our merry way p { font-family: “Playfair Display", serif; font-size: 1.5em; } .wf-inactive p { font-family: "Times New Roman", serif; font-size: 1.575em; letter-spacing: 0.1px; } https://github.com/typekit/webfontloader
  67. 67. just what is the perfect <p>? question:
  68. 68. answer: the right one for your project
  69. 69. The Seattle Times
  70. 70. Buzzfeed
  71. 71. The Shape of Design
  72. 72. The Shape of Design
  73. 73. the only wrong answer no answer at all
  74. 74. thank you Jason Pamental @jpamental typefaces: Salomé & Scala Sans photoography: unless otherwise noted, photos by @jpamental slides: slideshare.net/jpamental code: github.com/jpamental book: bit.ly/rwtbook

×