Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beautiful Web Typography

Mel Choyce
April 25, 2015

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.

Mel Choyce

April 25, 2015
Tweet

More Decks by Mel Choyce

Other Decks in Design

Transcript

  1. Beautiful

    Web Typography

    View full-size slide

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

    View full-size slide

  3. INTRODUCTION TO

    Beautiful Web Type

    View full-size slide

  4. Web Design is 95%
    Typography
    — Oliver Reichenstein

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. can make their type
    ANYONE
    LOOK GOOD

    View full-size slide

  12. INTRODUCTION TO

    Typographic Principles

    View full-size slide

  13. Picking
    Pairing
    &

    View full-size slide

  14. Picking
    Pairing
    &

    View full-size slide

  15. think about
    Tone

    View full-size slide

  16. Neutral Stylized
    >

    View full-size slide

  17. Pick body fonts with
    multiple weights

    View full-size slide

  18. Picking
    Pairing
    &

    View full-size slide

  19. One typeface,
    multiple weights

    View full-size slide

  20. Sans + Serif = <3

    View full-size slide

  21. Pick a Family
    when in doubt

    View full-size slide

  22. Use decorative headers
    Sparingly

    View full-size slide

  23. Borrow Pairings
    still worried?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. don’t make me
    SQUINT

    View full-size slide

  29. 14-22
    px body fonts

    View full-size slide

  30. 1x
    is so, so sad.

    View full-size slide

  31. 1.4-1.6x
    for body fonts

    View full-size slide

  32. 1.2-1.4x
    for header fonts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. More
    sometimes
    is okay

    View full-size slide

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

    View full-size slide

  37. Balancing Act

    View full-size slide

  38. only center
    short text

    View full-size slide

  39. only all-caps
    short text

    View full-size slide

  40. avoid
    justified text

    View full-size slide

  41. only underline
    links

    View full-size slide

  42. limit your # of
    font styles

    View full-size slide

  43. don’t use
    100% black

    View full-size slide

  44. INTRODUCTION TO

    Using Fonts in WordPress

    View full-size slide

  45. pick a
    Source

    View full-size slide

  46. figure out your
    constraints

    View full-size slide

  47. Self-Hosted?
    Cloud-Hosted?

    View full-size slide

  48. figure out your
    budget

    View full-size slide

  49. No budget?
    Small budget?
    Large budget?

    View full-size slide

  50. Free Hosted Service

    View full-size slide

  51. The Good
    Free!

    View full-size slide

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

    View full-size slide

  53. Paid Hosted Service

    View full-size slide

  54. 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 full-size slide

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

    View full-size slide

  56. Self-Hosted Service

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. great if you’re not
    rolling your own

    View full-size slide

  60. great if you don’t have
    file access

    View full-size slide

  61. add it
    Manually

    View full-size slide

  62. @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 full-size slide

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

    View full-size slide

  64. Google Fonts

    View full-size slide

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

    View full-size slide

  66. THINKING ABOUT

    The Future of Type

    View full-size slide

  67. higher quality
    Free Fonts

    View full-size slide

  68. Responsive Type

    View full-size slide

  69. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. Dynamic Text

    View full-size slide

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

    View full-size slide

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

    View full-size slide