Typography for WordPress

  • 2,259 views
Uploaded on

Presentation for WordCamp Kansas City 2012

Presentation for WordCamp Kansas City 2012

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,259
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
14
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. By Nile Floreshttp://blondish.net @blondishnet
  • 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. The art and technique of arranging type inorder to make language visible. - Wikipedia http://en.wikipedia.org/wiki/Typography
  • 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.  Spacing of font Shape of font Grouping of letters in a specific shape or order Size of font Color(s) of font
  • 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.  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. @font-face is an font embedding technique that can be done in the style sheet (CSS).
  • 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. 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. 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. 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. Cufón text replacement is a font embedding technique that uses jQuery
  • 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. 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. 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. 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. 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. Google’s free font directory that are optimized forthe web. – bit.ly/gwebfontsPlugin – WP Google Fonts bit.ly/wpgfonts
  • 20.  UrbanFonts.com Fontalicious.com Typekit.com FontSquirrel.com Google.com/WebFonts
  • 21. Any Questions?
  • 22. Nile FloresSite: http://blondish.netTwitter: @blondishnetFacebook: http://fb.com/NileFlores