Practical typography
Post on 27-Jan-2015
113 Views
Preview:
DESCRIPTION
Transcript
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!
top related