Practical typography
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Practical typography

on

  • 635 views

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.

Statistics

Views

Total Views
635
Views on SlideShare
567
Embed Views
68

Actions

Likes
1
Downloads
8
Comments
0

1 Embed 68

https://napavalley.blackboard.com 68

Accessibility

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 ~ 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
  • 6. Why care?
  • 7. A font might be protected by copyright, trademark or patent http://blogs.adobe.com/typblography/2006/01/legal_protectio.html
  • 8. 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
  • 9. 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
  • 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. http://www.adobe.com/products/type/font-licensing/font-embedding-permissions.html
  • 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 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/
  • 15. »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/
  • 16. 2014 First Model » Content First » Mobile First » Type First TYPE CONTENT MOBILE
  • 17. 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)
  • 18. Questions?
  • 19. Thank you!