Webfonts and Web Typography

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

2

You have 6 SECONDS to make a good impression.

Be professional.

Shine your shoes.

Press your pants.

Use nice type.

4

Font is like an individual song

Typeface is like a CD, a collection of songs

EXAMPLE:

Helvetica Nueu Thin is a font

Helvetica Nueu is a typeface

5

2) WHERE DO FONTS
COME FROM?

6

A BRIEF HISTORY

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
Punch & Matrix
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).

7

A BRIEF HISTORY

Metal type was
distributed in boxes
with compartments

Boxes were called
cases

Upper Case and
Lower case letters

Type was set by hand

8

A BRIEF HISTORY

1884 Ottmar Mergenthaler
inventing a typesetting
machine called the
Linotype.

The machine had a
keyboard that the typesetter
used to set lines of type.

9

A BRIEF HISTORY

1950—1980
Phototype setting:
Strobe light through
spinning disk which had
a film negative.

10

3) WHY DO I HAVE
TO PAY FOR FONTS?

11

TYPE DESIGN IS AN ART

Skilled artisans design Typefaces


Type foundries pay Type


Designers to turn metal type
designs into Digital versions.

Examples of digital versions of


Garamond

12

1976 COPYRIGHT LAW

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.

13

4) WEBFONTS : EMBEDDING

14

WHERE DO YOU FIND WEBFONTS?

15

FREE : YOUR COMPUTER [WEB-SAFE]

Windows fonts / Mac Fonts / Font family

16

FREE : YOUR COMPUTER [WEB-SAFE]

Windows fonts / Mac Fonts / Font family

17

COMPUTER FONTS : HOW TO USE

p { font-family: Verdana, Geneva, sans-serif ; }

p { font-family: ‘Lucida Console’, Monaco, monospace ; }

Mac snob

p { font-family: ‘Hel Neue, Helvetica, sans-serif ; }

18

FREE : FONT SQUIRREL

fontsquirrel.com

Good Font resource

Once you locate a
font, you have to
upload them to your
web server

Use CSS to declare

19

FREE : FONT SQUIRREL

Download Folder: OTF files

21

WHERE TO PURCHASE FONTS

22

PURCHASE : TYPE FOUNDRIES AND DESIGNERS

Adobe.com

Monotype

MyFonts.com

Typography.com*

OkayType*

23

PURCHASE : TYPE FOUNDRIES AND DESIGNERS

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

24

THE TROUBLE WITH BROWSERS

25

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

26

FONTS & BROWSER SUPPORT

TTF True Type EOT SVG
Embedded Scaleable
OTF Open Type Open Type Vector
Graphics

Safari, Internet Others
Firefox Explorer
Chrome

27


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


28


http://caniuse.com/ttf

29

{ Remember these? OTF files acquired from Font Squirrel }

+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

*EOT + SVG + WOFF
28 font files to upload

30

FONT SQUIRREL TO THE RESCUE

32

@FONT-FACE GENERATOR

@font-face Generator creates all 4 font formats for browser compatibility.

33

@FONT-FACE KIT GENERATOR

Cowboy Western.otf purchased from MyFonts

Check OPTIMAL and click DOWNLOAD
34


35


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.

36


37

@FONT-FACE KIT GENERATOR : DEMO.HTML

Specimen Tab

38

@FONT-FACE GENERATOR : DEMO.HTML

Sample Layout

39


Glyphs & Languages

Curly Quote Entity
Code: "

40


Installing Webfonts

@font-face code

41

@FONT-FACE : STYLESHEET

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

42

FREE FONT : FONT-AWESOME / ICON FONT

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.

44

FREE FONT : FONT-AWESOME / ICON FONT

Where to download:
http://fortawesome.
github.com/
Font-Awesome/

---------------

bigwdesign.com/
webfonts/font-
awesome/github/
docs/test.html

45

6) WEBFONTS : HOSTING

46

FREE FONTS : GOOGLE FONTS

google.com/webfonts

 Hosted solution
 You don’t have to
install fonts

47

USING : GOOGLE FONTS

Paste into Header of your HTML

<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700,800'
rel='stylesheet' type='text/css'>

How to use the font in your CSS

h1 { font-family: ‘Raleway,’ sans-serif; font-weight: 400; }

53

WEBFONTS : HOSTING FONTS

Fontdeck.com

Typekit.com

Webtype.com

Fonts.com

54


http://sprungmarker.de/wp‐content/uploads/webfont‐services/

55


56

HOSTING FONTS : FONTDECK

(VARIOUS SMALL FOUNDRIES)

57

HOSTING FONTS : FONTDECK / PRICING

THEIR PLAN:
$7.5 per font
per year.
Unlimited
fonts and
websites.

58

HOSTING FONTS : TYPEKIT

(ADOBE)

59

HOSTING FONTS : TYPEKIT / PRICING

60

HOSTING FONTS : FONTS.COM

(MONOTYPE, LINOTYPE, ITC)

61

HOSTING FONTS : FONTS.COM / PRICING

MY PLAN:
$10 per month.
Unlimited
fonts and
websites.

62

FONTS.COM : USING

Add & Edit Fonts
Click Publish Options
Add & Edit Domains

65

FONTS.COM : USING

HTML header code:
Link to javascript
Fonts.com

CSS code

66

FONTS.COM : USING

HTML header code:
Links to stylesheet at
Fonts.com

67

FONTS.COM : USING

Upgrade plan to buy
fonts and self-host

68

6) HOW TO USE TYPE LIKE A PRO

69

TYPE LIKE A PRO: USE NICE TYPE

“Hardly anyone can discern good
typography from bad typography,
but everyone can feel it.”
—Oliver Richtenstien
ia.com

70

USING TYPE LIKE A PRO

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

71

TYPE LIKE A PRO : CHARACTER ENTITIES

Not so Good Good

Left Quote : “
Right Quote : ”

Apostrophe : ’

72

TYPE LIKE A PRO: LINE-HEIGHT / BREATHE

OK Better

73

TYPE LIKE A PRO: DON'T JUSTIFY

Blah Better

74

TYPE LIKE A PRO: USE NICE TYPE

Nice Typefaces Amateurish and overused
ALRIGHT SANS MEDIUM

PLUTO HEAVY

CLARENDON

75

THANK YOU FOR LISTENING

:)

78

Webfonts and Web Typography

More Related Content

Similar to Webfonts and Web Typography (20)

More from Jan Wilson (10)

Recently uploaded (20)

Webfonts and Web Typography