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

Controlling Web Typography

Trent Walton
September 27, 2011

Controlling Web Typography

Slides from my talk at Converge SE 2011
http://convergese.com

Trent Walton

September 27, 2011
Tweet

More Decks by Trent Walton

Other Decks in Design

Transcript

  1. Controlling
    Web Typography
    ConvergeSE 2011

    View Slide

  2. Howdy!
    A little bit about myself...

    View Slide

  3. I work with 2 of my best friends in Texas.

    View Slide

  4. I’m this kid’s father. He’s trying to figure
    out what’s going on with my neck.

    View Slide

  5. I think about food all the time.

    View Slide

  6. My wife had to put me on a font allowance.

    View Slide

  7. As web typography
    improves, web
    designers want the
    same level of control
    print designers have.

    View Slide

  8. But what does
    that mean?

    View Slide

  9. I want to use all these...

    View Slide

  10. Not just these.

    View Slide

  11. And put all this...

    View Slide

  12. Into this.

    View Slide

  13. CSS & Web Safe
    Fonts
    What can be achieved with the basics?

    View Slide

  14. CSS We Know
    .thing{
    font-size: 1em; line-height: 1.5px;
    font-style: italic; font-weight: bold;
    text-decoration: none; direction: ltr;
    font-variant: small-caps; text-indent: .5em;
    text-transform: none; text-align: left;
    letter-spacing: .1em; word-spacing: .1em;
    }
    Let’s put this stuff to work...

    View Slide

  15. CSS & web safe fonts
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.

    View Slide

  16. CSS & web safe fonts
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    font-family: georgia, serif;

    View Slide

  17. CSS & web safe fonts
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    font-size: 60px;

    View Slide

  18. CSS & WEB SAFE FONTS
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    text-transform: uppercase;

    View Slide

  19. CSS & WEB SAFE FONTS
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    letter-spacing: 2px;

    View Slide

  20. CSS & WEB SAFE FONTS
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    color: #c44032;

    View Slide

  21. CSS & WEB SAFE FONTS
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    font-style: italic;

    View Slide

  22. CSS & WEB SAFE FONTS
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    text-align: center;

    View Slide

  23. CSS & WEB SAFE FONTS
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    line-height: 20px; /* to wrap things up */

    View Slide

  24. CSS & web safe fonts
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    Before...

    View Slide

  25. CSS & WEB SAFE FONTS
    What can be achieved with the basics
    The growing prominence of web fonts seems to have
    boosted web designers’ interest in typography. Visual
    interest can be achieved with these CSS properties &
    core typographic principals.
    After.

    View Slide

  26. Still, being web
    safe is limiting.
    #TypeNerdProblems
    #GimmeWebFonts

    View Slide

  27. ALTERNATE GOTHIC No. 1
    became part of our brand.

    View Slide

  28. 2009: Our First
    Usage of @font-face

    View Slide

  29. Web Font
    Services
    Choices, Resources & Greater Acceptance

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. sprungmarker.de

    View Slide

  39. Web Fonts on
    Our Own Stuff

    View Slide

  40. Alternate Gothic & Proxima Nova

    View Slide

  41. Prociono (pro-cho-no?)
    via The League of Movable Type

    View Slide

  42. FF Meta Serif & Liquorstore

    View Slide

  43. Gaining Control
    With CSS3
    We’ve got web fonts, and we’re not afraid
    to use them!

    View Slide

  44. text-shadow: -3px 2px 0px #514d46;

    View Slide

  45. color: rgba(7, 206, 250, 0.5);
    text-shadow: 18px 0px 0 #AD0918;

    View Slide

  46. p.intro:first-letter{float:left;
    margin:0 3px 0 0; font-size:57px;}

    View Slide

  47. Going Further
    Less Supported & More Adventurous

    View Slide

  48. View Slide

  49. This is beautiful. Now do it
    with selectable type. ;P
    Chandler Van De Water
    March 22, 2010

    View Slide

  50. Google: CSS Background Text

    View Slide

  51. .masked{
    background: url(img/paint.png);
    -webkit-background-clip:text;
    -webkit-animation-name:masked-ani;
    }
    @-webkit-keyframes masked-ani{
    0% {background-position: left bottom;}
    100% {background-position: right bottom;}
    }

    View Slide

  52. View Slide

  53. View Slide

  54. .css:after{
    content: "CSS Three";
    -webkit-background-clip: text;
    background: url(crosshatch.png);
    }

    View Slide

  55. But background-clip:text; degrades poorly.

    View Slide

  56. -mask-image: url(css3/header-bkg-mask.png);

    View Slide

  57. The Image Part
    Transparency knocks out the letters’ color fill

    View Slide

  58. Lost World’s Fairs
    Putting This Stuff into Practice for IE9

    View Slide

  59. View Slide

  60. Meet my testing compy. It lives in a drawer.

    View Slide

  61. Testing for the IE9 Platform Preview

    View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. But how to keep the markup manageable?

    View Slide

  67. Injects around letters, words, or lines

    View Slide

  68. Targeting Letters

    View Slide

  69. The HTML



    Onward & Upward


    View Slide

  70. Add the JS



    Onward & Upward


    <br/>$(document).ready(function() {<br/>$("#txt_onward").lettering();<br/>});<br/>


    View Slide

  71. And you get...

    O
    n
    w
    a
    r
    d

    &

    U
    p

    View Slide

  72. #txt_onward .char1{top:13px;}
    #txt_onward .char2{top:12px;}
    #txt_onward .char3{top:11px;}
    #txt_onward .char4{top:10px;}
    #txt_onward .char5{top:9px;}

    View Slide

  73. Targeting Words
    #left_teaser .word6{color:hsla(57, 100%, 39%, .8);}
    #left_teaser .word7{font-size:60px;}
    #left_teaser .word4,
    #left_teaser .word6{font:38px/.6 "chunk-1","chunk-2";}

    View Slide

  74. Targeting Lines
    #txt_gillsorlungs .line1{font-size:18px; font-weight:700;}
    #txt_gillsorlungs .line2,
    #txt_gillsorlungs .line3{font-size:40px; color:#9ecc3b;}
    #txt_gillsorlungs .line4,
    #txt_gillsorlungs .line5{font-size:16px; font-style:italic;}

    View Slide

  75. Lettering.js isn’t
    perfect.
    But maybe one day, enhanced CSS pseudo
    selectors could be.

    View Slide

  76. Imagine this:
    h1:nth-letter(4); or h1:nth-char(4);
    targeting the 4th letter within an tag
    h1:nth-word(3);
    targeting the third word within an tag
    Further reading: http://twa.lt/f4L2zT

    View Slide

  77. Web Fonts on
    Client Projects
    After Lost World’s Fairs, we became
    comfortable using web fonts on client gigs.

    View Slide

  78. Fono Regular (thanks philsfonts.com)

    View Slide

  79. Rooney & Proxima Nova

    View Slide

  80. Web Fonts on
    My Blog!
    Taking Things as Far as I Can

    View Slide

  81. transform: rotate(-8deg); /* w/ vendor prefixes */

    View Slide

  82. text-shadow: #253e45 -1px 1px 0, #253e45 -2px 2px 0,
    #d45848 -3px 3px 0, #d45848 -4px 4px 0;

    View Slide

  83. transform: scale(1) skewY(15deg);
    transform: scale(1) skewY(-15deg);
    /* w/ vendor prefixes */

    View Slide

  84. Controlled Web
    Type & Responsive
    Can finely-tuned type be fluid, flexible, and
    responsive?

    View Slide

  85. June 2010 Redesign

    View Slide

  86. Thinking along the ‘touch’ theme you
    brought up, I’d be really interested to see
    how this design could be enhanced even
    further still using the responsive web
    design approach to building.
    Elliot Jay Stocks
    June 22, 2010

    View Slide

  87. Ultimately, all the art-directed bits I had in
    place drove me to hold off, but I can’t help
    but think that If I change anything in the
    coming months, that’d be it.
    Trent Walton
    June 22, 2010

    View Slide

  88. In Other Words...

    View Slide

  89. Bazinga!

    View Slide

  90. View Slide

  91. View Slide

  92. What’s Next?
    A quick glance at the future...

    View Slide

  93. More support for background-clip:text; and
    mask-image & text

    View Slide

  94. Layer Blends
    layer-blend:color-burn;
    :color-dodge;
    :multiply;

    View Slide

  95. Gimme Specificity!
    h1:nth-letter(4); or h1:nth-char(4);
    To-The-Letter & Word CSS Selection
    h1:nth-word(3);

    View Slide

  96. Questions?

    View Slide

  97. Thanks!
    TrentWalton.com
    @TrentWalton

    View Slide