Post on 27-Jan-2015
description
WEBFONTS
1
2
AGENDA
1. Who cares?
2. Where do fonts come from?
3. Why do we have to pay for fonts?
4. Webfonts : Embedding
5. Webfonts : Hosting
6. How to use Type like a Pro
1) WHO CARES?
3
4
You have 6 SECONDS to make a good impression.
Be professional.
Shine your shoes.
Press your pants.
Use nice type.
Font is like an individual song
Typeface is like a CD, a collection of songs
Helvetica Nueu Thin is a font
Helvetica Nueu is a typeface
EXAMPLE:
5
2) WHERE DO FONTS COME FROM?
6
7
Moveable type was born during the Renaissance
Printers hired Punchcutters to craft metal type
Punchcutters would turned hand-written alphabets
into metal type.
Outline of a letter is transferred to one end of a steel bar.
The negative space is cut away and a Punch is created
A Matrix is created by imprinting the Punch on a soft metal
Lead is poured into the matrix to produce a single piece of type
The typeface, Garamond, is named after the Punchcutter
Claude Garamond (c. 1480–1561).
Punch & Matrix
A B R I E F H I S T O R Y
A B R I E F H I S T O R Y
8
Metal type was
distributed in boxes
with compartments
Boxes were called
cases
Upper Case and
Lower case letters
Type was set by hand
9
1884 Ottmar Mergenthaler
inventing a typesetting
machine called the
Linotype.
The machine had a
keyboard that the typesetter
used to set lines of type.
A B R I E F H I S T O R Y
10
A B R I E F H I S T O R Y
1950—1980
Phototype setting:
Strobe light through
spinning disk which had
a film negative.
3) WHY DO I HAVE TO PAY FOR FONTS?
11
12
T Y P E D E S I G N I S A N A R T
Skilled artisans design Typefaces
Type foundries pay Type
Designers to turn metal type
designs into Digital versions.
Examples of digital versions of
Garamond
13
1 9 7 6 C O P Y R I G H T L A W
From Wikipedia:
The Copyright Law of the United States encourages the
creation of art and culture by rewarding authors and artists with
a set of exclusive rights.
Federal Copyright law grants authors and artists:
The exclusive right to make and sell copies of their works
The right to create derivative works
The right to perform or display their works publicly.
These exclusive rights are subject to a time limit, and generally
expire 70 years after the author's death.
4) WEBFONTS : EMBEDDING
14
WHERE DO YOU FIND WEBFONTS?
15
16
F R E E : Y O U R C O M P U T E R [ W E B - S A F E ]
Windows fonts / Mac Fonts / Font family
17
F R E E : Y O U R C O M P U T E R [ W E B - S A F E ]
Windows fonts / Mac Fonts / Font family
18
C O M P U T E R F O N T S : H O W T O U S E
p { font-family: Verdana, Geneva, sans-serif ; } p { font-family: ‘Lucida Console’, Monaco, monospace ; } Mac snob p { font-family: ‘Hel Neue, Helvetica, sans-serif ; }
19
fontsquirrel.com Good Font resource
Once you locate a
font, you have to
upload them to your
web server
Use CSS to declare
F R E E : F O N T S Q U I R R E L
20
F R E E : F O N T S Q U I R R E L
21
F R E E : F O N T S Q U I R R E L
Download Folder: OTF files
WHERE TO PURCHASE FONTS
22
23
Adobe.com
Monotype
MyFonts.com
Typography.com*
OkayType*
P U R C H A S E : T Y P E F O U N D R I E S A N D D E S I G N E R S
24
MyFonts.com
Reseller of most all
foundries
Reseller of small font
design firms All kinds
of way to search
What the Font
Keep a library of your
favorite fonts
Remembers every
font you bought
P U R C H A S E : T Y P E F O U N D R I E S A N D D E S I G N E R S
THE TROUBLE WITH BROWSERS
25
You’ll need font files for cross-browser support.
26
F O N T S & B R O W S E R S U P P O R T
27
EOT Embedded Open Type
Internet Explorer
SVG Scaleable Vector Graphics
Others
TTF True Type
OTF Open Type
Safari, Firefox Chrome
F O N T S & B R O W S E R S U P P O R T
28
WOFF (Web Open Font Format)
Developed in 2009
Supported by the W3C, aims to make it the standard
Essentially Open Type or True Type with compression
and additional meta information
All browsers will support this in the future
29
F O N T S & B R O W S E R S U P P O R T
http://caniuse.com/ttf
+ 3 font files* + 3 font files + 3 font files + 3 font files + 3 font files + 3 font files + 3 font files
21 font files
+ 7 font files
28 font files to upload
{ Remember these? OTF files acquired from Font Squirrel }
*EOT + SVG + WOFF
30
31
NOW WHAT
FONT SQUIRREL TO THE RESCUE
32
33
@ F O N T - F A C E G E N E R A T O R
@font-face Generator creates all 4 font formats for browser compatibility.
34
Cowboy Western.otf purchased from MyFonts
@ F O N T - F A C E K I T G E N E R A T O R
Check OPTIMAL and click DOWNLOAD
35
@ F O N T - F A C E K I T G E N E R A T O R
36
A folder with all of your
converted font files,
plus a demo page
will be downloaded to
your computer once
Font Squirrel is done
generating your fonts.
@ F O N T - F A C E K I T G E N E R A T O R
37
@ F O N T - F A C E K I T G E N E R A T O R
@ F O N T - F A C E K I T G E N E R A T O R : D E M O . H T M L
38
Specimen Tab
39
@ F O N T - F A C E G E N E R A T O R : D E M O . H T M L
Sample Layout
40
@ F O N T - F A C E G E N E R A T O R : D E M O . H T M L
Glyphs & Languages
Curly Quote Entity Code: "
41
@ F O N T - F A C E G E N E R A T O R : D E M O . H T M L
Installing Webfonts
@font-face code
@ F O N T - F A C E : S T Y L E S H E E T
42
@font-face {
font-family: CowboyWestern;
src: url('cowboy_western-webfont.eot');
src: url('cowboy_western-webfont.eot?#iefix') format('embedded-opentype'),
url('cowboy_western-webfont.woff') format('woff'),
url('cowboy_western-webfont.ttf') format('truetype'),
url('cowboy_western-webfont.svg#CowboyWestern) format('svg');
font-weight: normal;
font-style: normal;
}
p { font-family: CowboyWestern; }
ICON FONTS
43
44
One font, 249 icons
Pictographs of web-related actions.
CSS control
Easy to style icon color, size, shadow.
Anything that's possible with CSS.
Perfect on Retina Displays
Icons are vectors, which mean they're gorgeous
on high-resolution displays.
Infinite scalability
Scalable vector graphics means every icon
looks awesome at any size.
F R E E F O N T : F O N T - A W E S O M E / I C O N F O N T
45
Where to download:
http://fortawesome.
github.com/
Font-Awesome/
- - - - - - - - - - - - - - -
bigwdesign.com/
webfonts/font-
awesome/github/
docs/test.html
F R E E F O N T : F O N T - A W E S O M E / I C O N F O N T
6) WEBFONTS : HOSTING
46
47
google.com/webfonts Hosted solution
You don’t have to install fonts
F R E E F O N T S : G O O G L E F O N T S
U S I N G : G O O G L E F O N T S
48
49
U S I N G : G O O G L E F O N T S
50
U S I N G : G O O G L E F O N T S
U S I N G : G O O G L E F O N T S
51
U S I N G : G O O G L E F O N T S
52
53
U S I N G : G O O G L E F O N T S
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700,800' rel='stylesheet' type='text/css'>
Paste into Header of your HTML
How to use the font in your CSS
h1 { font-family: ‘Raleway,’ sans-serif; font-weight: 400; }
W E B F O N T S : H O S T I N G F O N T S
54
Fontdeck.com
Typekit.com
Webtype.com
Fonts.com
55
http://sprungmarker.de/wp‐content/uploads/webfont‐services/
W E B F O N T S : H O S T I N G F O N T S
56
W E B F O N T S : H O S T I N G F O N T S
57
( V A R I O U S S M A L L F O U N D R I E S )
H O S T I N G F O N T S : F O N T D E C K
58
H O S T I N G F O N T S : F O N T D E C K / P R I C I N G
THEIR PLAN:
$7.5 per font
per year.
Unlimited
fonts and
websites.
59
( A D O B E )
H O S T I N G F O N T S : T Y P E K I T
60
H O S T I N G F O N T S : T Y P E K I T / P R I C I N G
61
H O S T I N G F O N T S : F O N T S . C O M
( M O N O T Y P E , L I N O T Y P E , I T C )
62
H O S T I N G F O N T S : F O N T S . C O M / P R I C I N G
MY PLAN:
$10 per month.
Unlimited
fonts and
websites.
F O N T S . C O M : U S I N G
63
F O N T S . C O M : U S I N G
64
65
F O N T S . C O M : U S I N G
Click Publish Options
Add & Edit Fonts
Add & Edit Domains
F O N T S . C O M : U S I N G
66
CSS code
HTML header code:
Link to javascript
Fonts.com
67
F O N T S . C O M : U S I N G
HTML header code:
Links to stylesheet at
Fonts.com
68
F O N T S . C O M : U S I N G
Upgrade plan to buy fonts and self-host
6) HOW TO USE TYPE LIKE A PRO
69
70
“Hardly anyone can discern good
typography from bad typography,
but everyone can feel it.” —Oliver Richtenstien
ia.com
T Y P E L I K E A P R O : U S E N I C E T Y P E
71
1. Use curly quotes
2. Use ample leading (line-height)
3. Never, never, never justify type
4. Don’t make your columns too skinny or too wide
5. Don’t use more than 3 typefaces per page
6. Choose an appropriate typeface
7. Avoid Comic Sans
8. Don’t use EM or BOLD, use fonts that are cut Italic or Bold
U S I N G T Y P E L I K E A P R O
72
Not so Good
T Y P E L I K E A P R O : C H A R A C T E R E N T I T I E S
Good
Left Quote : “
Right Quote : ”
Apostrophe : ’
T Y P E L I K E A P R O : L I N E - H E I G H T / B R E A T H E
73
OK Better
T Y P E L I K E A P R O : D O N ' T J U S T I F Y
74
Blah Better
75
Amateurish and overused Nice Typefaces
T Y P E L I K E A P R O : U S E N I C E T Y P E
ALRIGHT SANS MEDIUM
CLARENDON
PLUTO HEAVY
76
R E S O U R C E S : T W I T T E R
FONT VS TYPEFACE
77
THANK YOU FOR LISTENING
: )
78