Embed Size (px)
DESCRIPTION
Times New Roman. Helvetica. Comic Sans. We’ve all got fonts we love to use or love to hate. Typography is one of those topics that’s easy to overlook, but when you bring it up, everyone has an opinion. Sara’s talk is not just for designers spending hours debating on the slant of a curly-quote or the perfect sans serif – it’s for anyone who’s ever typed, read, or even just stared at the screen or page. Because typography is essential to how we read, consume, convey, and process the written word and it’s BFF, design. Let’s take our relationship with web typography to the next level and crush on the latest fonts, check out some awesome CSS3 implementations, and find incredible inspiration for interaction, refinement and our next dates with negative space. Come fall head over heels with us at Font Swoon!
Citation preview
Sara Cannon Montreal Girl Geek
Font: Acta Poster
SARA CANNONCo-founder / Creative Director At Range sara-cannon.com @saracannon slideshare.net/saracannon
Fonts: Vitesse, ARS Maque!e
# fontswoon
Font: Pacifico
Web Design is 95%
Typography
informationarchitects.jp/en/the-web-is-all-about-typography-period
Font: Adelle
Web Examples
Font: Omnes
Liquor Store
FF Meta Serif
trentwalton.com/2011/05/10/fit-to-scale
FF Din
FF Tisa
jaxvineyards.com
League Gothic
Le Monde Courrier
browsehappy.com
FF Din
designmadeingermany.de/magazin/5
Fonts! Fonts! Fonts!
Font: Bello
Slab-Serif
Fonts: Droid Serif & Arvo
Serif&
AFonts: Droid Serif & Arvo
A vs
Arvo
@font-face
Made By: Anton Kovit files.korkork.com
Archer
Made By: H&FJ typography.com
Adelle
@font-face
Made By: Type Together type-together.com
Adelle
JAF Facit Web
Cambria
@font-face
Made By: Ascender Fonts ascenderfonts.com
Clarendon
@font-face
Made By: Bitstream bitstream.com
Chaparral Pro
@font-face
Made By: Adobe adobe.com
Droid Serif
@font-face
Made By: Google code.google.com/android
Museo Slab
@font-face
Made By: exljbris exljbris.com
Museo Slab
Vitesse
Made By: H&FJ typography.com
Sans-Serif
Font: ARS Maque!e
Avenir
Made By: Adrian Frutiger Linotype.com
Open Sans
@font-face
Made By: Google
google.com/webfonts/specimen/Open+Sans
Brandon Grotesque
@font-face
Made By: HVD hvdfonts.com
DIN
@font-face
Made By: Linotype linotype.com
Futura
@font-face
Made By: BitStream Adobe.com
Gotham
Made By: H&FJ typography.com
Proxima Nova
@font-face
Made By: Mark Simonson ms-studio.com
Omnes
Made By: Joshua Darden dardenstudio.com
@font-face
Display Type
Font: Bello
Mensch
@font-face
Made By: Morgan Kuntson los!ype.com
ATRAMENT
@font-face
Made By: Suitcase Type Foundrysuitcasetype.com
sco!berkun.com
Atrament Web
LEAGUE GOTHIC
@font-face
Made By: The League of Moveable Typetheleagueofmoveabletype.com
Bello Script
@font-face
Made By: Underware underware.nl
Franchise
Made By: Derek Weathersbee los!ype.com
bklynsoap.com
Franchise
OLD
Homestead
@font-face
Made By: Luke Lisi los!ype.com
Ranger
Made By: Evan Huwa los!ype.com
Type Foundries
Font: Adelle
Lost Type
los!ype.com
exljbris
exljbris.com
font font
font-font.com
H&FJ
typography.com
League of Moveable Type
theleagueofmoveabletype.com
Open Source!Ofl (open Font License)
theleagueofmoveabletype.com/manifesto
House Industries
houseind.com
ARS Type
arstype.angusrshamal.com
Suitcase Type Foundry
suitcasetype.com
BEYOND THE SYSTEM FONT!
Font: Brandon Grotesque
.selector { font-‐family: Helvetica, sans-‐serif;}
.selector { font-‐family: “Droid-‐Sans”, Helvetica, sans-‐serif;}
@font-face
@font-‐face { font-‐family: Omnes; src: url(fonts/omnes.otf);}
Paulirish.com/2009/bulletproof-font-face-
implementation-syntax/
Typekit / Other Paid Hosts
Google Api
Fontsquirrel.com
sprungmarker.de/wp-content/uploads/webfont-services
typekit.com
CRAFT
YOUR CSS
Font: League Gothic
px em remvs vs
.selector { font-‐size: 16px;}
.container { font-‐size: 16px;}.container p { font-‐size: .4em;}
Calculating REMTarget Size / Base Size = Value
html { font-‐size: 16px;}.selector { /* 24 / 16 = 1.5 */ font-‐size: 1.5rem;}
.selector { line-‐height: 1.75em;}
.selector1 { letter-‐spacing: 0em;}
.selector2 { letter-‐spacing: .025em;}
h1 { text-‐rendering: optimiseLegibility;}
.selector { text-‐shadow: horizontal-‐offset vertical-‐offset blur color;
}
.selector { text-‐shadow: 1px 1px 2px #333;}
designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste
text-shadow for readability
Sub-header
AaSub-header
Menu Item
AaMenu Item
text-shadow for effect
.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
mothereffingtextshadow.com
.selector { -‐webkit-‐transform: rotate(-‐90deg); -‐moz-‐transform: rotate(-‐90deg); transform: rotate(-‐90deg);}
.selector { background: url(img/paint.png) repeat, white; -‐webkit-‐text-‐fill-‐color: transparent; -‐webkit-‐background-‐clip: text;}
Test & Tweak
Font: Carton
check all browsers
TYPE CRUNCH!!!
Disable for IE
Disable for Windows
Disable for Firefox
Firefox on all of Windows
Neat ype Scripts
Font: Sail
T
Lettering.js
le!eringjs.com
kern.js
kernjs.com
FitText
fi!extjs.com
Drop Caps
wordpress.org/extend/plugins/drop-caps/
p:first-‐child::first-‐letter { float: left; color: #A6EEFF; font-‐size: 75px; line-‐height: 60px; padding-‐top: 4px; padding-‐right: 8px; padding-‐left: 3px;}
Other Tools
Font: Ranger
What Font
chengyinliu.com/whatfont.html
Google Font Previewer
github.com/pamelafox/font-previewer-extension
MIN
min.artequalswork.com
Find Inspiration
ilovetypography.com
webtypography.net
typographica.org
fontsinuse.com
friendsoftype.com
typography-daily.com
siteinspire.net
typographyserved.com
ministryoftype.co.uk
dribbble.com
fontsinuse.com
What Not to Do
Font: Futura
Style Your Website
With Papyrus
(Sorry Every Mediterranean Restaurant Website Ever)
Use Non-Web-Licensed Fonts:
Archer or GOTHAM
Never EVER Use The Infamous Comic Sans
(It doesn’t matter that you think it’s good for wire-framing)
Even If You Think Its Ironic
e Infamous Eye Bleed
FREE SET OF STEAK KNIVES!!!
EYE BLEED!!!
AHHH THE BURNING!
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
EYE BLEED!!!
AHHH THE BURNING!
What To Do
Font: DIN Light Alt
Create A Typographic Style Guide For
Your eme
Obey Licensing
Follow the Industry
Font: Museo Sab
Follow The Industry
@JasonSantaMaria
@veen
@brucel
@ilovetypography
@jessicahische
@fontsquirrel
@typekit
@h_
@clagnut
@fchimero
LIFE IS SHORT, ART IS LONG
Typography is Everything.
CODE IS POETRY.
Font: Pacifico, League Gothic
Sara Cannon Montreal Girl Geek
Font: Acta Poster
