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 32
Slide 32 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 33
Slide 33 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 34
Slide 34 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 35
Slide 35 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 36
Slide 36 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:#ee4938;
Slide 37
Slide 37 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 38
Slide 38 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 39
Slide 39 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:1.4; /* wraps up */
Slide 40
Slide 40 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 41
Slide 41 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 42
Slide 42 text
NEWER STUFF
Text Shadow(s)
HSLA / RGBA Color
Transforms
Pseudo Class
Selectors
*Text Stroke
*Image Mask
*Background Clip
Slide 43
Slide 43 text
Using these properties is the easy part.
BE THOUGHTFUL
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
bit.ly/17ycGiR
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
TEXT SHADOW
.something{
text-shadow: x,y,blur,color;
}
Slide 48
Slide 48 text
TEXT SHADOW
.something{
text-shadow: 10px 10px 0 #b03136;
}
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
TEXT SHADOWS
.something{
text-shadow:
x,y,blur,color,
x,y,blur,color,
x,y,blur,color,
x,y,blur,color;
}
:BEFORE
h1:before{
content:‘this text is’;
something:anything;
}
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
:AFTER
h1:after{
content:‘this text is’;
something:anything;
}
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
.something:after{
content: ‘CSS Three’;
}
Slide 111
Slide 111 text
A BETTER WAY TO LAYER TYPE
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
I recommend using a data-attribute
on the h1 to keep duplicate content
out of the way of screen readers and
to keep search engines happy.
—Brandon Durham
inking 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 170
Slide 170 text
No content
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
No content
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
No content
Slide 176
Slide 176 text
No content
Slide 177
Slide 177 text
Even More Control
OPENTYPE!
Slide 178
Slide 178 text
No content
Slide 179
Slide 179 text
No content
Slide 180
Slide 180 text
No content
Slide 181
Slide 181 text
No content
Slide 182
Slide 182 text
No content
Slide 183
Slide 183 text
COMMON LIGATURES
.something{
font-feature-settings:"liga" 1;
}