The Life of <p>
The Life of <p> with Jason Pamental Presented at FITC Toronto 2015 More info at www.fitc.ca OVERVIEW Beautiful, Readable, Responsive Typography from the Inside Out. Typographic design has been evolving and improving for centuries, but it’s only been in the past few years that we’ve been able to bring that design sensibility to the web in a meaningful way. We’ll look at design from the content out—starting with the smallest chunk of content: the paragraph. Even inside this smallest component, there is a whole world to explore: paragraph styles over time, link styles, heading relationships, pull quotes and more. We’ll explore the varying ways the lowly <p> has been designed in print—from the earliest printed works on through to today—and look at how those styles can be implemented in clean, repeatable, reusable CSS that looks good and requires little-to-no manual intervention from your content editors. The best design for the web has to be in a system that can move, scale and adapt to any screen: from wearables to phones to laptops and beyond. Great typography is the most secure foundation, so it pays to get it right. Making sure that your design remains usable, fast, consistent and compelling as content changes and scales is critical to its success. A journey of a thousand miles begins with a single step—and every great story starts with a single <p>. OBJECTIVE Learn about the elements of typographic style for the responsive web. TARGET AUDIENCE Print/web designers and front-end developers. ASSUMED AUDIENCE KNOWLEDGE Basic knowledge of typography, HTML & CSS. FIVE THINGS AUDIENCE MEMBERS WILL LEARN How really responsive design starts from the content out. How to start with the smallest chunk of content (the <p>) and build a typographic system around it. How much traditional typographic design techniques can be translated for the web (and how to do it!). How to implement web fonts properly for best performance and UX. How to choose between free, self-hosted and service-based fonts (and why!).
![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](https://image.slidesharecdn.com/lifeofpfitc-150420152233-conversion-gate01/85/The-Life-of-lt-p-18-320.jpg)
More Related Content
Viewers also liked (17)
Similar to The Life of <p> (20)
More from FITC (20)
Recently uploaded (20)
![Halstead’s_Software_Science_&_Putnam’s_Model[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/halsteadssoftwarescienceputnamsmodel1-250502175814-4c85707e-thumbnail.jpg?width=560&fit=bounds)
The Life of <p>
- 1. the life of <p> bringing digital products to life with type & typography Jason Pamental / @jpamental / Lead UX Strategist
- 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
- 4. Type & Typography on the Web not such strange bedfellows after all
- 5. –Beatrice Ward, circa 1933 “the clothes which words wear”
- 6. Begin at the Beginning
- 7. –Mark Boulton, March 24th, 2011 “create layouts from the content out”
- 8. –Elliot Jay Stocks, October 7th, 2011 “designing from the type outwards”
- 9. So we narrow the focus.
- 10. –Tao Te Ching, ascribed to Laozi “A journey of a thousand li starts beneath one’s feet”
- 11. so a volume of a thousand lines begins with a single <p>
- 13. *Atomic design, anyone? Image from bradfrost.com We design in visual systems, building patterns of objects & code
- 14. So what’s the most basic primitive of content itself?
- 15. So what’s the most basic primitive of content itself?
- 16. The American Spelling Book by Noah Webster, courtesy of merrycoz.org
- 17. The American Spelling Book by Noah Webster, courtesy of merrycoz.org
- 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. <p>
- 20. a thought; Cogito, ergo sum. –René Descartes, circa 1629
- 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. * 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
- 25. παράγραφος (paragraphos) p { position: relative; } p:before { content: "2E0F"; position: absolute; left: 0; top: 0.1em; }
- 26. Middle Ages: The Pilcrow Years http://www.smithsonianmag.com/arts-culture/the-origin-of-the-pilcrow-aka-the-strange-paragraph-symbol-8610683/
- 27. Middle Ages: The Pilcrow Years http://www.smithsonianmag.com/arts-culture/the-origin-of-the-pilcrow-aka-the-strange-paragraph-symbol-8610683/ ¶
- 28. as it was, so it can be Medium Daily Digest
- 29. as it was, so it can be Medium Daily Digest
- 30. Middle Ages: The Pilcrow Years
- 31. Middle Ages: The Pilcrow Years p { display: inline; } p:after { content: "00B6"; }
- 32. late 15th century & onward
- 33. late 15th century & onward
- 34. when I indent, I prefer 1em
- 35. late 15th century & onward p { margin-bottom: 0; text-indent: 1em; // naturally }
- 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. 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. last line without any orphans
- 40. last line without any orphans wt.fix({ elements: 'p', chars: 10, method: 'nbsp', event: 'resize' }); http://bit.ly/rt-widotamer
- 41. a dash of dashes
- 42. a dash of dashes
- 43. a dash of dashes
- 44. a dash of dashes
- 45. a dash of dashes
- 46. a dash of dashes
- 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. drop it like a cap
- 49. drop it like a cap http://www.dragoart.com/tuts/641/1/1/how-to-draw-homies-character-bobby-loco.htm
- 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
- 52. first-line of defense p:first-line { font-size: 1.1em; font-weight: bold; }
- 53. link it, link it good
- 54. link it, link it good
- 55. link it, link it good
- 56. link it, link it good
- 57. link it, link it good
- 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. a flare for the dramatic
- 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. much ado & giving us nothing 12.15 sec
- 62. much ado & giving us nothing
- 63. much ado & giving us nothing
- 64. much ado & a tiny bit better 7.1 sec
- 65. much ado & on our merry way 5.1 sec
- 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. just what is the perfect <p>? question:
- 68. answer: the right one for your project
- 70. Buzzfeed
- 71. The Shape of Design
- 72. The Shape of Design
- 73. the only wrong answer no answer at all
- 75. 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