Get the Look: Use @font-face and CSS3 Like the Stars

Get the LOOK Use font-face & CSS3 Like the Stars
#SexyType – @smcbride – seanmcb.com/sxsw2012

#SexyType @smcbride

SEAN McBRIDE

SEAN McBRIDE Engineer & Web Developer

SEAN McBRIDE Engineer & Web Developer User Experience Web Developer

Star’s look

Star’s look Your look (On a budget)

Classic look

Classic look Your look (On the web)

HAND-PAINTED SIGNS

WOOD TYPE POSTERS

MAGAZINE SPREAD

CSS3 @font-face @media background-size :before/:after column-count rgba text-shadow transform

Examples on GitHub github.com/seanami/get-the-look-examples

“How do I translate a CLASSIC LOOK into a web
page?”

Ideas Forms

Jonathan Hoeﬂer Pivot: AIGA Design Conference 15 October 2011

Idea DESIGN SYSTEM Form

DESIGN SYSTEM

The NY Times DESIGN SYSTEM

The NY Times DESIGN SYSTEM DESIGN SYSTEM

DESIGN SYSTEM

Bohemian Ensemble DESIGN SYSTEM

DESIGN SYSTEM Bohemian Ensemble DESIGN SYSTEM

Original Form

Original Form New Form

DESIGN SYSTEM Original Form New Form

Original Idea DESIGN SYSTEM Original Form New Form

Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

Hand-Painted SIGNS

blog.typekit.com/2011/07/19/shading-with-css-text-shadows

DESIGN SYSTEM

Idea DESIGN SYSTEM

Idea PAINTING WOOD/BRICK THE ELEMENTS

Eye-catching Hand lettering Shades/shapes Weathered PAINTING WOOD/BRICK THE ELEMENTS

Eye-catching Hand lettering Shades/shapes Weathered DESIGN SYSTEM

Eye-catching Hand lettering Shades/shapes Weathered FONT-FACE TEXT-SHADOW MASK (WEBKIT)

@font-face

@font-face Web fonts – Working Draft Global Support – 92.11%

caniuse.com

@font-face @font-face { font-family: 'my-family'; src: url('/url/of/font.woff'); style: normal; weight:
400; }

@font-face @font-face { font-family: 'my-family'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); style: normal; weight: 400; }

@font-face <script src="http://use.typekit.com/rck3htg.js"></script> <script>try{Typekit.load();}catch(e){}</script>

from Veer from Underware

.sign h1 .name { transform: rotate(-12deg); } CSS3 Transform

<head> ... <script src="http://use.typekit.com/rck3htg.js"></script> <script>try{Typekit.load();}catch(e){}</script> ... </head>

.sign h1 .name { font: 400 normal 20em/1 cursive; }
.sign h1 .welcome, .sign h2 { font: 400 normal 7em/1 sans-serif; }

.sign h1 .name { font: 400 normal 20em/1 “corner-store”, cursive;
} .sign h1 .welcome, .sign h2 { font: 400 normal 7em/1 “bello-caps”, sans-serif; }

.sign h1 .name:first-letter { font-size: 1.2em; }

text-shadow

text-shadow text-shadow: 2px 4px 6px #000;

text-shadow text-shadow: 2px 4px 6px #000; text-shadow: 2px 4px 0
#000, 4px 8px 0 #fff, ...;

CSS3 Text-shadow – Working Draft Global Support – 61.42%

PROGRESSIVE ENHANCEMENT

.sign h1 .name { text-shadow: -8px 8px 0 #b06955; }

Horizontal

Vertical

Blur

Color

.sign h1 .name { text-shadow: -3px 3px 0 #393431, -8px
8px 0 #b06955; }

.sign h1 .name { text-shadow: -3px 3px 0 #393431, 0
3px 0 #393431, -3px 0 0 #393431, -4px 4px 0 #b06955, -6px 6px 0 #b06955, -8px 8px 0 #b06955; }

mask mask: url(mask.png) no-repeat center top;

CSS3 Masks – Uno cial Global Support – 35.49%

mask mask: url(mask.png) no-repeat center top;

mask -webkit-mask: url(mask.png) no-repeat center top; mask: url(mask.png) no-repeat center
top;

Transparent Image

.sign { background: #000 url(images/wood.png) 4.5em 0; }

.sign h1 { -webkit-mask: url(images/wood.png) 4.5em 0; mask: url(images/wood.png) 4.5em
0; } .sign h2 { -webkit-mask: url(images/wood.png) -9.32em -6em; mask: url(images/wood.png) -9.32em -6em; }

Hand-painted sign

@font-face – hand-lettered look Hand-painted sign

@font-face – hand-lettered look text-shadow – sign painter’s shade Hand-painted
sign

@font-face – hand-lettered look text-shadow – sign painter’s shade mask
– weathered, wooden texture Hand-painted sign

Wood Type Poster

www.leodis.net/playbills

DESIGN SYSTEM

Idea DESIGN SYSTEM

Idea PRINTING PAPER/INK MOVEABLE TYPE

Overwhelming Typeface variety Hierarchy Full-width PRINTING PAPER/INK MOVEABLE TYPE

DESIGN SYSTEM Overwhelming Typeface variety Hierarchy Full-width

FONT-FACE TEXT-SHADOW RGBA COLOR PSEUDO-ELEMENTS Overwhelming Typeface variety Hierarchy Full-width

@font-face

@font-face Many fonts File size

@font-face 144 Kb 6 fonts

from Barry Schwartz

from Veer from Wood Type Revival from Adobe

from Wood Type Revival

rgba color

rgba color background: #000;

rgba color background: rgba(0, 0, 0, 1);

rgba color background: rgba(0, 0, 0, 0.5);

rgba color background: rgba(0, 0, 0, 0.5); color: rgba(0, 0,
0, 0.5); border: 1px solid rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);

CSS3 Colors – Recommendation Global Support – 72.95%

rgba color color: #999; color: rgba(0, 0, 0, 0.5);

rgba color color: #999; color: rgba(0, 0, 0, 0.5); PROGRESSIVE
ENHANCEMENT

rgba color color: #999; color: rgba(0, 0, 0, 0.5);

.para4 .condensed { color: #5d608f; }

.para4 .condensed { color: #5d608f; text-shadow: 0.02em 0.02em 0 rgba(217,
20, 43, 0.75); }

.para4 .condensed { color: #5d608f; color: rgba(45, 57, 128, 0.75);
text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75); }

:before + content

:before + content h1:before { } h1:after { } <h1>Test</h1>

:before + content h1:before { } h1:after { } <h1>Test</h1>
Test

:before + content h1:before { content: "1"; } h1:after {
content: "2"; } <h1>Test</h1> Test

:before + content h1:before { content: "1"; } h1:after {
content: "2"; } <h1>Test</h1> 1Test2

:before + content h1:before { content: attr(data-one); } h1:after {
content: attr(data-two); } <h1 data-one="1" data-two="2">Test</h1> 1Test2

CSS Generated content – Recommendation Global Support – 90.2%

<strong class="chroma" data-content="Greater Number"> Greater Number </strong>

.chroma:before { color: #999; content: attr(data-content); font-family: "delittle-chromatic-inlay"; }

.chroma { position: relative; } .chroma:before { color: #999; display:
block; content: attr(data-content); font-family: "delittle-chromatic-inlay"; position: absolute; width: 100%; }

.chroma:before { color: #999; display: block; content: attr(data-content); font-family: "delittle-chromatic-inlay";
position: absolute; top: 0.065em; width: 100%; }

.para3 .chroma { color: #5d608f; color: rgba(45, 57, 128, 0.75);
text-shadow: 0.04em 0.03em 0 rgba(199, 162, 12, 0.5); } .para3 .chroma:before { color: #dd434d; }

Wood type poster

@font-face – variety of quirky styles Wood type poster

@font-face – variety of quirky styles rgba color – texture,
double-printing Wood type poster

@font-face – variety of quirky styles rgba color – texture,
double-printing :before + content – chromatic type Wood type poster

MAGAZINE Spread

DESIGN SYSTEM

Idea DESIGN SYSTEM

Idea PRINTED BOOK PERIODICAL STANDARD SIZE

Elegance High-contrast type Photos / color Full use of page
PRINTED BOOK PERIODICAL STANDARD SIZE

DESIGN SYSTEM Elegance High-contrast type Photos / color Full use
of page

FONT-FACE COLUMN-COUNT BACKGROUND-SIZE RESPONSIVE Elegance High-contrast type Photos / color
Full use of page

@font-face

from TypeTogether

from Phil’s Fonts / Darden

responsive design

responsive design “The control which designers know in the print
medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility.” John Allsopp, “A Dao of Web Design”

Fluid layout Flexible images Media queries

Fluid layout

Fluid layout Horizontal measurements in %

Fluid layout Horizontal measurements in % FitText.js for full-width heading

Viewport meta tag for mobile devices

Viewport meta tag for mobile devices <meta name="viewport" content="width=device-width, initial-scale=1.0">

Flexible images

Flexible images Scaling background image using background-size

Flexible images Scaling background image using background-size html { background:
#00a3b0 url(images/background.jpg) no-repeat top center; background-size: cover; }

Media queries

Media queries Overriding CSS properties in certain situations

Media queries Overriding CSS properties in certain situations @media screen
and (max-width: 400px) { .heading h2 { font-size: 2em; } }

Media queries Overriding CSS properties in certain situations Choosing breakpoints

1024px breakpoint Before After

640px breakpoint Before / After

.text { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; margin: 0
40% 2em 5%; }

40% 2em 5%; } @media screen and (max-width: 1024px) { .text { margin: 1em 5% 2em; } }

40% 2em 5%; } @media screen and (max-width: 640px) { .text { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } @media screen and (max-width: 1024px) { .text { margin: 1em 5% 2em; } }

Magazine spread

@font-face – elegant, high-contrast Magazine spread

@font-face – elegant, high-contrast responsive design – adapt to canvas
Magazine spread

“How do I translate a CLASSIC LOOK into a web
page?”

Original Form New Form

Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

CSS3 @font-face @media background-size :before/:after column-count rgba text-shadow transform PROGRESSIVE
ENHANCEMENT

Imitate a form

Imitate a form Translate an idea

Imitate a form Translate an idea Full use of medium

is hiring!

is hiring! bit.ly/typekit-api-engineer

Get the LOOK [email protected] – seanmcb.com/sxsw2012 #SexyType @smcbride

Fashion 1 by Stephen Drake 1 Hey there by Petra
Cross 2 Flickr Image Credits Soda Crackers by Lane Pearman 18 Hand-Made Signs in Baltimore by Colin Dunn 17 Brooklyn Circus SF by Damon Styer 19 The Phoenix Pub by Damon Styer 19 Quiet by Damon Styer 19 Far West Harvest by Damon Styer 20 Hand-Made Signs in Baltimore by Colin Dunn 24 Glyphs hunter by Camil Tulcan 59 The a Mano / Dean... by Nick Sherman 60 On the press by Nick Sherman 57 ????? by Nick Sherman 61 Moldy kiss by Nick Sherman 62 Hamilton's Wood Type... by Nick Sherman 63 Modern Honors Bound by Nick Sherman 63 1987 Vogue layout spread by Nate Bolt 95 Responsive Web Design by Jason Santa Maria 108 Moldy kiss by Nick Sherman 62

Get the Look: Use @font-face and CSS3 Like the ...

Get the Look: Use @font-face and CSS3 Like the Stars

More Decks by Sean McBride

Other Decks in Design

Featured

Transcript