I’m this kid’s father. He’s trying to figure
out what’s going on with my neck.
Slide 5
Slide 5 text
I think about food all the time.
Slide 6
Slide 6 text
My wife had to put me on a font allowance.
Slide 7
Slide 7 text
As web typography
improves, web
designers want the
same level of control
print designers have.
Slide 8
Slide 8 text
But what does
that mean?
Slide 9
Slide 9 text
I want to use all these...
Slide 10
Slide 10 text
Not just these.
Slide 11
Slide 11 text
And put all this...
Slide 12
Slide 12 text
Into this.
Slide 13
Slide 13 text
CSS & Web Safe
Fonts
What can be achieved with the basics?
Slide 14
Slide 14 text
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...
Slide 15
Slide 15 text
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.
Slide 16
Slide 16 text
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;
Slide 17
Slide 17 text
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;
Slide 18
Slide 18 text
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;
Slide 19
Slide 19 text
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;
Slide 20
Slide 20 text
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;
Slide 21
Slide 21 text
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;
Slide 22
Slide 22 text
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;
Slide 23
Slide 23 text
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 */
Slide 24
Slide 24 text
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...
Slide 25
Slide 25 text
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.
Slide 26
Slide 26 text
Still, being web
safe is limiting.
#TypeNerdProblems
#GimmeWebFonts
Slide 27
Slide 27 text
ALTERNATE GOTHIC No. 1
became part of our brand.
Slide 28
Slide 28 text
2009: Our First
Usage of @font-face
Slide 29
Slide 29 text
Web Font
Services
Choices, Resources & Greater Acceptance
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
sprungmarker.de
Slide 39
Slide 39 text
Web Fonts on
Our Own Stuff
Slide 40
Slide 40 text
Alternate Gothic & Proxima Nova
Slide 41
Slide 41 text
Prociono (pro-cho-no?)
via The League of Movable Type
Slide 42
Slide 42 text
FF Meta Serif & Liquorstore
Slide 43
Slide 43 text
Gaining Control
With CSS3
We’ve got web fonts, and we’re not afraid
to use them!
Slide 44
Slide 44 text
text-shadow: -3px 2px 0px #514d46;
Slide 45
Slide 45 text
color: rgba(7, 206, 250, 0.5);
text-shadow: 18px 0px 0 #AD0918;
Controlled Web
Type & Responsive
Can finely-tuned type be fluid, flexible, and
responsive?
Slide 85
Slide 85 text
June 2010 Redesign
Slide 86
Slide 86 text
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
Slide 87
Slide 87 text
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
Slide 88
Slide 88 text
In Other Words...
Slide 89
Slide 89 text
Bazinga!
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
What’s Next?
A quick glance at the future...
Slide 93
Slide 93 text
More support for background-clip:text; and
mask-image & text