Webfonts and Web Typography

78
WEBFONTS 1

description

How to find webfonts and use them on your website.

Transcript of Webfonts and Web Typography

Page 1: Webfonts and Web Typography

WEBFONTS

1

Page 2: Webfonts and Web Typography

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

Page 3: Webfonts and Web Typography

1) WHO CARES?

3

Page 4: Webfonts and Web Typography

4

You have 6 SECONDS to make a good impression.

Be professional.

Shine your shoes.

Press your pants.

Use nice type.

Page 5: Webfonts and Web Typography

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

Page 6: Webfonts and Web Typography

2) WHERE DO FONTS COME FROM?

6

Page 7: Webfonts and Web Typography

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

Page 8: Webfonts and Web Typography

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

Page 9: Webfonts and Web Typography

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

Page 10: Webfonts and Web Typography

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.

Page 11: Webfonts and Web Typography

3) WHY DO I HAVE TO PAY FOR FONTS?

11

Page 12: Webfonts and Web Typography

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

Page 13: Webfonts and Web Typography

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.

Page 14: Webfonts and Web Typography

4) WEBFONTS : EMBEDDING

14

Page 15: Webfonts and Web Typography

WHERE DO YOU FIND WEBFONTS?

15

Page 16: Webfonts and Web Typography

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

Page 17: Webfonts and Web Typography

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

Page 18: Webfonts and Web Typography

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 ; }

Page 19: Webfonts and Web Typography

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

Page 20: Webfonts and Web Typography

20

F R E E : F O N T S Q U I R R E L

Page 21: Webfonts and Web Typography

21

F R E E : F O N T S Q U I R R E L

Download Folder: OTF files

Page 22: Webfonts and Web Typography

WHERE TO PURCHASE FONTS

22

Page 23: Webfonts and Web Typography

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

Page 24: Webfonts and Web Typography

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

Page 25: Webfonts and Web Typography

THE TROUBLE WITH BROWSERS

25

Page 26: Webfonts and Web Typography

You’ll need font files for cross-browser support.

26

Page 27: Webfonts and Web Typography

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

Page 28: Webfonts and Web Typography

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

Page 29: Webfonts and Web Typography

29

F O N T S & B R O W S E R S U P P O R T

http://caniuse.com/ttf

Page 30: Webfonts and Web Typography

+ 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

Page 31: Webfonts and Web Typography

31

NOW WHAT

Page 32: Webfonts and Web Typography

FONT SQUIRREL TO THE RESCUE

32

Page 33: Webfonts and Web Typography

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.

Page 34: Webfonts and Web Typography

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

Page 35: Webfonts and Web Typography

35

@ F O N T - F A C E K I T G E N E R A T O R

Page 36: Webfonts and Web Typography

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

Page 37: Webfonts and Web Typography

37

@ F O N T - F A C E K I T G E N E R A T O R

Page 38: Webfonts and Web Typography

@ 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

Page 39: Webfonts and Web Typography

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

Page 40: Webfonts and Web Typography

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: "

Page 41: Webfonts and Web Typography

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

Page 42: Webfonts and Web Typography

@ 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; }

Page 43: Webfonts and Web Typography

ICON FONTS

43

Page 44: Webfonts and Web Typography

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

Page 45: Webfonts and Web Typography

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

Page 46: Webfonts and Web Typography

6) WEBFONTS : HOSTING

46

Page 47: Webfonts and Web Typography

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

Page 48: Webfonts and Web Typography

U S I N G : G O O G L E F O N T S

48

Page 49: Webfonts and Web Typography

49

U S I N G : G O O G L E F O N T S

Page 50: Webfonts and Web Typography

50

U S I N G : G O O G L E F O N T S

Page 51: Webfonts and Web Typography

U S I N G : G O O G L E F O N T S

51

Page 52: Webfonts and Web Typography

U S I N G : G O O G L E F O N T S

52

Page 53: Webfonts and Web Typography

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; }

Page 54: Webfonts and Web Typography

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

Page 55: Webfonts and Web Typography

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

Page 56: Webfonts and Web Typography

56

W E B F O N T S : H O S T I N G F O N T S

Page 57: Webfonts and Web Typography

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

Page 58: Webfonts and Web Typography

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.

Page 59: Webfonts and Web Typography

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

Page 60: Webfonts and Web Typography

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

Page 61: Webfonts and Web Typography

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 )

Page 62: Webfonts and Web Typography

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.

Page 63: Webfonts and Web Typography

F O N T S . C O M : U S I N G

63

Page 64: Webfonts and Web Typography

F O N T S . C O M : U S I N G

64

Page 65: Webfonts and Web Typography

65

F O N T S . C O M : U S I N G

Click Publish Options

Add & Edit Fonts

Add & Edit Domains

Page 66: Webfonts and Web Typography

F O N T S . C O M : U S I N G

66

CSS code

HTML header code:

Link to javascript

Fonts.com

Page 67: Webfonts and Web Typography

67

F O N T S . C O M : U S I N G

HTML header code:

Links to stylesheet at

Fonts.com

Page 68: Webfonts and Web Typography

68

F O N T S . C O M : U S I N G

Upgrade plan to buy fonts and self-host

Page 69: Webfonts and Web Typography

6) HOW TO USE TYPE LIKE A PRO

69

Page 70: Webfonts and Web Typography

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

Page 71: Webfonts and Web Typography

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

Page 72: Webfonts and Web Typography

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 : &#8220;

Right Quote : &#8221;

Apostrophe : &#8217;

Page 73: Webfonts and Web Typography

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

Page 74: Webfonts and Web Typography

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

Page 75: Webfonts and Web Typography

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

Page 76: Webfonts and Web Typography

76

R E S O U R C E S : T W I T T E R

Page 77: Webfonts and Web Typography

FONT VS TYPEFACE

77

Page 78: Webfonts and Web Typography

THANK YOU FOR LISTENING

: )

78