Beautiful Web Typography

Presented at WordCamp Minneapolis 2015. With the rapid popularization of web fonts over the past few years, type on the web has never been more exciting! We’ll learn a bit about basic typographic principles, review techniques and services for integrating web fonts into your WordPress sites, and finally conclude with a bit of speculation on where type on the web is heading.

Transcript

1. Beautiful

   Web Typography
   

   View Slide

2. Mel Choyce
   DESIGN ENGINEER AT AUTOMATTIC
   @melchoyce
   melchoyce.design
   

   View Slide

3. INTRODUCTION TO
   

   Beautiful Web Type
   

   View Slide

4. Web Design is 95%
   Typography
   — Oliver Reichenstein
   “
   

   View Slide

5. National Geographic http://www.nationalgeographic.com/mag...
   TYPE ON THE WEB
   

   View Slide

6. Ghostly Ferns http://ghostlyferns.com/
   TYPE ON THE WEB
   

   View Slide

7. FCINQ http://www.fcinq.com/
   TYPE ON THE WEB
   

   View Slide

8. Wired http://www.wired.com/
   TYPE ON THE WEB
   

   View Slide

9. Seedlip https://www.seedlipdrinks.com/
   TYPE ON THE WEB
   

   View Slide

10. NASA Gene Lab http://genelab.nasa.gov/
    TYPE ON THE WEB
    

    View Slide

11. can make their type
    ANYONE
    LOOK GOOD
    

    View Slide

12. INTRODUCTION TO
    

    Typographic Principles
    

    View Slide

13. Picking
    Pairing
    &
    

    View Slide

14. Picking
    Pairing
    &
    

    View Slide

15. think about
    Tone
    

    View Slide

16. Neutral Stylized
    >
    

    View Slide

17. Pick body fonts with
    multiple weights
    

    View Slide

18. View Slide

19. View Slide

20. Picking
    Pairing
    &
    

    View Slide

21. One typeface,
    multiple weights
    

    View Slide

22. Sans + Serif = <3
    

    View Slide

23. Pick a Family
    when in doubt
    

    View Slide

24. Use decorative headers
    Sparingly
    

    View Slide

25. Borrow Pairings
    still worried?
    

    View Slide

26. Beautiful Web Type http://hellohappy.org/beautiful-web-type/
    TYPEFACE PAIRINGS
    

    View Slide

27. Google Web Fonts Typographic Project http://femmebot.github.io/google-type/
    TYPEFACE PAIRINGS
    

    View Slide

28. Typewolf http://www.typewolf.com/
    TYPEFACE PAIRINGS
    

    View Slide

29. Font Pair http://fontpair.co/
    TYPEFACE PAIRINGS
    

    View Slide

30. Size
    

    View Slide

31. don’t make me
    SQUINT
    

    View Slide

32. 14-22
    px body fonts
    

    View Slide

33. Line-height
    

    View Slide

34. 1x
    is so, so sad.
    

    View Slide

35. View Slide

36. 1.4-1.6x
    for body fonts
    

    View Slide

37. View Slide

38. 1.2-1.4x
    for header fonts
    

    View Slide

39. View Slide

40. body {
    font-size: 16px;
    line-height: 1.5;
    }
    h1, h2, h3 {
    line-height: 1.3;
    }
    

    View Slide

41. Line-length
    

    View Slide

42. 45-75
    characters per line*
    * including spaces and punctuation
    

    View Slide

43. View Slide

44. More
    sometimes
    is okay
    

    View Slide

45. Less
    sometimes
    is okay*
    * especially on smaller screens
    

    View Slide

46. Balancing Act
    

    View Slide

47. Style
    

    View Slide

48. only center
    short text
    

    View Slide

49. only all-caps
    short text
    

    View Slide

50. avoid
    justified text
    

    View Slide

51. only underline
    links
    

    View Slide

52. limit your # of
    font styles
    

    View Slide

53. don’t use
    100% black
    

    View Slide

54. View Slide

55. INTRODUCTION TO
    

    Using Fonts in WordPress
    

    View Slide

56. pick a
    Source
    

    View Slide

57. figure out your
    constraints
    

    View Slide

58. Self-Hosted?
    Cloud-Hosted?
    

    View Slide

59. figure out your
    budget
    

    View Slide

60. No budget?
    Small budget?
    Large budget?
    

    View Slide

61. Free Hosted Service
    

    View Slide

62. The Good
    Free!
    

    View Slide

63. The Bad
    • Not as many high-quality options
    • Limited styles/weights
    • Limited character sets
    • Limited multi language support
    • Often overused
    

    View Slide

64. Paid Hosted Service
    

    View Slide

65. The Good
    • Support
    • Higher quality fonts
    • More likely to find extended character sets
    • More likely to find multi language support
    • More likely to be both good and unique
    

    View Slide

66. The Bad
    • They cost money
    • Might have to pay based on traffic
    • More licensing restrictions
    
    

    View Slide

67. Self-Hosted Service
    

    View Slide

68. The Good
    • Totally customizable setup
    • Can remove characters to reduce font size
    • You “own” your fonts
    

    View Slide

69. The Bad
    • Requires additional setup
    • Requires additional tech knowledge
    • Optimization up to you
    • Often more expensive for paid fonts
    

    View Slide

70. use a
    Plugin
    

    View Slide

71. great if you’re not
    rolling your own
    

    View Slide

72. great if you don’t have
    file access
    

    View Slide

73. add it
    Manually
    

    View Slide

74. @font-face {
    font-family: 'Typeface';
    src: url(‘Typeface.eot?') format(‘eot'),
    url('Typeface.woff') format('woff'),
    url(‘Typeface.ttf') format('truetype');
    }
    Bulletproof @font-face
    http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
    

    View Slide

75. WEBFONT GENERATOR
    Font Squirrel http://www.fontsquirrel.com/tools/webfont-generator
    

    View Slide

76. Google Fonts
    

    View Slide

77. Paid & Hosted
    • Depends on your service
    • Usually given something to add to your
    

    View Slide

78. THINKING ABOUT
    

    The Future of Type
    

    View Slide

79. higher quality
    Free Fonts
    

    View Slide

80. Responsive Type
    

    View Slide

81. RESPONSIVE TYPOGRAPHY MEDIA QUERIES
    body {
    font-size: 100%;
    }
    h1 {
    font—size: 2.5em;
    }
    @media screen and (max-width: 50em) {
    h1 {
    font—size: 2em;
    }
    }
    @media screen and (max-width: 40em) {
    h1 {
    font—size: 1.5em;
    }
    }
    

    View Slide

82. RESPONSIVE TYPOGRAPHY JAVASCRIPT
    FitText.js http://fittextjs.com/
    

    View Slide

83. RESPONSIVE TYPOGRAPHY JAVASCRIPT
    FlowType.js http://simplefocus.com/flowtype/
    

    View Slide

84. https://css-tricks.com/viewport-sized-typography/
    CSS Tricks: Viewport Sized Typography
    RESPONSIVE TYPOGRAPHY CSS
    

    View Slide

85. h1 {
    font-size: 6vw;
    }
    h2 {
    line-height: 3vh;
    }
    p {
    line-height: 2vmin;
    }
    

    View Slide

86. http://alistapart.com/blog/post/variable-fonts-for-responsive-design
    Variable Fonts for Responsive Design
    RESPONSIVE TYPEFACES
    

    View Slide

87. Dynamic Text
    

    View Slide

88. TYPE & SVG
    Animated Text Fills http://tympanus.net/Tutorials/AnimatedTextFills/index.html
    

    View Slide

89. Thanks!
    @melchoyce
    melchoyce.design
    https://choycedesign.com/type/
    

    View Slide