Practical typography
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Practical typography



The presentation provides details on web typography its use, importance and finally fonts licensing quarks & helpful repositories & references.

The presentation provides details on web typography its use, importance and finally fonts licensing quarks & helpful repositories & references.



Total Views
Views on SlideShare
Embed Views



1 Embed 68 68


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Practical typography Presentation Transcript

  • 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 ~
  • 4. “ The responsive web will be 99.9% typography ” ~ James Young, 2012 ~
  • 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
  • 6. Why care?
  • 7. A font might be protected by copyright, trademark or patent
  • 8. Digital fonts are widely recognized (in the US and many other countries) as being protected by copyright as computer software
  • 9. It also does not means that the Client’s existing EULA for their brand font also covers web licensing
  • 10. Why web licensing for font is different?
  • 11. 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.
  • 12. @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
  • 13. 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
  • 14. Font Repositories » Google Web Fonts » Font Deck » My Fonts » Font Shop » Font Spring » Cloud Typography Free / Open-source Model Paid / Subscription Model »Typekit » Font Squirrel » Open Font Library » Type Wolf » The League of Moveable Type » Font Space
  • 15. »Font Awesome Icon fonts answer a major problem faced While doing responsive design ICON FONTS » Symbolset » Modern Pictograms »They are scalable against device pixel density, dimensions & display »They can be used inline to text » The Noun Project » Icon Moon » Fico References,
  • 16. 2014 First Model » Content First » Mobile First » Type First TYPE CONTENT MOBILE
  • 17. Resources: Tools: (visually contrasts the differences between two fonts) (helps you to test web fonts on any website on the fly!) (helps finding perfect fallback fonts) (compare 3 different fonts side by side)
  • 18. Questions?
  • 19. Thank you!