• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Controlling Web Typography
 

Controlling Web Typography

on

  • 18,189 views

Converge SE 2011

Converge SE 2011

Statistics

Views

Total Views
18,189
Views on SlideShare
17,227
Embed Views
962

Actions

Likes
87
Downloads
0
Comments
0

25 Embeds 962

http://ddsign.es 521
http://coursehome.next.ecollege.com 214
http://paper.li 60
https://twitter.com 29
http://twitter.com 28
http://gonzothegreat.rajtoral.com 19
http://i.orchard.net.au 17
http://localhost 15
http://us-w1.rockmelt.com 9
http://zootool.com 9
http://learningbyhacking.posterous.com 6
http://trentwalton.com 6
http://kellyschalow.com 5
http://www.twylah.com 5
url_unknown 4
http://www.kellyschalow.com 3
http://i.orchard.local 2
http://www.slideshare.net 2
http://brandnolimit.wordpress.com 2
http://posterous.com 1
http://static.slidesharecdn.com 1
http://www.onlydoo.com 1
http://safe.tumblr.com 1
https://cobbk12.blackboard.com 1
http://www.fbweb-test.comoj.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Controlling Web Typography Controlling Web Typography Presentation Transcript

    • ControllingWeb TypographyConverge SE 2011
    • Howdy!A little bit about myself...
    • I work with 2 of my best friends in Texas.
    • I’m this kid’s father. He’s trying to figureout what’s going on with my neck.
    • I think about food all the time.
    • My wife had to put me on a font allowance.
    • As web typographyimproves, webdesigners want thesame level of controlprint designers have.
    • But what doesthat mean?
    • I want to use all these...
    • Not just these.
    • And put all this...
    • Into this.
    • CSS & Web SafeFontsWhat can be achieved with the basics?
    • 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...
    • CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designersʼ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.
    • CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.font-family: georgia, serif;
    • CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.font-size: 60px;
    • CSS & WEB SAFE FONTSWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.text-transform: uppercase;
    • C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.letter-spacing: 2px;
    • C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.color: #c44032;
    • C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.font-style: italic;
    • C S S & WE B S A F E F O N T S What can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.text-align: center;
    • C S S & WE B S A F E F O N T S What can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.line-height: 20px; /* to wrap things up */
    • CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designersʼ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.Before...
    • C S S & WE B S A F E F O N T S What can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.After.
    • Still, being websafe is limiting.#TypeNerdProblems#GimmeWebFonts
    • ALTERNATEbrand. No. 2became part of our GOTHIC
    • 2009: Our FirstUsage of @font-face
    • Web FontServicesChoices, Resources & Greater Acceptance
    • sprungmarker.de
    • Web Fonts onOur Own Stuff
    • Alternate Gothic & Proxima Nova
    • Prociono (pro-cho-no?)via The League of Movable Type
    • FF Meta Serif & Liquorstore
    • Gaining ControlWith CSS3We’ve got web fonts, and we’re not afraidto use them!
    • text-shadow: -3px 2px 0px #514d46;
    • color: rgba(7, 206, 250, 0.5);text-shadow: 18px 0px 0 #AD0918;
    • p.intro:first-letter{float:left;margin:0 3px 0 0; font-size:57px;}
    • Going FurtherLess Supported & More Adventurous
    • Chandler Van De Water March 22, 2010This is beautiful. Now do itwith selectable type. ;P
    • Google: CSS Background Text
    • .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;}}
    • .css:after{ content: "CSS Three"; -webkit-background-clip: text; background: url(crosshatch.png);}
    • But background-clip:text; degrades poorly.
    • -mask-image: url(css3/header-bkg-mask.png);
    • The Image PartTransparency knocks out the letters’ color fill
    • Lost World’s FairsPutting This Stuff into Practice for IE9
    • Meet my testing compy. It lives in a drawer.
    • Testing for the IE9 Platform Preview
    • But how to keep the markup manageable?
    • Injects <spans> around letters, words, or lines
    • Targeting Letters
    • The HTML<!doctype html><html><body> <h1 id="txt_onward">Onward &amp; Upward</h1></body></html>
    • Add the JS<!doctype html><html><body> <h1 id="txt_onward">Onward &amp; Upward</h1> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.lettering.min.js"></script> <script> $(document).ready(function() { $("#txt_onward").lettering(); }); </script></body></html>
    • And you get...<h1 id="txt_onward"> <span class="char1">O</span> <span class="char2">n</span> <span class="char3">w</span> <span class="char4">a</span> <span class="char5">r</span> <span class="char6">d</span> <span class="char7"></span> <span class="char8">&amp;</span> <span class="char9"></span> <span class="char10">U</span> <span class="char11">p</span>
    • #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;}
    • 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";}
    • 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;}
    • Lettering.js isn’tperfect.But maybe one day, enhanced CSS pseudoselectors could be.
    • Imagine this:h1:nth-letter(4); or h1:nth-char(4);targeting the 4th letter within an <h1> tagh1:nth-word(3);targeting the third word within an <h1> tagFurther reading: http://twa.lt/f4L2zT
    • Web Fonts onClient ProjectsAfter Lost World’s Fairs, we becamecomfortable using web fonts on client gigs.
    • Fono Regular (thanks philsfonts.com)
    • Rooney & Proxima Nova
    • Web Fonts onMy Blog!Taking Things as Far as I Can
    • transform: rotate(-8deg); /* w/ vendor prefixes */
    • text-shadow: #253e45 -1px 1px 0, #253e45 -2px 2px 0, #d45848 -3px 3px 0, #d45848 -4px 4px 0;
    • transform: scale(1) skewY(15deg);transform: scale(1) skewY(-15deg);/* w/ vendor prefixes */
    • Controlled WebType & ResponsiveCan finely-tuned type be fluid, flexible, andresponsive?
    • June 2010 Redesign
    • Elliot Jay Stocks June 22, 2010Thinking along the ‘touch’ theme youbrought up, I’d be really interested to seehow this design could be enhanced evenfurther still using the responsive webdesign approach to building.
    • Trent Walton June 22, 2010Ultimately, all the art-directed bits I had inplace drove me to hold off, but I can’t helpbut think that If I change anything in thecoming months, that’d be it.
    • In Other Words...
    • Bazinga!
    • What’s Next?A quick glance at the future...
    • More support for background-clip:text; andmask-image & text
    • Layer Blendslayer-blend:color-burn; :color-dodge; :multiply;
    • Gimme Specificity!h1:nth-letter(4); or h1:nth-char(4);h1:nth-word(3);To-The-Letter & Word CSS Selection
    • Questions?
    • Thanks!TrentWalton.com@TrentWalton