Typography for WordPress
Upcoming SlideShare
Loading in...5

Typography for WordPress



Presentation for WordCamp Kansas City 2012

Presentation for WordCamp Kansas City 2012



Total Views
Views on SlideShare
Embed Views



4 Embeds 533

http://blondish.net 525
http://localhost 6
http://feeds.feedburner.com 1
https://twitter.com 1


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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Typography for WordPress Typography for WordPress Presentation Transcript

    • By Nile Floreshttp://blondish.net @blondishnet
    •  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
    • The art and technique of arranging type inorder to make language visible. - Wikipedia http://en.wikipedia.org/wiki/Typography
    •  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.
    •  Spacing of font Shape of font Grouping of letters in a specific shape or order Size of font Color(s) of font
    •  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
    •  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
    • @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) 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)
    • 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;}
    • 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.
    • 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;}
    • 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 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
    • 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>
    • 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>
    • 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)
    • 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
    • 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