Typography for WordPress

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

http://blondish.net	512
http://localhost	6
http://feeds.feedburner.com	1

Typography for WordPress

by Nile Flores on Jun 02, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 519

Statistics

Typography for WordPress Presentation Transcript