Universal Typography (June 2014)

8124e329e5e583a879c4df3e41422d0a?s=47 Tim Brown
June 18, 2014

Universal Typography (June 2014)

The web is universal and, in this talk, Tim Brown shows us how to practice typography in a way that is equally universal. Focusing on traditional typographic principles, while also embracing progressive enhancement, Tim explains how fonts, CSS, web-enabled devices, and user contexts coexist. Together, we will reevaluate what it means to successfully set type — and inform our routine decisions about typefaces, font sizes, and white space.

8124e329e5e583a879c4df3e41422d0a?s=128

Tim Brown

June 18, 2014
Tweet

Transcript

  1. @nicewebtype Tim Brown Universal Typography

  2. None
  3. None
  4. None
  5. None
  6. typotheque.com/articles/type_families

  7. someplace.com/something-awesome

  8. None
  9. someplace.com/something-awesome

  10. someplace.com/something-awesome

  11. — John Allsopp “Underpinning all this is the belief that

    designers are controllers.” alistapart.com/articles/dao
  12. — Mike Monteiro “As a designer you are responsible for

    what you put into the world.” abookapart.com/products/design-is-a-job
  13. @espiekermann I say that all the time, because it’s true.”

  14. j.mp/better-than-free

  15. — Thomas Phinney “People can be affected by good typography

    without being actively aware of it.” j.mp/phinney-commarts
  16. Structure Presentation Behavior

  17. someplace.com/something-awesome

  18. someplace.com/something-awesome

  19. None
  20. — Tim Berners-Lee “The primary design principle underlying the Web’s

    usefulness and growth is universality.” j.mp/tbl-universality
  21. zeldman.com/talent

  22. None
  23. someplace.com/something-awesome

  24. someplace.com/something-awesome

  25. someplace.com/something-awesome

  26. someplace.com/something-awesome

  27. insideparagraphs.com

  28. The Stroke: Theory of Writing, by Gerrit Noordzij

  29. someplace.com/something-awesome

  30. beautiful group

  31. someplace.com/something-awesome

  32. size / leading × measure element { font: 1em/1.5 "Font

    name", serif; width: 36em; }
  33. someplace.com/something-awesome

  34. None
  35. someplace.com/something-awesome

  36. someplace.com/something-awesome

  37. someplace.com/something-awesome

  38. typekit.com

  39. fontbureau.com/readingedge

  40. — Erik Spiekermann “If you want good type on Retina

    displays, just search for faces that happen to look good.” @espiekermann
  41. someplace.com/something-awesome

  42. someplace.com/something-awesome

  43. someplace.com/something-awesome

  44. someplace.com/something-awesome

  45. someplace.com/something-awesome

  46. nicewebtype.com/x/4r

  47. someplace.com/something-awesome

  48. someplace.com/something-awesome

  49. •What font should I use? •What’s a good font-size? •What’s

    a good line-height? •What are good breakpoints? •Should I use a grid?
  50. karenmcgrane.com feltpresence.com

  51. thegreatdiscontent.com

  52. thegreatdiscontent.com

  53. j.mp/stocks-spiekermann

  54. set size / leading × measure

  55. fit size / leading × measure

  56. set set fit fit fit fit set

  57. setting type size / leading × measure

  58. alistapart.com/article/howtosizetextincss

  59. — Scott Jehl “We [would] need to calculate em values

    differently when they’re used in a media query than in a CSS property value.” nicewebtype.com/x/7s
  60. Setting type size CSS html { font-size: 100%; } p

    { font-size: 1em; } .wf-active p { font-size: 1.125em; }
  61. Setting type size CSS html { font-size: 100%; } p

    { font-size: 1em; } .wf-active p { font-size: 1.125em; }
  62. Setting type size CSS html { font-size: 100%; } p

    { font-size: 1em; } .wf-active p { font-size: 1.125em; }
  63. j.mp/fontevents

  64. someplace.com/something-awesome

  65. em box

  66. webfontspecimen.com

  67. None
  68. practice.typekit.com

  69. fontmetrics.com

  70. 10, 11, 12, 14, 16, 18, 21, 24, 30, 36

  71. — Robert Bringhurst “Don’t compose without a scale.” The Elements

    of Typographic Style
  72. modularscale.com

  73. trentwalton.com

  74. someplace.com/something-awesome

  75. moltenleading.com $("p").moltenLeading({ minline: 1.3, maxline: 1.4, minwidth: 20em, maxwidth: 30em

    }); JS
  76. 1. 2. 3. Size Measure Leading Relative to device default

    font-size Tailored to the type you’re using Inspired by a modular scale Let flex, determine limits Molten, via measure limits Loose by default
  77. fitting type size / leading × measure

  78. 1. 2. 3. Leading Measure Size

  79. breakpoint! breakpoint! breakpoint! breakpoint! nt! nt! nt! nt! br br

    br br
  80. fittextjs.com responsivemeasure.com

  81. cdpn.io/EGjAm

  82. cdpn.io/EGjAm

  83. cdpn.io/EGjAm

  84. cdpn.io/EGjAm

  85. someplace.com/something-awesome

  86. Heading with many words Fusce dapibus, tellus ac cursus commodo,

    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
  87. 1. 2. 3. Measure Size Leading Satisfies graphic goals Fit

    to container Let flex, determine limits Adjust accordingly
  88. containers size / leading × measure

  89. gridsetapp.com singularity.gs

  90. css-tricks.com/dont-overthink-it-grids

  91. pressure

  92. davatron5000.github.io/fitWeird

  93. Donec id elit non mi porta gravida at eget metus.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum container too wide...
  94. Donec id elit non mi porta gravida at eget metus.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum center text block?
  95. Donec id elit non mi porta gravida at eget metus.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. let measure be wide?
  96. Donec id elit non mi porta gravida at eget metus.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. extended typeface?
  97. Donec id elit non mi porta gravida at eget metus.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. bigger font size?
  98. Donec id elit non mi porta gravida at eget metus.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at container too narrow...
  99. Donec id elit non mi porta gravida at eget metus.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at let viewport scroll?
  100. let measure be narrow? Donec id elit non mi porta

    gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at
  101. condensed typeface? Donec id elit non mi porta gravida at

    eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida
  102. smaller font size? Donec id elit non mi porta gravida

    at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu
  103. None
  104. j.mp/ia-basics

  105. j.mp/marko-face-demo

  106. Core Text DirectWrite Rooney Sans Regular (400)

  107. HTML .tr-coretext { font-weight: 300; } CSS <html class="tr-coretext tr-aa-subpixel">

    typerendering.com
  108. alistapart.com/article/content-out-layout

  109. — Mark Boulton “Content, layout, behaviour, perception, brand, feel. All

    of those things are open for change if we have a good set of sensors.” markboulton.co.uk
  110. — Jordan Moore “The most accurate sensor is user preference.”

    @jordanmoore
  111. craigmod.com/bibliotype

  112. j.mp/sherman-ala

  113. @adobetype

  114. None
  115. someplace.com/something-awesome

  116. Screenshots via smashingmagazine.com & tested.com

  117. contentsmagazine.com

  118. None
  119. Thank you. @nicewebtype Tim Brown