View
110
Download
0
Category
Tags:
Preview:
DESCRIPTION
Typography and Your Theme:Believe it or not, generally WordPress sites are made up mostly of typography. This makes the relationship that these typographical elements have to each other very important. This talk will cover beautiful web type and various methods of implementations in WordPress themes. I will be going over webfonts, typographical CSS tips and tricks, and what different services to look at for your non-system fonts. We will go over the importance of making a site/brand guideline for a custom Twenty Ten child theme to keep consistency, account for every little detail, and be functionally lovely. No type element goes un-styled!
Citation preview
TYPOGRAPHY AND YOUR THEME
sara cannon / sara-cannon.com / follow @saracannon
SARA CANNON
Scout Branding Company
twitter: @saracannon
blog: sara-cannon.com
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
WEB DESIGN IS 95% TYPOGRAPHY
TYPOGRAPHY AND YOUR THEME
H&FJ
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
Archer
TYPOGRAPHY AND YOUR THEME
GOTHAM
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
VEER
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
ADOBE
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
THE LEAGUE OF MOVEABLE TYPE
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
OPEN SOURCE!OFL (OPEN FONT LICENSE)
THELEAGUEOFMOVEABLETYPE.COM/MANIFESTO
TYPOGRAPHY AND YOUR THEME
EXLJBRIS
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
WEB TYPOGRAPHY
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
CUFON / FLIR / SIFR
TYPOGRAPHY AND YOUR THEME
@FONT-FACE
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
ADOBE:
TYPOGRAPHY AND YOUR THEME
H&FJ
TYPOGRAPHY AND YOUR THEME
HF&J
TYPOGRAPHY AND YOUR THEME
SITE EXAMPLES
TYPOGRAPHY AND YOUR THEME
http://www.katerusby.com/
TYPOGRAPHY AND YOUR THEME
ROSEWOOD
NEUTRAFACE
TYPOGRAPHY AND YOUR THEME
LEAGUE GOTHIC
DROID SERIF
TYPOGRAPHY AND YOUR THEME
http://www.designmadeingermany.de
TYPOGRAPHY AND YOUR THEME
Din Round Web
TYPOGRAPHY AND YOUR THEME
http://www. jaxvineyards.com
TYPOGRAPHY AND YOUR THEME
FF-Tisa-Web
FF-Din-Web
TYPOGRAPHY AND YOUR THEME
I WANT TO GO
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
FONT-STACKS
TYPOGRAPHY AND YOUR THEME
@FONT-FACE
@FONT-FACE
TYPOGRAPHY AND YOUR THEME
@FONT-FACE
TYPOGRAPHY AND YOUR THEME
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
@FONT-FACE
TYPOGRAPHY AND YOUR THEME
truetype (.ttf)
opentype (.otf)
web open font format (.wo!)
@FONT-FACE
TYPOGRAPHY AND YOUR THEME
font hinting
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
HAND CODETYPEKIT
FONTSQUIRREL /FONTSPRINGGOOGLE API
TYPOGRAPHY AND YOUR THEME
FONTSQUIRREL.COM@FONT-FACE GENERATOR
WOFF Font - The emerging standard format.EOT (light) Font - Targets Internet Explorer.
SVG Font - Targets Webkit Mobile platforms (iPhone and iPad)
TYPOGRAPHY AND YOUR THEME
TYPEKIT.COM
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPEKIT HAS 68
PARTICIPATING FOUNDRIES
TYPOGRAPHY AND YOUR THEME
ADOBE:
TYPOGRAPHY AND YOUR THEME
VEER:
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHIC STYLE GUIDE FOR YOUR
THEME
TYPOGRAPHY AND YOUR THEME
http://2010dev.wordpress.com/
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
COMBATING FOUT
TYPOGRAPHY AND YOUR THEME
Flash
Of
Unstyled
Text
COMBATING FOUT
TYPOGRAPHY AND YOUR THEME
blog.typekit.com/2010/05/19/typekit-and-google/
COMBATING FOUT
TYPOGRAPHY AND YOUR THEME
code.google.com/apis/webfonts/docs/webfont_loader.html
COMBATING FOUT
TYPOGRAPHY AND YOUR THEME
TYPEKIT DEFAULT EMBED:
WEB FONT LOADER EMBED:
COMBATING FOUT
TYPOGRAPHY AND YOUR THEME
COMBATING FOUT
TYPOGRAPHY AND YOUR THEME
github.com/typekit/webfontloader
COMBATING FOUT
TYPOGRAPHY AND YOUR THEME
TAKE IT FURTHER
TYPOGRAPHY AND YOUR THEME
Styling Condensed Fonts
TAKE IT FURTHER
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
type crunch!!!
WINDOWS?
TYPOGRAPHY AND YOUR THEME
Disable Typekit IE6
Disable Typekit for Windows
Use Google Font API for Windows
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
USER AGENT
WINDOWS?
TYPOGRAPHY AND YOUR THEME
Firefox on Windows
USER AGENT
WINDOWS?
TYPOGRAPHY AND YOUR THEME
Firefox on Windows XP
TYPOGRAPHY AND YOUR THEME
WHAT NOT TO DO
TYPOGRAPHY AND YOUR THEME
Style Your Website With Comic Sans!
TYPOGRAPHY AND YOUR THEME
Or The Classic
Papyrus!
TYPOGRAPHY AND YOUR THEME
Or Even Papyrus Condensed!
SORRY AVATAR
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
THE INFAMOUS EYE BLEED.
TYPOGRAPHY AND YOUR THEME
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
TYPOGRAPHY AND YOUR THEME
THE EVEN MORE INFAMOUS EYE
BLEED.
TYPOGRAPHY AND YOUR THEME
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
TYPOGRAPHY AND YOUR THEME
WHAT TO DO
TYPOGRAPHY AND YOUR THEME
CHECK ALL BROWSERS
ALWAYS.
TYPOGRAPHY AND YOUR THEME
FOLLOW THE INDUSTRY
TYPOGRAPHY AND YOUR THEME
blog.typekit.com
TYPOGRAPHY AND YOUR THEME
ilovetypography.com
TYPOGRAPHY AND YOUR THEME
typographica.org
TYPOGRAPHY AND YOUR THEME
FIND INSPIRATION!
TYPOGRAPHY AND YOUR THEME
siteinspire.net
TYPOGRAPHY AND YOUR THEME
typographyserved.com
TYPOGRAPHY AND YOUR THEME
ministryoftype.co.uk
TYPOGRAPHY AND YOUR THEME
wordpress.org/showcase
TYPOGRAPHY AND YOUR THEME
Thank You!
sara cannon / sara-cannon.com / follow @saracannon
Recommended