This document discusses the importance of typography in digital design. It begins by outlining an agenda covering topics like web font licensing, font repositories, and icon fonts. It then provides quotes emphasizing how typography plays a major role in both traditional and responsive web design. The document goes on to discuss why proper web font licensing is important, considering both existing brand fonts and finding alternatives. It also lists several popular font repositories that offer free, paid, and open source options. Finally, it briefly touches on icon fonts and their benefits for responsive design before concluding with additional resources.

1. Understanding
Practical Typography
FOR DIGITAL DESIGN

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

3. “ Web Design is 95% Typography ”
~ Oliver Reichenstein, 2006 ~
http://ia.net/blog/the-web-is-all-about-typography-period/

4. “ 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/

5. “ Typography plays a major part in
Digital Design ”
HOW & WHY?
» Gives a feel of the brand
» Explains other visual elements of the design
» Clearly explains itself

10. Why care?

11. A font might be protected by
copyright, trademark or patent
http://blogs.adobe.com/typblography/2006/01/legal_protectio.html

12. 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

13. 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

14. Why web licensing for font
is different?

15. 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

16. @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

17. CONSIDERATIONS FOR WEB LICENSING
For Existing Brand Fonts
EULA for a specific brand font might not cover web licensing
Existing Brand Fonts look horrible on Web
As a Digital Agency we have to provide a web alternative that works well with the
existing brand
Client is willing to invest one time
We need to find service that provides one time licensing cost for a single font
Client is willing to subscribe for a service
We 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 cost
We need to find alternative fonts that come close to the brand for but are open-source

18. Font Repositories
» Google Web Fonts
https://typekit.com/
http://www.google.com/fonts
» 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/
Free / Open-source Model
Paid / Subscription Model
»Typekit
» Font Squirrel
http://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 Space
http://www.fontspace.com/

19. »Font Awesome
http://fortawesome.github.io/Font-Awesome/
Icon fonts answer a major problem faced
While doing responsive design
ICON FONTS
» Symbolset
http://symbolset.com/
» Modern Pictograms
»They are scalable against device pixel
density, dimensions & display
http://modernpictograms.com/
»They can be used inline to text
» The Noun Project
http://thenounproject.com/
» Icon Moon
http://icomoon.io/
» Fico
http://fico.lensco.be/
References
http://designinstruct.com/roundups/free-icon-fonts/, http://webstandardssherpa.com/reviews/responsive-webfont-icons/

20. 2014 First Model
» Content First
» Mobile First
» Type First
TYPE
CONTENT
MOBILE

21. 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)

22. Questions?

23. Thank you!