SlideShare a Scribd company logo
1 of 97
Controlling
Web Typography
Converge 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 figure
out 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 typography
improves, web
designers want the
same level of control
print designers have.
But what does
that mean?
I want to use all these...
Not just these.
And put all this...
Into this.
CSS & Web Safe
Fonts
What 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 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.
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;
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;
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;
C S S & WE B S A F E F O N T S
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;
C S S & WE B S A F E F O N T S
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;
C S S & WE B S A F E F O N T S
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;
C S S & WE B S A F E F O N T S
        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;
C S S & WE B S A F E F O N T S
        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 */
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...
C S S & WE B S A F E F O N T S
         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.
Still, being web
safe is limiting.
#TypeNerdProblems
#GimmeWebFonts
ALTERNATEbrand. No. 2
became part of our
                   GOTHIC
2009: Our First
Usage of @font-face
Web Font
Services
Choices, Resources & Greater Acceptance
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
sprungmarker.de
Web Fonts on
Our Own Stuff
Alternate Gothic & Proxima Nova
Prociono (pro-cho-no?)
via The League of Movable Type
FF Meta Serif & Liquorstore
Gaining Control
With CSS3
We’ve got web fonts, and we’re not afraid
to 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 Further
Less Supported & More Adventurous
Controlling Web Typography
Chandler Van De Water
       March 22, 2010

This is beautiful. Now do it
with 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;}
}
Controlling Web Typography
Controlling Web Typography
.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 Part

Transparency knocks out the letters’ color fill
Lost World’s Fairs
Putting This Stuff into Practice for IE9
Controlling Web Typography
Meet my testing compy. It lives in a drawer.
Testing for the IE9 Platform Preview
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
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’t
perfect.
But maybe one day, enhanced CSS pseudo
selectors could be.
Imagine this:
h1:nth-letter(4); or h1:nth-char(4);
targeting the 4th letter within an <h1> tag

h1:nth-word(3);
targeting the third word within an <h1> tag

Further reading: http://twa.lt/f4L2zT
Web Fonts on
Client Projects
After Lost World’s Fairs, we became
comfortable using web fonts on client gigs.
Fono Regular (thanks philsfonts.com)
Rooney & Proxima Nova
Web Fonts on
My 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 Web
Type & Responsive
Can finely-tuned type be fluid, flexible, and
responsive?
June 2010 Redesign
Elliot Jay Stocks
           June 22, 2010
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.
Trent Walton
            June 22, 2010
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.
In Other Words...
Bazinga!
Controlling Web Typography
Controlling Web Typography
What’s Next?
A quick glance at the future...
More support for background-clip:text; and
mask-image & text
Layer Blends
layer-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

More Related Content

What's hot

Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web DesignMindy McAdams
 
CSS in React
CSS in ReactCSS in React
CSS in ReactJoe Seifi
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography TipsSara Cannon
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
 
Worry free web development
Worry free web developmentWorry free web development
Worry free web developmentEstelle Weyl
 
Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]Aaron Gustafson
 
MOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ, Łukasz Żelezny
MOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ,  Łukasz ŻeleznyMOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ,  Łukasz Żelezny
MOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ, Łukasz ŻeleznyMiritec
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoSuzette Franck
 
mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...Amy Som
 
Resume zaur aliyev
Resume zaur aliyevResume zaur aliyev
Resume zaur aliyevspiderzaur
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 
The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101kellyhousholder
 
"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara CannonSara Cannon
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFrédéric Harper
 

What's hot (20)

Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 
CSS in React
CSS in ReactCSS in React
CSS in React
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Worry free web development
Worry free web developmentWorry free web development
Worry free web development
 
Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]
 
Chris Bourseau, UI/UX Designer
Chris Bourseau, UI/UX DesignerChris Bourseau, UI/UX Designer
Chris Bourseau, UI/UX Designer
 
MOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ, Łukasz Żelezny
MOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ,  Łukasz ŻeleznyMOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ,  Łukasz Żelezny
MOBILE SEO - O CZYM MUSISZ PAMIĘTAĆ, Łukasz Żelezny
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
 
mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...
 
Resume zaur aliyev
Resume zaur aliyevResume zaur aliyev
Resume zaur aliyev
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101
 
"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 

Viewers also liked

Teacher development via the internet
Teacher development via the internetTeacher development via the internet
Teacher development via the internetPeter Beech
 
Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love
Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love
Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love Dr Anil Gupta
 
landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...
landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...
landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...Dr Anil Gupta
 
Commodity futures of soybean and aluminium
Commodity futures of soybean and aluminiumCommodity futures of soybean and aluminium
Commodity futures of soybean and aluminiumHarshad Shelar
 
Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...
Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...
Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...Dr Anil Gupta
 
What Everyone Wants to Know About Google Direct Answers
What Everyone Wants to Know About Google Direct AnswersWhat Everyone Wants to Know About Google Direct Answers
What Everyone Wants to Know About Google Direct AnswersLouise Li
 
Vallidolid spain presentation on creative communities, innovative individuals
Vallidolid spain presentation on creative communities, innovative individuals Vallidolid spain presentation on creative communities, innovative individuals
Vallidolid spain presentation on creative communities, innovative individuals Dr Anil Gupta
 
Agile experiences inside a Global Company - Daniel Wildt\'s perspective
Agile experiences inside a Global Company - Daniel Wildt\'s perspectiveAgile experiences inside a Global Company - Daniel Wildt\'s perspective
Agile experiences inside a Global Company - Daniel Wildt\'s perspectiveDaniel Wildt
 
Software Above the Level of a Single Device
Software Above the Level of a Single DeviceSoftware Above the Level of a Single Device
Software Above the Level of a Single DeviceTim O'Reilly
 
Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...
Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...
Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...Cássia Colling
 
The Worst Hollywood Book Adaptations
The Worst Hollywood Book Adaptations The Worst Hollywood Book Adaptations
The Worst Hollywood Book Adaptations ESSAYSHARK.com
 
Write And Wrong Wcbhm09
Write And Wrong   Wcbhm09Write And Wrong   Wcbhm09
Write And Wrong Wcbhm09Wade Kwon
 
HSM Global-Madrid featuring Charlene Li
HSM Global-Madrid featuring Charlene LiHSM Global-Madrid featuring Charlene Li
HSM Global-Madrid featuring Charlene LiCharlene Li
 
Hanson Hosein: Storyteller Uprising Fall 2013
Hanson Hosein: Storyteller Uprising Fall 2013Hanson Hosein: Storyteller Uprising Fall 2013
Hanson Hosein: Storyteller Uprising Fall 2013Hanson Hosein
 
Mobility Deep Dive - San Antonio 2014
Mobility Deep Dive - San Antonio 2014Mobility Deep Dive - San Antonio 2014
Mobility Deep Dive - San Antonio 2014Paul Saunders
 
Top Ten Best Practices About Translation Quality Measurement
Top Ten Best Practices About Translation Quality MeasurementTop Ten Best Practices About Translation Quality Measurement
Top Ten Best Practices About Translation Quality MeasurementSDL
 

Viewers also liked (16)

Teacher development via the internet
Teacher development via the internetTeacher development via the internet
Teacher development via the internet
 
Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love
Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love
Landscapesofloveforslideshare 131017144016-phpapp02 landscapes of love
 
landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...
landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...
landscapes of love, sharing and co creation in urban spaces, a case of ahmeda...
 
Commodity futures of soybean and aluminium
Commodity futures of soybean and aluminiumCommodity futures of soybean and aluminium
Commodity futures of soybean and aluminium
 
Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...
Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...
Stepssussexabcdefsept2409 090929085200-phpapp02 (1) manifesto for honey bee n...
 
What Everyone Wants to Know About Google Direct Answers
What Everyone Wants to Know About Google Direct AnswersWhat Everyone Wants to Know About Google Direct Answers
What Everyone Wants to Know About Google Direct Answers
 
Vallidolid spain presentation on creative communities, innovative individuals
Vallidolid spain presentation on creative communities, innovative individuals Vallidolid spain presentation on creative communities, innovative individuals
Vallidolid spain presentation on creative communities, innovative individuals
 
Agile experiences inside a Global Company - Daniel Wildt\'s perspective
Agile experiences inside a Global Company - Daniel Wildt\'s perspectiveAgile experiences inside a Global Company - Daniel Wildt\'s perspective
Agile experiences inside a Global Company - Daniel Wildt\'s perspective
 
Software Above the Level of a Single Device
Software Above the Level of a Single DeviceSoftware Above the Level of a Single Device
Software Above the Level of a Single Device
 
Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...
Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...
Development of a Coherent Social Business Strategy Utilizing an Adapted Conce...
 
The Worst Hollywood Book Adaptations
The Worst Hollywood Book Adaptations The Worst Hollywood Book Adaptations
The Worst Hollywood Book Adaptations
 
Write And Wrong Wcbhm09
Write And Wrong   Wcbhm09Write And Wrong   Wcbhm09
Write And Wrong Wcbhm09
 
HSM Global-Madrid featuring Charlene Li
HSM Global-Madrid featuring Charlene LiHSM Global-Madrid featuring Charlene Li
HSM Global-Madrid featuring Charlene Li
 
Hanson Hosein: Storyteller Uprising Fall 2013
Hanson Hosein: Storyteller Uprising Fall 2013Hanson Hosein: Storyteller Uprising Fall 2013
Hanson Hosein: Storyteller Uprising Fall 2013
 
Mobility Deep Dive - San Antonio 2014
Mobility Deep Dive - San Antonio 2014Mobility Deep Dive - San Antonio 2014
Mobility Deep Dive - San Antonio 2014
 
Top Ten Best Practices About Translation Quality Measurement
Top Ten Best Practices About Translation Quality MeasurementTop Ten Best Practices About Translation Quality Measurement
Top Ten Best Practices About Translation Quality Measurement
 

Similar to Controlling Web Typography

Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websitesFour Kitchens
 
Not just a pretty (type)face
Not just a pretty (type)faceNot just a pretty (type)face
Not just a pretty (type)faceClare Evans
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...John Hartley
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfAshleyJovelClavecill
 
Principles Of Web Design Workshop
Principles Of Web Design WorkshopPrinciples Of Web Design Workshop
Principles Of Web Design WorkshopGavin Elliott
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? Russ Weakley
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developernariyaravi
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeOptymizeHireRemoteEn
 
Important factors to consider while designing your website !
Important factors to consider while designing your website !Important factors to consider while designing your website !
Important factors to consider while designing your website !Shubhankar Gautam
 

Similar to Controlling Web Typography (20)

Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
 
Not just a pretty (type)face
Not just a pretty (type)faceNot just a pretty (type)face
Not just a pretty (type)face
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
LO3 - Lesson 20 - Template
LO3 - Lesson 20 - TemplateLO3 - Lesson 20 - Template
LO3 - Lesson 20 - Template
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
Css group
Css groupCss group
Css group
 
Css group
Css groupCss group
Css group
 
Css group
Css groupCss group
Css group
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
 
Principles Of Web Design Workshop
Principles Of Web Design WorkshopPrinciples Of Web Design Workshop
Principles Of Web Design Workshop
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | Optymize
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Important factors to consider while designing your website !
Important factors to consider while designing your website !Important factors to consider while designing your website !
Important factors to consider while designing your website !
 

Recently uploaded

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 

Recently uploaded (20)

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 

Controlling Web Typography

  • 2. Howdy! A little bit about myself...
  • 3. I work with 2 of my best friends in Texas.
  • 4. I’m this kid’s father. He’s trying to figure out what’s going on with my neck.
  • 5. I think about food all the time.
  • 6. My wife had to put me on a font allowance.
  • 7. As web typography improves, web designers want the same level of control print designers have.
  • 9. I want to use all these...
  • 11. And put all this...
  • 13. CSS & Web Safe Fonts What can be achieved with the basics?
  • 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...
  • 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.
  • 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;
  • 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;
  • 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;
  • 19. C S S & WE B S A F E F O N T S 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;
  • 20. C S S & WE B S A F E F O N T S 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;
  • 21. C S S & WE B S A F E F O N T S 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;
  • 22. C S S & WE B S A F E F O N T S 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;
  • 23. C S S & WE B S A F E F O N T S 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 */
  • 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...
  • 25. C S S & WE B S A F E F O N T S 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.
  • 26. Still, being web safe is limiting. #TypeNerdProblems #GimmeWebFonts
  • 27. ALTERNATEbrand. No. 2 became part of our GOTHIC
  • 28. 2009: Our First Usage of @font-face
  • 29. Web Font Services Choices, Resources & Greater Acceptance
  • 39. Web Fonts on Our Own Stuff
  • 40. Alternate Gothic & Proxima Nova
  • 41. Prociono (pro-cho-no?) via The League of Movable Type
  • 42. FF Meta Serif & Liquorstore
  • 43. Gaining Control With CSS3 We’ve got web fonts, and we’re not afraid to use them!
  • 44. text-shadow: -3px 2px 0px #514d46;
  • 45. color: rgba(7, 206, 250, 0.5); text-shadow: 18px 0px 0 #AD0918;
  • 47. Going Further Less Supported & More Adventurous
  • 49. Chandler Van De Water March 22, 2010 This is beautiful. Now do it with selectable type. ;P
  • 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;} }
  • 54. .css:after{ content: "CSS Three"; -webkit-background-clip: text; background: url(crosshatch.png); }
  • 57. The Image Part Transparency knocks out the letters’ color fill
  • 58. Lost World’s Fairs Putting This Stuff into Practice for IE9
  • 60. Meet my testing compy. It lives in a drawer.
  • 61. Testing for the IE9 Platform Preview
  • 66. But how to keep the markup manageable?
  • 67. Injects <spans> around letters, words, or lines
  • 69. The HTML <!doctype html> <html> <body> <h1 id="txt_onward">Onward &amp; Upward</h1> </body> </html>
  • 70. 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>
  • 71. 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>
  • 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;}
  • 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";}
  • 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;}
  • 75. Lettering.js isn’t perfect. But maybe one day, enhanced CSS pseudo selectors could be.
  • 76. Imagine this: h1:nth-letter(4); or h1:nth-char(4); targeting the 4th letter within an <h1> tag h1:nth-word(3); targeting the third word within an <h1> tag Further reading: http://twa.lt/f4L2zT
  • 77. Web Fonts on Client Projects After Lost World’s Fairs, we became comfortable using web fonts on client gigs.
  • 78. Fono Regular (thanks philsfonts.com)
  • 80. Web Fonts on My Blog! Taking Things as Far as I Can
  • 81. transform: rotate(-8deg); /* w/ vendor prefixes */
  • 82. text-shadow: #253e45 -1px 1px 0, #253e45 -2px 2px 0, #d45848 -3px 3px 0, #d45848 -4px 4px 0;
  • 83. transform: scale(1) skewY(15deg); transform: scale(1) skewY(-15deg); /* w/ vendor prefixes */
  • 84. Controlled Web Type & Responsive Can finely-tuned type be fluid, flexible, and responsive?
  • 86. Elliot Jay Stocks June 22, 2010 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.
  • 87. Trent Walton June 22, 2010 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.
  • 92. What’s Next? A quick glance at the future...
  • 93. More support for background-clip:text; and mask-image & text
  • 94. Layer Blends layer-blend:color-burn; :color-dodge; :multiply;
  • 95. Gimme Specificity! h1:nth-letter(4); or h1:nth-char(4); h1:nth-word(3); To-The-Letter & Word CSS Selection