Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Â
Web Typography with CSS3
1. WEB TYPOGRAPHY
&
CSS3
with Sean Gaffney and Matthew Smith
Monday, March 22, 2010 1
2. Sean Gaffney seangaffney.cc
@seangaffney
Freelancing Developer working with
designers and agencies to make sure
details get communicated clearly
through technology on the web.
Monday, March 22, 2010 2
3. Matthew Smith squaredeye.com
@squaredeye
Principal at Squared Eye
Creative Director & Designer
Squared Eye is focused on detailed
design that springs from a rich
understanding of our clientâs business
goals and the communication strategies
needed to make them happen.
Monday, March 22, 2010 3
4. Web Typography & CSS3
@font-face
Text-Shadow
MultiColumn Text
Monday, March 22, 2010 4
5. @font-face
What is it?
⢠Simple technique for allowing designers to use their own
fonts for display on the web, eliminating the constrictions
that currently exist.
⢠Introduced in CSS2, removed from the spec in CSS2.1,
reintroduced in CSS3
Monday, March 22, 2010 5
6. @font-face
Pros
⢠More variety in fonts on the web! Yeehaw!
⢠Better adherence to style guidelines and branding
emphasis for groups that use typography as a major part
of their branding.
⢠Dynamic, selectable, printable text
⢠Implementation is simple (compared to sIFR, Image
Replacement, and CufĂłn)
Monday, March 22, 2010 6
7. @font-face
Cons
⢠Easy to Abuse. Huge font libraries donât make good
designs, good designers make good designs.
⢠End User License Agreements (EULAs) can be a difficult
hurdle for commercial fonts.
⢠Flash of Unstyled Text (FOUT)
⢠Rendering Issues on Microsoft Windows and Internet
Explorer due to font-aliasing techniques.
Monday, March 22, 2010 7
8. @font-face
Design Considerations
⢠Access to more fonts increases the need for us all to learn
typography, and web typography.
Monday, March 22, 2010 8
9. @font-face http://seedconference.com
Design Considerations
⢠Great web typography is possible with the old guard of core fonts.
Monday, March 22, 2010 9
10. @font-face
Learn Typography
Monday, March 22, 2010 10
11. @font-face
Learn Typography
http://webtypography.net/
Monday, March 22, 2010 11
12. @font-face
Licensing
⢠Type Design is incredibly complicated and difficult. It is
worth paying for a great typeface or font.
⢠The EULA from some foundries allows for embedding
⢠The EULA from other foundries âtechnicallyâ does not
allow for even sIFR embedding.
⢠The file referenced when using @font-face is easily found
on the server. If its free, no big deal. If itâs commercial then
youâre breaking your EULA.
Monday, March 22, 2010 12
13. @font-face
Whatâs changing in the marketplace?
⢠Businesses like TypeKit, FontDeck, and Typotheque have
created obfuscation techniques and relationships with
foundries to bring commercial fonts to the web.
⢠Sites like Font Squirrel are popping up to showcase the
best of the free fonts for use with @font-face.
⢠More businesses like Fontspring will arise to help strong
small and middle range type designers and foundries
provide web designers with great fonts, with flexible
licenses at competitive prices.
Monday, March 22, 2010 13
14. @font-face
Whatâs changing in the technology?
⢠There are currently a host of type formats for the web
including TrueType, OpenType, EOT, SVG, and WOFF.
⢠WOFF (Web Open Font Format) is a new web font format
developed by Mozilla in concert with Type Supply,
LettError, and other organizations.
⢠WOFF is a flexible format which allows for better font-
hinting and metadata attached to the font for different
systems, languages, browsers, etc.
Monday, March 22, 2010 14
15. @font-face
Whatâs changing in the technology?
⢠WOFF is a web only format, unable to be used on the
desktop, and is therefore more appealing to the font
foundries as a viable format for commercial fonts.
⢠WOFF compresses the font data so that its less likely to
cause FOUT (Flash Of Unstyled Text) while web files are
downloading.
Monday, March 22, 2010 15
16. @font-face
Implementation Techniques
⢠Commercial Font-serving Sites:
Typekit, Fontdeck, Typotheque, Webtype, Kernest
⢠Free (Font Squirrel)
⢠Mixed Use (Fontspring)
⢠Roll Your Own Obfuscation
Monday, March 22, 2010 16
20. @font-face
Optimization
⢠Javascript and CSS techniques exist to minimize FOUT
⢠Do not place SCRIPT tags above @font-face declaration (IE
will not display page content until the font file is loaded)
⢠Gzipping fonts can result in up to 70% savings in filesize
(all formats except WOFF, which has built-in compression)
⢠Set far-future expires headers for font files
Monday, March 22, 2010 20
21. @font-face
Rendering
⢠Apple and Microsoft have different philosophies regarding
the way text should be rendered on the screen.
⢠Fonts rendered by OS X should all appear very smooth.
⢠Fonts rendered by Windows will vary based on the hinting
of the type and the rendering engine being used (none vs.
ClearType vs. DirectWrite). TrueType fonts appear
smoother. FontFont branded fonts also have better hinting
for Windows.
Monday, March 22, 2010 21
22. @font-face
Testing
⢠Internet Explorer without ClearType
Monday, March 22, 2010 22
23. @font-face http://www.timoni.org
Example Usage
Monday, March 22, 2010 23
24. @font-face http://sxsw.beercamp.com
Example Usage
Monday, March 22, 2010 24
25. @font-face http://elliotjaystocks.com
Example Usage
Monday, March 22, 2010 25
26. @font-face http://forabeautifulweb.com
Example Usage
Monday, March 22, 2010 26
27. @font-face
Resources
⢠Font as Service
Typekit : http://typekit.com
FontDeck : http://fontdeck.com (coming soon)
FontSpring : http://fontspring.com
Typotheque : http://typotheque.com
Webtype : http://webtype.com (coming soon)
Kernest : http://kernest.com
⢠Free @font-face sites
FontSquirrel : http://fontsquirrel.com
League of Moveable Type : http://www.theleagueofmoveabletype.com/
⢠@font-face generators
FontSquirrel : http://www.fontsquirrel.com/fontface/generator
Monday, March 22, 2010 27
28. @font-face
Resources
⢠How to Use @font-face
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
⢠GZIP your @font-face files
http://www.phpied.com/gzip-your-font-face-files/
⢠Font Hinting and Anti-Aliasing
http://szafranek.net/works/articles/font-smoothing-explained/
http://readableweb.com/font-hinting-explained-by-a-font-design-master/
http://www.thomasphinney.com/2009/12/browser-choice-vs-font-rendering/
⢠Recommended Reading
http://webfonts.info/
Lots of @font-face info, including a list of @font-face-ready fonts
Monday, March 22, 2010 28
29. CSS Text-Shadow
What is it?
⢠text-shadow is a simple technique of adding a dropshadow
or highlight to text in the web page.
⢠It can be used to create a lighting effect or a to create
dimension through use of multiple text-shadows.
Monday, March 22, 2010 29
30. CSS Text-Shadow
Pros
⢠Text-shadows can be used to create great looking text
effects to enhance the style of your typography.
⢠In some cases text-shadow can increase the legibility of
text by increasing the contrast of the type against the
background.
⢠If your design requires a letter-press feel, you can easily
achieve this effect using text-shadow.
Monday, March 22, 2010 30
31. CSS Text-Shadow
Cons
⢠Not supported in Internet Explorer (scheduled for support
in IE9 with many other CSS3 features).
⢠If abused, can make text less legible.
Monday, March 22, 2010 31
32. CSS Text-Shadow
Design Considerations
⢠text-shadow, like other type treatments for the web is
easily abused. Be gentle and subtle, donât overdue it.
Monday, March 22, 2010 32
33. CSS Text-Shadow
Design Considerations
⢠Increasing readability
Rogie King works out a nice
text-shadow hack to increase
readability of text in Safari for
light colored text on dark
backgrounds.
http://www.komodomedia.com/blog/2009/03/safari-
text-shadow-anti-aliasing-css-hack/
Monday, March 22, 2010 33
37. CSS Text-Shadow
Browser Compatibility
⢠Firefox 3.1+
⢠Safari 3+ (4+ has multiple text-shadow support)
⢠Chrome 2+
⢠Opera 9.5+
⢠MobileWebkit
Monday, March 22, 2010 37
38. CSS Text-Shadow http://sxsw.beercamp.com
Example Usage
Monday, March 22, 2010 38
39. CSS Text-Shadow http://timvandamme.com
Example Usage
Monday, March 22, 2010 39
40. CSS Text-Shadow http://analog.coop
Example Usage
Monday, March 22, 2010 40
41. CSS Text-Shadow http://blog.squarespace.com
Example Usage
Monday, March 22, 2010 41
42. CSS Multi-Columns
What is it?
⢠The CSS multi-column module offers a method of allowing
long chunks of text to wrap to multiple columns in a
manner that formerly required server side scripting.
⢠This technique is widely popular in editorial design of
magazines and newspapers, but is rarely used on the web.
Monday, March 22, 2010 42
43. CSS Multi-Columns
Pros
⢠Large chunks of text can now be displayed in a shorter
vertical space and also sport properly sized column widths
that support better readability.
⢠Stylistically this effect can add nuance and typographical
care to a detailed design.
⢠This approach is far more semantic than other methods
that required additional markup to achieve similar ends.
Monday, March 22, 2010 43
44. CSS Multi-Columns
Cons
⢠Easy to abuse. The web is not static editorial design
platform. With a confined viewing port, designers will
make usability and readability mistakes with this technique
that can make a web experience extremely poor.
Monday, March 22, 2010 44
45. CSS Multi-Columns
Design Considerations
⢠Wide columns of text are difficult to read because the
viewing distance from the end of one line to the beginning
of the next.
Monday, March 22, 2010 45
46. CSS Multi-Columns
Design Considerations
⢠Multi-Column text helps the user read faster facilitating
better scanability.
Make sure the distance
from the top of the
column to the bottom
of the column is tight
enough for easy
scanning.
Monday, March 22, 2010 46
54. CSS Multi-Columns
Browser Compatibility
⢠Browsers that do not support CSS3 columns degrade to a
full width, standard text approach
Monday, March 22, 2010 54
55. CSS Multi-Columns http://tweetcc.com
Example Usage
Monday, March 22, 2010 55
56. CSS Multi-Columns http://desandro.com
Example Usage
Monday, March 22, 2010 56
57. CSS Multi-Columns http://desandro.com
Example Usage
Monday, March 22, 2010 57
58. THANK YOU for joining us for
WEB TYPOGRAPHY
&
CSS3
with Sean Gaffney and Matthew Smith
Monday, March 22, 2010 58