Typography online

HelloHolaHalloBonjourJake Smith— JP74— @jake74—Typography Online— standards>next—

Typographyonline

Why use fonts?• To establish a tone of voice• To reaffirm product recognition/loyalty through branding• To communicate better

1996• Courier• Times New Roman• Arial

2010• Courier• Times New Roman• Arial• Verdana• Georgia• Impact• Trebuchet MS• Comic Sans

“ For nearly 15 years, web designers had two frustrating choices when it came to type on the web: use one of the few “web safe” fonts preinstalled on major operating systems, or substitute text with images and Flash/ JavaScript hacks.” FontShop – http://www.fontshop.com/fontlist/n/web_fontfonts/

Nonsense**not entirely accurate

@font-face

@font-face { font-family: MyFontFamily; src: url(myfont-webfont.eot); /* IE9 Compat Modes */ src: url(myfont-webfont.eot?iefix) format(eot), /* IE6-IE8 */ url(myfont-webfont.woff) format(woff), /* Modern Browsers */ url(myfont-webfont.ttf) format(truetype), /* Safari, Android, iOS */ url(myfont-webfont.svg#svgFontName) format(svg); /* Legacy iOS */ } Further Hardening of the Bulletproof Syntax 21st February 2011 http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

basics – @font-face• Been around since 1998…• Part of CSS2 spec (removed for 2.1)• Neither browser support the most common font format TrueType• IEs proprietary EOT format killed off Netscape’s TrueDoc

pros – @font-face• It’s in the spec• all handled through CSS, no JS• plenty of free fonts to use

cons – @font-face• Hosted solution. At the mercy of others• Adds to page download size, painful for Chinese, Japanese and Korean (CJK) fonts• The majority of free fonts are utter shit• If they’re not utter shit, they’re overused *cough* Museo *cough*

Free vs Paidsolutions

free – @font-face• Font Squirrel• Google Fonts API• plenty of free fonts to use

paid – @font-face• Typekit• Fontdeck• FontShop• …and more

remember–Font foundries arelike record labels

Foundries as a label• They have a roster of designers/artists• The artists produce a variety of fonts/songs• You can ‘buy’ individual weights/singles or a family/album• You never actually own anything you pay them for… you license it• They can take you to court for copyright infringement

“ I know for a fact thereʼs discs of my stuff doing the rounds in Manchester, and I donʼt give a shit. It raises my proﬁle.” Darren Scott Creative Director Truth Design Consultancy Fonts: Aggregate, Hydrate, Mechanic Gothic, Nitrogen

Font services are likestreaming music services…but probably pay the artist better

Erik Spiekermann – FontShop

sIFRvsCufonvs@font-face

examples…

Thank youGraciasDankeMerciJake Smith— JP74— @jake74—Typography Online— standards>next—

http://www.systemerror.co.uk	27
http://jp74.com	14
http://feeds.feedburner.com	3
https://twitter.com	2
http://blog.naver.com	2
http://flavors.me	1

Typography online

by Jake Smith on Mar 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 49

Statistics

Typography online — Presentation Transcript