Web Typography: An Overview

27
web typography AN OVERVIEW

description

Brad Blackman's PodCamp Nashville 2010 presentation on web typography

Transcript of Web Typography: An Overview

Page 1: Web Typography: An Overview

web typographyA N O V E R V I E W

Page 2: Web Typography: An Overview

i’m brad blackman.I’m an artist, graphic designer, husband, dad, and typophile.

hello.

Page 3: Web Typography: An Overview

typo-what?

Page 4: Web Typography: An Overview

designers ♥ type

Page 5: Web Typography: An Overview

core web fontsAndale Mono

Arial

Arial Black

Comic Sans MS

Courier New

Georgia

ImpactTimes New Roman

Trebuchet MS

Verdana

Lucida Grande & Lucida SansBaskervillePalatinoHelvetica

Page 6: Web Typography: An Overview

viva la revolution!?The revolution will be uninspired.

The revolution will be inappropriate.

The revolution will be acceptable.

The revolution will be unsexy.The revolution will be unremarkable.

The revolution will be low resolution.

(Adapted from http://www.aiga.org)

Page 7: Web Typography: An Overview

Different!Different!dIfferent!

Different!

Page 8: Web Typography: An Overview

some options

Page 9: Web Typography: An Overview

I M A G E R E P L A C E M E N T

Page 10: Web Typography: An Overview

E M B E D D I N G

sIFR

Cufón

FLIR

PIR

Page 11: Web Typography: An Overview

L I N K I N G

Page 12: Web Typography: An Overview

@font-face

Page 13: Web Typography: An Overview

@font-face { font-family: “Fontin Sans”; src: url(“http://server1.com/FontinSansR.otf”); } <!--[if IE]> @font-face { font-family: “Fontin Sans”; src: url(“http://server2.com/FontinSansR.eot”); } <![endif]-- >

Page 14: Web Typography: An Overview

licensing

Page 15: Web Typography: An Overview
Page 16: Web Typography: An Overview

K E R N E S T

Page 17: Web Typography: An Overview
Page 18: Web Typography: An Overview
Page 19: Web Typography: An Overview
Page 20: Web Typography: An Overview
Page 21: Web Typography: An Overview
Page 22: Web Typography: An Overview
Page 23: Web Typography: An Overview
Page 24: Web Typography: An Overview
Page 25: Web Typography: An Overview

all this to say…

Page 26: Web Typography: An Overview

thanks!T W I T T E R :

@bradblackman | @chrome47

Page 27: Web Typography: An Overview

resources/bibliographysxswtypography.com

typekit.com

fontshop.com/blog/?cat=80

kernest.com

fontsquirrel.com

ilovetypography.com

typophile.com

http://blog.themeforest.net/general/ font-licensing-for-the-web/