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.
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.
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.