Practical typography

Practical TypographyUnderstanding

FOR DIGITAL DESIGN

Agenda

• Importance of Typography• Why care• Web font licensing• Considerations for clients• Font repositories• Icon fonts

“ Web Design is 95% Typography ”

~ Oliver Reichenstein, 2006 ~

http://ia.net/blog/the-web-is-all-about-typography-period/

“ The responsive web will be

99.9% typography ”

~ James Young, 2012 ~

http://www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/

“ Typography plays a major part in Digital Design ”

» Gives a feel of the brand

» Explains other visual elements of the design

» Clearly explains itself

HOW & WHY?

Why care?

A font might be protected by copyright, trademark or patent

http://blogs.adobe.com/typblography/2006/01/legal_protectio.html

Digital fonts are widely recognized (in the US and many other countries)

as being protected by copyright as computer software

http://en.wikipedia.org/wiki/Intellectual_property_protection_of_typefaces

It also does not means that the Client’s existing EULA for their brand font also covers

web licensing

http://en.wikipedia.org/wiki/Intellectual_property_protection_of_typefaces

Why web licensing for font is different?

Generally EULA permits font embedding as

a part of a document using the font.

A PDF document can have a font embedded as a part of the

document.

http://www.adobe.com/products/type/font-licensing/font-embedding-permissions.html

@font-face rule

Using this rule we link the fonts to the actual

document like any other assets & are prone to be

downloaded on to the visitor’s machine.

• TTF / OTF

• WOFF

• SVG

• EOT

For Existing Brand Fonts EULA for a specific brand font might not cover web licensing

Existing Brand Fonts look horrible on WebAs a Digital Agency we have to provide a web alternative that works well with the existing brand

Client is willing to invest one timeWe need to find service that provides one time licensing cost for a single font

Client is willing to subscribe for a serviceWe need to find service that provides a subscription and font management for to serve to different website under client portfolio

Client is not willing to pay / wants to cover within initial costWe need to find alternative fonts that come close to the brand for but are open-source

CONSIDERATIONS FOR WEB LICENSING

Paid

/ S

ubsc

ripti

on M

odel

Font Repositories

» Typekithttps://typekit.com/

» Font Deck http://fontdeck.com/

» My Fonts http://www.myfonts.com/

» Font Shop http://www.fontshop.com/

» Font Spring http://www.fontspring.com/

» Cloud Typography http://www.typography.com/cloud/welcome/

» Google Web Fontshttp://www.google.com/fonts

» Font Squirrelhttp://www.fontsquirrel.com/

» Open Font Library http://openfontlibrary.org/

» Type Wolf http://www.typewolf.com/open-source-web-fonts

» The League of Moveable Type https://www.theleagueofmoveabletype.com/

» Font Spacehttp://www.fontspace.com/

Free /

Open-s

ourc

e M

odel

ICO

N F

ON

TS

» Font Awesome http://fortawesome.github.io/Font-Awesome/

» Symbolset http://symbolset.com/

» Modern Pictograms http://modernpictograms.com/

» The Noun Project http://thenounproject.com/

» Icon Moon http://icomoon.io/

» Fico http://fico.lensco.be/

Icon fonts answer a major problem facedWhile doing responsive design

» They are scalable against device pixel density, dimensions & display

» They can be used inline to text

Referenceshttp://designinstruct.com/roundups/free-icon-fonts/, http://webstandardssherpa.com/reviews/responsive-webfont-icons/

CONTENT

TYPE

MOBILE

2014 First Model

» Content First

» Mobile First

» Type First

Resources:

http://typecast.com/blog/how-cross-platform-typography-defines-your-brand

http://ilovetypography.com/

http://typographica.org/

http://typedia.com/

http://webdesign.tutsplus.com/articles/design-theory/all-about-trends-in-web-design/

Tools:

http://tiff.herokuapp.com/ (visually contrasts the differences between two fonts)

http://typewonder.com/ (helps you to test web fonts on any website on the fly!)

http://ffffallback.com/ (helps finding perfect fallback fonts)

http://www.typetester.org/ (compare 3 different fonts side by side)

Questions?

Thank you!