Your SlideShare is downloading. ×
0
By Nile Floreshttp://blondish.net    @blondishnet
   Explain typography and its importance in regards    to web design   Examples of typography that works   Tips for bet...
The art and technique of arranging type inorder to make language visible.                                        -    Wiki...
   Leading – the space    between the lines (ex: in    CSS – line-height)   Kerning – the space in    between individual...
   Spacing of font   Shape of font   Grouping of letters in a    specific shape or order   Size of font   Color(s) of...
   Choose legible typefaces (fonts) that will not be    hard to read even for those with visual impairing    issues   Ke...
   Keep in mind the white-space of your theme    when applying graphics that contain words or if    you are using specifi...
@font-face is an font embedding technique that can         be done in the style sheet (CSS).
   Pick a font you want to use (of course, keep in    mind the licensing to make sure you can use it as    a web font)  ...
Continued…In your WordPress theme’s style.css, after the  theme information, put the following:@font-face {  font-family: ...
Continued…•   Replace YOURFONTNAME with the exact font    name of your file•   Load your web fonts to a folder in your the...
Continued…   Make sure to add a fallback font in case a user    has a browser that does not support your web fontEXAMPLE:...
Cufón text replacement is a font embedding         technique that uses jQuery
   Pick your web font and go to (bit.ly/cufongen )    to convert your font for cufón text replacement   Download the jQu...
Continued…   Add to your theme’s header.php file:<script src="<?php get_template_directory_uri(); ?>/js/cufon-yui.js"  ty...
Continued…   Add the following JavaScript lines so that the CSS    elements you want to convert will change to the    fon...
It is a matter of preference        @font-face                    Cufón Text                                     Replaceme...
TypeKit is a third party resource site that has fontsyou can insert javascript into your header (usingtheir tutorial) or u...
Google’s free font directory that are optimized forthe web. – bit.ly/gwebfontsPlugin – WP Google Fonts bit.ly/wpgfonts
   UrbanFonts.com   Fontalicious.com   Typekit.com   FontSquirrel.com   Google.com/WebFonts
Any Questions?
Nile FloresSite: http://blondish.netTwitter: @blondishnetFacebook: http://fb.com/NileFlores
Typography for WordPress
Typography for WordPress
Typography for WordPress
Typography for WordPress
Typography for WordPress
Typography for WordPress
Typography for WordPress
Upcoming SlideShare
Loading in...5
×

Typography for WordPress

2,432

Published on

Presentation for WordCamp Kansas City 2012

Published in: Design, Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,432
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Typography for WordPress"

  1. 1. By Nile Floreshttp://blondish.net @blondishnet
  2. 2.  Explain typography and its importance in regards to web design Examples of typography that works Tips for better typography usage A couple ways to apply typography to a WordPress theme Other typography resources
  3. 3. The art and technique of arranging type inorder to make language visible. - Wikipedia http://en.wikipedia.org/wiki/Typography
  4. 4.  Leading – the space between the lines (ex: in CSS – line-height) Kerning – the space in between individual characters Tracking – the amount of spacing between groups of letters.
  5. 5.  Spacing of font Shape of font Grouping of letters in a specific shape or order Size of font Color(s) of font
  6. 6.  Choose legible typefaces (fonts) that will not be hard to read even for those with visual impairing issues Keep it simple when it comes to choosing a number of fonts Keep in mind color combination in regards to being able to read specific word with a specific font
  7. 7.  Keep in mind the white-space of your theme when applying graphics that contain words or if you are using specific web fonts Be consistent throughout your site with spacing (leading, kerning, tracking) Use web friendly fonts that will not take a lot of time to load
  8. 8. @font-face is an font embedding technique that can be done in the style sheet (CSS).
  9. 9.  Pick a font you want to use (of course, keep in mind the licensing to make sure you can use it as a web font) If it makes it easy, convert it to a web font. Ot you can choose from the hundred of free ones at Font Squirrel. (bit.ly/fontsqgen)
  10. 10. Continued…In your WordPress theme’s style.css, after the theme information, put the following:@font-face { font-family: ‘YOURFONTNAME; src: url(font/YOURFONTNAME.eot); src: url(font/YOURFONTNAME.eot?#iefix) format(embedded-opentype), url(font/YOURFONTNAME.woff) format(woff), url(font/YOURFONTNAME.ttf) format(truetype), url(font/YOURFONTNAME.svg#segoepr) format(svg); font-weight: normal; font-style: normal;}
  11. 11. Continued…• Replace YOURFONTNAME with the exact font name of your file• Load your web fonts to a folder in your theme call font• In your style sheet (style.css), add the font to the areas of your theme that you want your new font to appear.
  12. 12. Continued… Make sure to add a fallback font in case a user has a browser that does not support your web fontEXAMPLE:h1{font-family: YOURFONTNAME, Arial, Sans-Serif;}
  13. 13. Cufón text replacement is a font embedding technique that uses jQuery
  14. 14.  Pick your web font and go to (bit.ly/cufongen ) to convert your font for cufón text replacement Download the jQuery file for the cufón text replacement Load your jQuery files to a folder in your theme’s directory. Example: /js Note: Change YOURFONTNAME to the font name or file name
  15. 15. Continued… Add to your theme’s header.php file:<script src="<?php get_template_directory_uri(); ?>/js/cufon-yui.js" type="text/javascript"></script><script src="<?php get_template_directory_uri(); ?>/js/YOURFONTNAME.font.js" type="text/javascript"></script>
  16. 16. Continued… Add the following JavaScript lines so that the CSS elements you want to convert will change to the font you want.EXAMPLE:<script type="text/javascript"> Cufon.replace(‘h1, { fontFamily: ‘YOURFONTNAME, hover: true }); </script>
  17. 17. It is a matter of preference @font-face Cufón Text Replacement•Uses and works more withCSS, less jQuery calls to • Uses jQuerypage • Not all browsers support•Not all browsers support this methodthis method • Fonts are more like•SEO friendly, less load images, slower on loadtime (unless font is a hugefile)
  18. 18. TypeKit is a third party resource site that has fontsyou can insert javascript into your header (usingtheir tutorial) or using a plugin.Typekit has plans that depend on how manypageviews your site has per month.http://typekit.com
  19. 19. Google’s free font directory that are optimized forthe web. – bit.ly/gwebfontsPlugin – WP Google Fonts bit.ly/wpgfonts
  20. 20.  UrbanFonts.com Fontalicious.com Typekit.com FontSquirrel.com Google.com/WebFonts
  21. 21. Any Questions?
  22. 22. Nile FloresSite: http://blondish.netTwitter: @blondishnetFacebook: http://fb.com/NileFlores
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×