Typography for WordPress
-
Upload
nile-flores -
Category
Design
-
view
107 -
download
2
description
Transcript of Typography for WordPress
![Page 1: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/1.jpg)
Typography For WordPressBy Nile Flores
http://blondish.net@blondishnet
![Page 2: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/2.jpg)
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
Objective
![Page 3: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/3.jpg)
The art and technique of arranging type in order to make language visible.
- Wikipedia
http://en.wikipedia.org/wiki/Typography
What Is Typography?
![Page 4: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/4.jpg)
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.
Typography Terms
![Page 5: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/5.jpg)
Spacing of font Shape of font Grouping of letters in a
specific shape or order Size of font Color(s) of font
Ways to Alter Typography for Design
![Page 6: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/6.jpg)
Examples of Good Typography Usage In Web Design
![Page 7: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/7.jpg)
![Page 8: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/8.jpg)
![Page 9: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/9.jpg)
![Page 10: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/10.jpg)
![Page 11: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/11.jpg)
![Page 12: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/12.jpg)
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
Typography Tips for Web Design
![Page 13: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/13.jpg)
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
…continued
![Page 14: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/14.jpg)
Keep in mind that
not all fonts are
licensed to be used
for web fonts or
commercial use
![Page 15: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/15.jpg)
@font-face is an font embedding technique that can be done in the style sheet (CSS).
@font-face
![Page 16: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/16.jpg)
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)
@font-face Tutorial
![Page 17: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/17.jpg)
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;
}
@font-face TutorialContinued…
![Page 18: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/18.jpg)
• 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.
@font-face Tutorial
Continued…
![Page 19: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/19.jpg)
Make sure to add a fallback font in case a user has a browser that does not support your web font
EXAMPLE:h1{
font-family: YOURFONTNAME, Arial, Sans-Serif;
}
@font-face Tutorial
Continued…
![Page 20: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/20.jpg)
Cufón text replacement is a font embedding technique that uses jQuery
Cufón Text Replacement
![Page 21: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/21.jpg)
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
Cufón Text Replacement Tutorial
![Page 22: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/22.jpg)
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>
Cufón Text Replacement Tutorial
Continued…
![Page 23: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/23.jpg)
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>
Cufón Text Replacement Tutorial
Continued…
![Page 24: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/24.jpg)
It is a matter of preference
@font-face Versus Cufón
@font-face
• Uses and works more with CSS, less jQuery calls to page
• Not all browsers support this method
• SEO friendly, less load time (unless font is a huge file)
Cufón Text Replacement
• Uses jQuery• Not all browsers
support this method• Fonts are more like
images, slower on load
![Page 25: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/25.jpg)
TypeKit is a third party resource site that has fonts you can insert javascript into your header (using their tutorial) or using a plugin.
Typekit has plans that depend on how many pageviews your site has per month.
http://typekit.com
TypeKit
![Page 26: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/26.jpg)
Google’s free font directory that are optimized for the web. – bit.ly/gwebfonts
Plugin – WP Google Fonts bit.ly/wpgfonts
Google Fonts
![Page 27: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/27.jpg)
UrbanFonts.com Fontalicious.com Typekit.com FontSquirrel.com Google.com/WebFonts
Font Sites
![Page 28: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/28.jpg)
Any Questions?
![Page 29: Typography for WordPress](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75e3d4a79598e0a8b45c5/html5/thumbnails/29.jpg)
Nile FloresSite: http://blondish.netTwitter: @blondishnetFacebook: http://fb.com/NileFlores