Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limited palette of fonts from which to choose—essentially, Arial (yawn), Times (yawn), and Georgia (yawwwwwn). Design is about overcoming the limitations of a medium, and Web design is no different. In this session, Jason will show you how to use fluid typography, browser-safe fonts, and type on images to create robust scalable designs to achieve great typography without resorting to typing in images or Adobe Flash. You’ll also learn how to use CSS to download any font you want to use in your Web designs, and to use downloadable fonts, despite the limitations of some browsers.
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
Web Typography 2009
1. { Many Types, Many Faces}
W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Jason Cranford Teague
Bright Eye Media
@jasonspeaking
Voices That Matter | 29 April 2009
San Francisco, California
37. Windows XP
+9 Fonts
Franklin Gothic Medium
Lucid Console
Lucida Sans Unicode
Marlett
Microsoft Sans Serif
Palatino Linotype
Symbol
Tahoma
Wingdings
41. Mac OS X
+30 Fonts
American Typewriter Courier Monaco
Apple Chancery Didot Optima
Apple Symbols Futura Papyrus
Baskerville Geneva Tahoma
Big Caslon Gill Sans Taipei
Brush Script Helvetica Times
Chalkboard Helvetica Neue Zapf Dingbats
Charcoal CY Herculanum Zapfino
Cochin Hoefler Text
Cooper Lucida Grande
Copperplate Marker Felt
43. Apple iLife
+13 Fonts
Academy Engraved Palatino
Bank Gothic Portago
BlairMDITC TT Santa Fe
Bodoni SvtyTwo ITC TT Savoye
Bradley Hand ITC TT Snell Roundhand
Cracked Stone Sans
Handwriting – Dakota
99. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
100. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
101. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
102. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
103. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
104. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
105. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque non
felis vel lorem tempor ultricies. Class aptent taciti
sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; In hac habitasse platea dictumst.
Aenean venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi ultricies
magna, id placerat lorem.
109. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
110. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
111. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
112. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts Core Web Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
113. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts Core Web Fonts Generic Font-families
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
114. For headline copy use fonts with similar
widths and kerning.
Web Typography
115. For headline copy use fonts with similar
widths and kerning.
Web Typography
116. For body copy select fonts with bold, italic,
and bold/italic versions.
117. For body copy select fonts with bold, italic,
and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Arial
118. For body copy select fonts with bold, italic,
and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Arial
119. For body copy select fonts with bold, italic,
and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Microsoft Sans Serif
120. Test the different fonts in different
combinations.
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
121. Test the different fonts in different
combinations.
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque non
felis vel lorem tempor ultricies. Class aptent taciti
sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; In hac habitasse platea dictumst.
Aenean venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi ultricies
magna, id placerat lorem.
124. { Many Types, Many Faces}
W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Questions
www.speaking-in-styles.com/web-typography
@jasonspeaking
www.brighteyemedia.com
Notas del editor
Using Flash
text in images
and HTML Text
Authentic
Good
But we all know that if you want to be the Favorite Web Site Award winner, you have to use flash.
...
Limited styles, limited controls, and most importantly limited font-family choices.
Limits
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
Limits
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
Step Inside Design May/June 2008
When you choose your font, you do not change the meaning of the letter.. a T is still a T, but by changing it's skin, you change what it is saying, adding another level of communication.
with CSS, we can not only declare a single font, but back-up fonts and generic font families.
If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
with CSS, we can not only declare a single font, but back-up fonts and generic font families.
If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
Georgia is a transitional serif typeface designed in 1993[1] by Matthew Carter
and hinted by Tom Rickner for the Microsoft Corporation, as the serif companion to the first Microsoft sans serif screen font, Verdana. The initial version of the font was released on November 1, 1996 as part of the Core fonts for the Web collection. Later, it was bundled with Internet Explorer 4.0 supplemental font pack.
http://en.wikipedia.org/wiki/Georgia_%28typeface%29
Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).
http://en.wikipedia.org/wiki/Verdana
Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).
http://en.wikipedia.org/wiki/Verdana
webdings
Core fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet.
The project was terminated in August 2002,
The project was terminated in August 2002, allegedly due to frequent EULA violations.[1] However, that same EULA allows redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products.
We use these because they are almost certain to be installed on all computers in use today.
BUT there are other fonts that we can rely on to be installed depending on the operating system.
Segoe UI, replaces Tahoma for help text.
Similar to Frutigar
Segoe UI, replaces Tahoma for help text.
Similar to Frutigar
62 overlap
62 overlap
62 overlap
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Core fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet. The project was terminated in August 2002, allegedly due to frequent EULA violations.[1] However, that same EULA allows redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products. As a result, they are still available for download on third-party websites.
200 fonts is good, but as I mentioned earlier, there are 10's of thousands of font.
Font foundries like Emigre
or chank off fonts for purchase
and some great fonts, like diavlo, are even free!
Wouldn't it be great if we could use any font in our designs just by downloading it.
We can (sort of)
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to downlaod it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to downlaod it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to downlaod it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to downlaod it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to downlaod it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to downlaod it
add font name to the font-family list.
add font name to the font-family list.
add font name to the font-family list.
add font name to the font-family list.
It's a question of file formats.
Think of images. We download images because they all support the same basic image format types, GIF, JPEG, PNG
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript.
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
-->
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript.
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
-->
But, until recently these font types not avaiable to browsers because of concerns over possible IP violations.
-->
Intellectual property rights are a bundle of exclusive rights over creations of the mind, both artistic and commercial. The former is covered by copyright laws, which protect creative works such as books, movies, music, paintings, photographs, and software and gives the copyright holder exclusive right to control reproduction or adaptation of such works for a certain period of time.[1]
Remember EULA. Most fonts EULAs do not explicitly permit for use as downloaded fonts on Web pages.
-->
Some end-user license agreements (EULAs) accompany shrink wrapped software that is presented to a user sometimes on paper or more usually electronically, during the installation procedure. The user has the choice of accepting or rejecting the agreement, without reading it first. The installation of the software is conditional to the user accepting the agreement and thereby agreeing to abide by its terms. Once the user has installed the software, then he/she has the opportunity to read the license agreement in detail.
MS developed the .eot format. Proprietary.
recently tried to make it an open standard.
resistance from the rest of the browsers.
Barrier to entry
Embedded OpenType (EOT) fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files usually use the extension ".eot".
One noticeable draw back, first time it loads, there is a few seconds pause where the font is not readt for use, and then the text will blink in.
SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
One noticeable draw back, first time it loads, there is a few seconds pause where the font is not readt for use, and then the text will blink in.
SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
One noticeable draw back, first time it loads, there is a few seconds pause where the font is not readt for use, and then the text will blink in.
SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
We have four sources for defining fonts
We have four ways of adding font-families to our pages...
Now e need a way to use these different sources together using...
We have four ways of adding font-families to our pages...
Now e need a way to use these different sources together using...
We have four ways of adding font-families to our pages...
Now e need a way to use these different sources together using...
We have four ways of adding font-families to our pages...
Now e need a way to use these different sources together using...