Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Web Typography
A Long Dark Rant
95% of the
information on the
web is written
language
http://ia.net/blog/the-web-is-all-about-typography-period/
Typography is the
visual expression of
language
We are all typographers
Yes, you, internet people
Ryan LaBouve
UX • Designer • Typographer
me
@RyanLaBouve
@RyanLaBouve
HolyArchers
@RyanLaBouve
Soon to be Dad
@RyanLaBouve
@RyanLaBouve
Why I’m personally
interested in typography
Tim Brown’s More Perfect Typography
After watching this I
knew I was supposed ...
3 Goals Today
• Show the impact of typography
• Show where typography is from and where
its’ going
• Give you practical wa...
Obstacles
• Type is hard
• There are no rules
• There are a lot of variables
Worth It
• Happier Users
• Represents Content Better
• Works on more platforms
All typographic knowledge
Knowledge you need for proficiency
What you need to know to be good
Good News
Our Project
http://publicdomainreview.org/collections/george-withers-emblem-book-1635/
Before
After
History
Where do letters
come from?
The history of typography reflects a continual tension between
hand and machine. Organic and the geometric, the human body
...
Modern Writing Systems
Arabic (Abjad)
Hangul (Syllabic)
Latin (Alphabetic)
French
Spanish
Italian
English
Dutch
German
Iri...
Ancient
Egyptian
Abbreviated History of Our Alphabet
Phoenician Greek
(logographic with alphabetic
elements)
4000
BC
Latin...
Early Latin Writing
Uncial (400)Roman Capitals (Trajan)
Blackletter (12th-15th)Carolingian (9th)
Invention of
Movable Type
Evolution of Type
Gutenberg’s Textura (1450) Garamond (1530)
Old StyleTextura
http://newwebtypography.com/blog/2014/02/towards-a-more-perfec...
Transitional
Caslon (1720) Bodoni (1798)
Modern
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-ty...
Humanist Sans
Gill Sans (1926)
Egyptian/Slab Serif
1815
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-we...
Geometric Sans
FuturaHelvetica
Transitional Sans-serif
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-web...
Digital Type
Bitmap Fonts Word Processing
Now Everyone’s a Typography
Bleeding Cowboy Lobster
Payparus
Digital fonts, human origins
Demo
https://github.com/ryanlabouve/type-talk-demo
Content + Reset
Add Markup
Organize
Define Containers
Choosing Typeface
Choosing Typeface
Choosing Typeface
Typographic Scale
Proofread, Edit, Augment
Typographic Hierarchy
Before/After
Mechanics
Quick Technical
Disclaimer
Examples assume level of
html/css knowledge
#webTypography
Additional Resources
Pixels vs EM vs REM (and vh, vw)
Mapping Typography to CSS (don’t fear web typography)
HTML/CSS Typog...
Including web fonts
http://css-tricks.com/snippets/css/using-font-face/
Self Hosting
Generating Fonts for the Web
http://w...
font-family
font-weight
font-font size
letter-spacing
max-width
line-height
Which Font
How Bold/Light
Font Size
Letter Spa...
Anatomy of a
Typeface
• X-height
• Stroke contrast
• Reading Test
!
Legibility
Choosing a Typeface
• Appropriate for Context
• Font Quality
• Legibility
• Affordable?
Display vs Body
Poster vs Reading
OR
Appropriate for Context
Appropriate for Context
via Typekit.com
Appropriate for Context
What kind of party?
Appropriate for Context
Appropriate for Context
________ Party
Appropriate for Context
Cocktail Party
________ Party
Appropriate for Context
Slumber Party
Appropriate for Context
Appropriate for Context
___ Party
Appropriate for Context
LAN Party
Appropriate for Context
___ Party
Appropriate for Context
D&D Party
Slumber Party
Appropriate for Context
LAN Party
D&D Party
Cocktail Party
Set some type;
in context
Read it.
Like it?
Appropriate for Context
Good Inspiration
What do other designers use?
Quality
Font In Use
http://fontsinuse.com/
Typespiration
http://typespiration.com/
Superfamilies
Typefaces with large families
Quality
weights & Styles
Weight & Styles
Character Support
Do you need something that supports other languages?
Quality
https://www.google.com/fonts/specimen/PT+Sans
PT Sans, Characters
Affordable?
Purchasing/Procuring Fonts
Free Web Fonts
http://losttype.com/
theleagueofmoveabletype.com
Not Free Web Fonts
but awesome
^
Foundries
Buy from individuals.
Possibly host yourself
Services
Aggregate Fonts
Usually Host for You
For this Demo
Free
Legible
Book Club Party
https://www.google.com/fonts
Narrowed it down
Paragraphs
Typesetting
Tricks
1. Leading
2. Measure
3. Kerning
4. Tracking
5. Word Spacing
6. Hyphenation
Leading
The Space between Lines
CSS: line-height
120%-140% of font size
1
MeasureLength of Lines of Text
CSS: max-width
45-80 Character
2
K erning
Spaces between letters
http://xkcd.com/1015/
http://letteringjs.com/
http://www.kernjs.com/
http://kerningjs.com/...
T r a c k i n g
even spacing between every character
CSS: letter-spacing4
Word Spacing
Avoid messing with wordspacing
CSS: word-spacing5
Hyphenation & Justification
Lacking on the web
6
Tempo The sum of leading, measure, kerning,
tracking, word-spacing, and H&J
Narrow, Faster Tempo Wide, Slower Tempo
Nothing Done
Measure
Leading, Letter spacing, Tracking…
Hierarchy
Hierarchy is simply creating
CONTRAST
Contrast
Use size, color, and space
to differentiate content
Typographic Scale
Like a music scale. Creates harmony.
Organization
Group similar content. Make more important
content more prominent
Edit
Correct grammar & remove
unnecessary content
practicaltypography.com
Additional Resources
smartquotesforsmartpeople.c...
Strategies
Media Queries + Relative Unites
Responsive
Typography 101
Why does our
demo currently
fail?
Phones.
Solution
PX -> (R)EM
Use relative units
/* Target / Context = Result */
Change font-size on
body(%), rest of
document resizes
mmmmmm…. relative units
Use media queries to
establish breakpoints and
make adjustments
Adjust via breakpoints
font-size: 100%
>1100px
90%
<1100px
(Moved Aside to Bottom)
<840px
90%
Before Now
<590
Target Specific
Problems
Headlines are Still too Big
Fix with Media Queries
Before Now
All kinds of things
Future of WebType
http://fittextjs.com/http://letteringjs.com/
Javascript Steps In
Molten Leading
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-
height/
Face Detection
http://webdesign.maratz.com/lab/responsivetypography/realtime/
Dynamic Resizing
http://modularscale.com/scale/?px1=25&px2=1024&ra1=1.25&ra2=0
Abril Text+Titling
The End
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Prochain SlideShare
Chargement dans…5
×

Web Typography, A Long Dark

44 605 vues

Publié le

Typography, all of it.

Publié dans : Design
  • Download Movie copy and paste Link▬►►► https://t.co/0Q7a9OBTfE
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Web Typography, A Long Dark

  1. Web Typography A Long Dark Rant
  2. 95% of the information on the web is written language http://ia.net/blog/the-web-is-all-about-typography-period/
  3. Typography is the visual expression of language
  4. We are all typographers Yes, you, internet people
  5. Ryan LaBouve UX • Designer • Typographer me @RyanLaBouve
  6. @RyanLaBouve
  7. HolyArchers @RyanLaBouve
  8. Soon to be Dad @RyanLaBouve
  9. @RyanLaBouve
  10. Why I’m personally interested in typography Tim Brown’s More Perfect Typography After watching this I knew I was supposed to be a designer. http://vimeo.com/17079380
  11. 3 Goals Today • Show the impact of typography • Show where typography is from and where its’ going • Give you practical ways to practice (on as many platforms as possible)
  12. Obstacles • Type is hard • There are no rules • There are a lot of variables
  13. Worth It • Happier Users • Represents Content Better • Works on more platforms
  14. All typographic knowledge Knowledge you need for proficiency What you need to know to be good Good News
  15. Our Project http://publicdomainreview.org/collections/george-withers-emblem-book-1635/ Before After
  16. History
  17. Where do letters come from?
  18. The history of typography reflects a continual tension between hand and machine. Organic and the geometric, the human body and the abstract system. These tensions, which marked the birth of printed letters over five hundred years ago, continue to energize typography today. —Ellen Lupton in Thinking With Type “ ”
  19. Modern Writing Systems Arabic (Abjad) Hangul (Syllabic) Latin (Alphabetic) French Spanish Italian English Dutch German Irish Welsh Czech Polish Chinese (Logographic)
  20. Ancient Egyptian Abbreviated History of Our Alphabet Phoenician Greek (logographic with alphabetic elements) 4000 BC Latin 1200 BC 800 BC 700 BC (Essentially the “latin” or “roman” alphabet)
  21. Early Latin Writing Uncial (400)Roman Capitals (Trajan)
  22. Blackletter (12th-15th)Carolingian (9th)
  23. Invention of Movable Type
  24. Evolution of Type
  25. Gutenberg’s Textura (1450) Garamond (1530) Old StyleTextura http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  26. Transitional Caslon (1720) Bodoni (1798) Modern http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  27. Humanist Sans Gill Sans (1926) Egyptian/Slab Serif 1815 http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  28. Geometric Sans FuturaHelvetica Transitional Sans-serif http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  29. Digital Type
  30. Bitmap Fonts Word Processing
  31. Now Everyone’s a Typography Bleeding Cowboy Lobster Payparus
  32. Digital fonts, human origins
  33. Demo https://github.com/ryanlabouve/type-talk-demo
  34. Content + Reset
  35. Add Markup
  36. Organize
  37. Define Containers
  38. Choosing Typeface
  39. Choosing Typeface
  40. Choosing Typeface
  41. Typographic Scale
  42. Proofread, Edit, Augment
  43. Typographic Hierarchy
  44. Before/After
  45. Mechanics
  46. Quick Technical Disclaimer
  47. Examples assume level of html/css knowledge #webTypography
  48. Additional Resources Pixels vs EM vs REM (and vh, vw) Mapping Typography to CSS (don’t fear web typography) HTML/CSS Typography Primer http://j.eremy.net/confused-about-rem-and-em/ http://adamschwartz.co/magic-of-css/chapters/5-typography/ http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web- typography http://css-tricks.com/viewport-sized-typography/
  49. Including web fonts http://css-tricks.com/snippets/css/using-font-face/ Self Hosting Generating Fonts for the Web http://www.fontsquirrel.com/tools/webfont-generator Using a Service https://developers.google.com/fonts/docs/getting_started
  50. font-family font-weight font-font size letter-spacing max-width line-height Which Font How Bold/Light Font Size Letter Spacing Measure Leading CSS IRL
  51. Anatomy of a Typeface
  52. • X-height • Stroke contrast • Reading Test ! Legibility
  53. Choosing a Typeface • Appropriate for Context • Font Quality • Legibility • Affordable?
  54. Display vs Body Poster vs Reading OR Appropriate for Context
  55. Appropriate for Context
  56. via Typekit.com Appropriate for Context
  57. What kind of party? Appropriate for Context
  58. Appropriate for Context ________ Party
  59. Appropriate for Context Cocktail Party
  60. ________ Party Appropriate for Context
  61. Slumber Party Appropriate for Context
  62. Appropriate for Context ___ Party
  63. Appropriate for Context LAN Party
  64. Appropriate for Context ___ Party
  65. Appropriate for Context D&D Party
  66. Slumber Party Appropriate for Context LAN Party D&D Party Cocktail Party
  67. Set some type; in context Read it. Like it? Appropriate for Context
  68. Good Inspiration What do other designers use? Quality
  69. Font In Use http://fontsinuse.com/
  70. Typespiration http://typespiration.com/
  71. Superfamilies Typefaces with large families Quality
  72. weights & Styles Weight & Styles
  73. Character Support Do you need something that supports other languages? Quality
  74. https://www.google.com/fonts/specimen/PT+Sans PT Sans, Characters
  75. Affordable? Purchasing/Procuring Fonts
  76. Free Web Fonts
  77. http://losttype.com/ theleagueofmoveabletype.com
  78. Not Free Web Fonts but awesome ^
  79. Foundries Buy from individuals. Possibly host yourself
  80. Services Aggregate Fonts Usually Host for You
  81. For this Demo Free Legible Book Club Party
  82. https://www.google.com/fonts
  83. Narrowed it down
  84. Paragraphs
  85. Typesetting Tricks
  86. 1. Leading 2. Measure 3. Kerning 4. Tracking 5. Word Spacing 6. Hyphenation
  87. Leading The Space between Lines CSS: line-height 120%-140% of font size 1
  88. MeasureLength of Lines of Text CSS: max-width 45-80 Character 2
  89. K erning Spaces between letters http://xkcd.com/1015/ http://letteringjs.com/ http://www.kernjs.com/ http://kerningjs.com/ 3
  90. T r a c k i n g even spacing between every character CSS: letter-spacing4
  91. Word Spacing Avoid messing with wordspacing CSS: word-spacing5
  92. Hyphenation & Justification Lacking on the web 6
  93. Tempo The sum of leading, measure, kerning, tracking, word-spacing, and H&J Narrow, Faster Tempo Wide, Slower Tempo
  94. Nothing Done
  95. Measure
  96. Leading, Letter spacing, Tracking…
  97. Hierarchy
  98. Hierarchy is simply creating CONTRAST
  99. Contrast Use size, color, and space to differentiate content
  100. Typographic Scale Like a music scale. Creates harmony.
  101. Organization Group similar content. Make more important content more prominent
  102. Edit Correct grammar & remove unnecessary content practicaltypography.com Additional Resources smartquotesforsmartpeople.com
  103. Strategies
  104. Media Queries + Relative Unites Responsive Typography 101
  105. Why does our demo currently fail?
  106. Phones.
  107. Solution
  108. PX -> (R)EM Use relative units
  109. /* Target / Context = Result */
  110. Change font-size on body(%), rest of document resizes mmmmmm…. relative units
  111. Use media queries to establish breakpoints and make adjustments
  112. Adjust via breakpoints
  113. font-size: 100% >1100px
  114. 90% <1100px (Moved Aside to Bottom) <840px
  115. 90% Before Now <590
  116. Target Specific Problems
  117. Headlines are Still too Big Fix with Media Queries
  118. Before Now
  119. All kinds of things Future of WebType
  120. http://fittextjs.com/http://letteringjs.com/ Javascript Steps In
  121. Molten Leading http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line- height/
  122. Face Detection http://webdesign.maratz.com/lab/responsivetypography/realtime/
  123. Dynamic Resizing
  124. http://modularscale.com/scale/?px1=25&px2=1024&ra1=1.25&ra2=0 Abril Text+Titling The End

×