Font swoon
Click here to load reader
-
Upload
sara-cannon -
Category
Technology
-
view
132 -
download
2
description
Transcript of Font swoon
![Page 1: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/1.jpg)
Sara Cannon Montreal Girl Geek
Font: Acta Poster
![Page 2: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/2.jpg)
SARA CANNONCo-founder / Creative Director At Range sara-cannon.com @saracannon slideshare.net/saracannon
Fonts: Vitesse, ARS Maque!e
![Page 3: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/3.jpg)
# fontswoon
Font: Pacifico
![Page 4: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/4.jpg)
Web Design is 95%
Typography
informationarchitects.jp/en/the-web-is-all-about-typography-period
Font: Adelle
![Page 5: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/5.jpg)
![Page 6: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/6.jpg)
Web Examples
Font: Omnes
![Page 7: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/7.jpg)
Liquor Store
FF Meta Serif
trentwalton.com/2011/05/10/fit-to-scale
![Page 8: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/8.jpg)
FF Din
FF Tisa
jaxvineyards.com
![Page 9: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/9.jpg)
League Gothic
Le Monde Courrier
browsehappy.com
![Page 10: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/10.jpg)
FF Din
designmadeingermany.de/magazin/5
![Page 11: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/11.jpg)
Fonts! Fonts! Fonts!
Font: Bello
![Page 12: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/12.jpg)
Slab-Serif
Fonts: Droid Serif & Arvo
Serif&
![Page 13: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/13.jpg)
AFonts: Droid Serif & Arvo
A vs
![Page 14: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/14.jpg)
Arvo
@font-face
Made By: Anton Kovit files.korkork.com
![Page 15: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/15.jpg)
![Page 16: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/16.jpg)
Archer
Made By: H&FJ typography.com
![Page 17: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/17.jpg)
![Page 18: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/18.jpg)
Adelle
@font-face
Made By: Type Together type-together.com
![Page 19: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/19.jpg)
![Page 20: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/20.jpg)
Adelle
JAF Facit Web
![Page 21: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/21.jpg)
Cambria
@font-face
Made By: Ascender Fonts ascenderfonts.com
![Page 22: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/22.jpg)
![Page 23: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/23.jpg)
Clarendon
@font-face
Made By: Bitstream bitstream.com
![Page 24: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/24.jpg)
![Page 25: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/25.jpg)
Chaparral Pro
@font-face
Made By: Adobe adobe.com
![Page 26: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/26.jpg)
![Page 27: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/27.jpg)
Droid Serif
@font-face
Made By: Google code.google.com/android
![Page 28: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/28.jpg)
![Page 29: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/29.jpg)
Museo Slab
@font-face
Made By: exljbris exljbris.com
![Page 30: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/30.jpg)
![Page 31: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/31.jpg)
Museo Slab
![Page 32: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/32.jpg)
Vitesse
Made By: H&FJ typography.com
![Page 33: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/33.jpg)
![Page 34: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/34.jpg)
Sans-Serif
Font: ARS Maque!e
![Page 35: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/35.jpg)
Avenir
Made By: Adrian Frutiger Linotype.com
![Page 36: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/36.jpg)
![Page 37: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/37.jpg)
Open Sans
@font-face
Made By: Google
google.com/webfonts/specimen/Open+Sans
![Page 38: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/38.jpg)
![Page 39: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/39.jpg)
Brandon Grotesque
@font-face
Made By: HVD hvdfonts.com
![Page 40: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/40.jpg)
![Page 41: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/41.jpg)
DIN
@font-face
Made By: Linotype linotype.com
![Page 42: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/42.jpg)
![Page 43: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/43.jpg)
Futura
@font-face
Made By: BitStream Adobe.com
![Page 44: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/44.jpg)
![Page 45: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/45.jpg)
Gotham
Made By: H&FJ typography.com
![Page 46: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/46.jpg)
![Page 47: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/47.jpg)
Proxima Nova
@font-face
Made By: Mark Simonson ms-studio.com
![Page 48: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/48.jpg)
![Page 49: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/49.jpg)
Omnes
Made By: Joshua Darden dardenstudio.com
@font-face
![Page 50: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/50.jpg)
![Page 51: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/51.jpg)
Display Type
Font: Bello
![Page 52: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/52.jpg)
Mensch
@font-face
Made By: Morgan Kuntson los!ype.com
![Page 53: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/53.jpg)
![Page 54: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/54.jpg)
ATRAMENT
@font-face
Made By: Suitcase Type Foundrysuitcasetype.com
![Page 55: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/55.jpg)
sco!berkun.com
Atrament Web
![Page 56: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/56.jpg)
LEAGUE GOTHIC
@font-face
Made By: The League of Moveable Typetheleagueofmoveabletype.com
![Page 57: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/57.jpg)
![Page 58: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/58.jpg)
Bello Script
@font-face
Made By: Underware underware.nl
![Page 59: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/59.jpg)
Franchise
Made By: Derek Weathersbee los!ype.com
![Page 60: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/60.jpg)
bklynsoap.com
Franchise
OLD
![Page 61: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/61.jpg)
Homestead
@font-face
Made By: Luke Lisi los!ype.com
![Page 62: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/62.jpg)
Ranger
Made By: Evan Huwa los!ype.com
![Page 63: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/63.jpg)
Type Foundries
Font: Adelle
![Page 64: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/64.jpg)
Lost Type
los!ype.com
![Page 65: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/65.jpg)
![Page 66: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/66.jpg)
exljbris
exljbris.com
![Page 67: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/67.jpg)
![Page 68: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/68.jpg)
font font
font-font.com
![Page 69: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/69.jpg)
![Page 70: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/70.jpg)
H&FJ
typography.com
![Page 71: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/71.jpg)
![Page 72: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/72.jpg)
![Page 73: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/73.jpg)
![Page 74: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/74.jpg)
League of Moveable Type
theleagueofmoveabletype.com
![Page 75: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/75.jpg)
![Page 76: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/76.jpg)
Open Source!Ofl (open Font License)
theleagueofmoveabletype.com/manifesto
![Page 77: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/77.jpg)
House Industries
houseind.com
![Page 78: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/78.jpg)
![Page 79: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/79.jpg)
ARS Type
arstype.angusrshamal.com
![Page 80: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/80.jpg)
![Page 81: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/81.jpg)
Suitcase Type Foundry
suitcasetype.com
![Page 82: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/82.jpg)
![Page 83: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/83.jpg)
BEYOND THE SYSTEM FONT!
Font: Brandon Grotesque
![Page 84: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/84.jpg)
![Page 85: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/85.jpg)
.selector { font-‐family: Helvetica, sans-‐serif;}
.selector { font-‐family: “Droid-‐Sans”, Helvetica, sans-‐serif;}
![Page 86: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/86.jpg)
@font-face
![Page 87: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/87.jpg)
@font-‐face { font-‐family: Omnes; src: url(fonts/omnes.otf);}
![Page 88: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/88.jpg)
Paulirish.com/2009/bulletproof-font-face-
implementation-syntax/
![Page 89: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/89.jpg)
Typekit / Other Paid Hosts
Google Api
![Page 90: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/90.jpg)
Fontsquirrel.com
![Page 91: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/91.jpg)
sprungmarker.de/wp-content/uploads/webfont-services
![Page 92: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/92.jpg)
typekit.com
![Page 93: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/93.jpg)
![Page 94: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/94.jpg)
CRAFT
YOUR CSS
Font: League Gothic
![Page 95: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/95.jpg)
px em remvs vs
![Page 96: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/96.jpg)
.selector { font-‐size: 16px;}
![Page 97: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/97.jpg)
.container { font-‐size: 16px;}.container p { font-‐size: .4em;}
![Page 98: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/98.jpg)
Calculating REMTarget Size / Base Size = Value
![Page 99: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/99.jpg)
html { font-‐size: 16px;}.selector { /* 24 / 16 = 1.5 */ font-‐size: 1.5rem;}
![Page 100: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/100.jpg)
![Page 101: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/101.jpg)
.selector { line-‐height: 1.75em;}
![Page 102: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/102.jpg)
![Page 103: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/103.jpg)
.selector1 { letter-‐spacing: 0em;}
.selector2 { letter-‐spacing: .025em;}
![Page 104: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/104.jpg)
![Page 105: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/105.jpg)
h1 { text-‐rendering: optimiseLegibility;}
![Page 106: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/106.jpg)
![Page 107: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/107.jpg)
.selector { text-‐shadow: horizontal-‐offset vertical-‐offset blur color;
}
![Page 108: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/108.jpg)
.selector { text-‐shadow: 1px 1px 2px #333;}
designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste
![Page 109: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/109.jpg)
text-shadow for readability
![Page 110: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/110.jpg)
Sub-header
AaSub-header
![Page 111: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/111.jpg)
Menu Item
AaMenu Item
![Page 112: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/112.jpg)
text-shadow for effect
![Page 113: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/113.jpg)
.selector { color: #707070; text-‐shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;}
designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste
![Page 114: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/114.jpg)
mothereffingtextshadow.com
![Page 115: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/115.jpg)
![Page 116: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/116.jpg)
![Page 117: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/117.jpg)
.selector { -‐webkit-‐transform: rotate(-‐90deg); -‐moz-‐transform: rotate(-‐90deg); transform: rotate(-‐90deg);}
![Page 118: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/118.jpg)
![Page 119: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/119.jpg)
.selector { background: url(img/paint.png) repeat, white; -‐webkit-‐text-‐fill-‐color: transparent; -‐webkit-‐background-‐clip: text;}
![Page 120: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/120.jpg)
Test & Tweak
Font: Carton
![Page 121: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/121.jpg)
check all browsers
![Page 122: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/122.jpg)
TYPE CRUNCH!!!
![Page 123: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/123.jpg)
![Page 124: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/124.jpg)
Disable for IE
![Page 125: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/125.jpg)
Disable for Windows
![Page 126: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/126.jpg)
Disable for Firefox
![Page 127: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/127.jpg)
Firefox on all of Windows
![Page 128: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/128.jpg)
Neat ype Scripts
Font: Sail
T
![Page 129: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/129.jpg)
Lettering.js
le!eringjs.com
![Page 130: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/130.jpg)
![Page 131: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/131.jpg)
![Page 132: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/132.jpg)
![Page 133: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/133.jpg)
kern.js
kernjs.com
![Page 134: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/134.jpg)
![Page 135: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/135.jpg)
FitText
fi!extjs.com
![Page 136: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/136.jpg)
![Page 137: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/137.jpg)
Drop Caps
![Page 138: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/138.jpg)
wordpress.org/extend/plugins/drop-caps/
![Page 139: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/139.jpg)
p:first-‐child::first-‐letter { float: left; color: #A6EEFF; font-‐size: 75px; line-‐height: 60px; padding-‐top: 4px; padding-‐right: 8px; padding-‐left: 3px;}
![Page 140: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/140.jpg)
Other Tools
Font: Ranger
![Page 141: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/141.jpg)
What Font
chengyinliu.com/whatfont.html
![Page 142: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/142.jpg)
![Page 143: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/143.jpg)
Google Font Previewer
github.com/pamelafox/font-previewer-extension
![Page 144: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/144.jpg)
![Page 145: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/145.jpg)
MIN
min.artequalswork.com
![Page 146: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/146.jpg)
![Page 147: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/147.jpg)
![Page 148: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/148.jpg)
Find Inspiration
![Page 149: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/149.jpg)
ilovetypography.com
![Page 150: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/150.jpg)
![Page 151: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/151.jpg)
webtypography.net
![Page 152: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/152.jpg)
![Page 153: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/153.jpg)
typographica.org
![Page 154: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/154.jpg)
![Page 155: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/155.jpg)
fontsinuse.com
![Page 156: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/156.jpg)
![Page 157: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/157.jpg)
friendsoftype.com
![Page 158: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/158.jpg)
![Page 159: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/159.jpg)
typography-daily.com
![Page 160: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/160.jpg)
![Page 161: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/161.jpg)
siteinspire.net
![Page 162: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/162.jpg)
![Page 163: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/163.jpg)
typographyserved.com
![Page 164: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/164.jpg)
![Page 165: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/165.jpg)
ministryoftype.co.uk
![Page 166: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/166.jpg)
![Page 167: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/167.jpg)
dribbble.com
![Page 168: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/168.jpg)
![Page 169: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/169.jpg)
fontsinuse.com
![Page 170: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/170.jpg)
![Page 171: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/171.jpg)
What Not to Do
Font: Futura
![Page 172: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/172.jpg)
Style Your Website
With Papyrus
(Sorry Every Mediterranean Restaurant Website Ever)
![Page 173: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/173.jpg)
Use Non-Web-Licensed Fonts:
Archer or GOTHAM
![Page 174: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/174.jpg)
Never EVER Use The Infamous Comic Sans
(It doesn’t matter that you think it’s good for wire-framing)
![Page 175: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/175.jpg)
Even If You Think Its Ironic
![Page 176: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/176.jpg)
e Infamous Eye Bleed
![Page 177: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/177.jpg)
FREE SET OF STEAK KNIVES!!!
EYE BLEED!!!
AHHH THE BURNING!
![Page 178: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/178.jpg)
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
EYE BLEED!!!
AHHH THE BURNING!
![Page 179: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/179.jpg)
What To Do
Font: DIN Light Alt
![Page 180: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/180.jpg)
Create A Typographic Style Guide For
Your eme
![Page 181: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/181.jpg)
![Page 182: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/182.jpg)
Obey Licensing
![Page 183: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/183.jpg)
Follow the Industry
Font: Museo Sab
![Page 184: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/184.jpg)
Follow The Industry
@JasonSantaMaria
@veen
@brucel
@ilovetypography
@jessicahische
@fontsquirrel
@typekit
@h_
@clagnut
@fchimero
![Page 185: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/185.jpg)
LIFE IS SHORT, ART IS LONG
Typography is Everything.
CODE IS POETRY.
Font: Pacifico, League Gothic
![Page 186: Font swoon](https://reader038.fdocuments.in/reader038/viewer/2022102319/54c701d34a7959f8558b45ec/html5/thumbnails/186.jpg)
Sara Cannon Montreal Girl Geek
Font: Acta Poster