Controlling Web Typography

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 Stuﬀ

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 & Upward</h1></body></html>

Add the JS<!doctype html><html><body> <h1 id="txt_onward">Onward & 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">&</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 oﬀ, 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 Speciﬁcity!h1:nth-letter(4); or h1:nth-char(4);h1:nth-word(3);To-The-Letter & Word CSS Selection

Questions?

Thanks!TrentWalton.com@TrentWalton

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	18
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://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

Controlling Web Typography

by Trent Walton

Accessibility

Categories

Upload Details

Usage Rights

24 Embeds 959

Statistics

Controlling Web Typography Presentation Transcript