| Email not displaying correctly? View it in your browser. | ||||||||||||||||||||||||||||||||||||
SitePoint Design View |
||||||||||||||||||||||||||||||||||||
| Issue 58: April 16th, 2008 The Useful and the Usable in Web Design | ||||||||||||||||||||||||||||||||||||
Introduction
Yes, type control has always been one of web design's great limitations, in particular font choice. Over the years there have been sporadic stumbles forward but we're still waiting for that great leap. Today I thought we'd have a super-quick recap of the current options available before taking a look at what you can do with the newest player in town -- cufón. Also, have you ever pondered the notion: how do you reliably measure the performance of a color? This and other exciting topics are discussed in our most recent SitePoint Podcast, so give it a listen if you have a chance. Kevin, Patrick, and Steven are joined by Jina Bolton and Elliot Jay Stocks, author of SitePoint's latest offering, Sexy Web Design. Hope you enjoy the read!
Alex Walker HostGator eats up the Competition with their newly priced plans!
Host Unlimited sites on our Baby Plan!
Along with
superior support and a features like instant backups, 99.9% Uptime plus an
all new 45 day money back guarantee you will be glad you chose
HostGator. Summary
Nonstandard Typefaces and the WebThere are probably four schools of thought when it comes to text replacement, so let's delve in. Classic Image ReplacementClassic image replacement (CIR) is the term I'll use here to describe a collection of related techniques. It was the first true attempt to replace standard HTML text with a method without styling limitations. Most techniques make use of CSS background images in place of the HTML text, which was either hidden using CSS sleight-of-hand, or obscured behind SPANs containing the background image. Pros:
Cons:
A few years ago Dave Shea wrote the definitive rundown on the different flavors of classic image replacement, which you should read if you're considering CIR. Although it's still seen occasionally (CSS Zen Garden is a prominent example) CIR's drawbacks tend to mean it's a technique in limited use in 2009. sIFR (or Scalable Inman Flash Replacement)Back in 2004 Mike Davidson, Shaun Inman, and Mark Wubben came up with the first real breakthrough for type lovers -- scalable Inman Flash Replacement. The technique relied on Macromedia (now Adobe) Flash's ability to securely embed fonts within a Flash movie. JavaScript was then used to substitute out your HTML text for the SWF movie containing the styled text. Clever stuff, really. Five years on sIFR is a mature robust technique in its third incarnation and is the default technique when it comes to customizing text. Many of sIFR's early performance and accessibility issues have been moderated or even removed -- text is selectable and linkable. The biggest issue remains its reliance on both JavaScript AND Flash to work. Although many advocates will argue that the percentage of users without Flash is insignificant, iPhone's current lack of any Flash support puts a question mark over this technique for many. The other drawback for some developers has been the requirement for the Flash authoring software. This has been addressed with sites like sIFRVault now offering a selection of pre-embedded fonts for download. Pros:
Cons:
In short, depending on who you listen to, sIFR is somewhere between a pragmatic solution to a flawed system and a convoluted, dirty hack. @font-face
A long time ago in a galaxy far, far away they had perfect font support
and they used In that glorious world, birds twittered gayly, the sun shone warmly, and designers attached fonts to their page with a single line of code and without fear of licensing repercussions. Unfortunately we don't live there.
The theory behind the @font-face {
font-family: Echelon;
src: url('echelon.otf');
}
Then just call on it using the h3 { font-family: Echelon,
sans-serif; }
That's the easy part. The problem is the act of making the font available on your server violates most end user licensing agreements. Microsoft has promoted and supported an embedded font format called the Embedded OpenType (EOT) since the days of IE4. Producing EOT font files from TrueType fonts is simple via a free, client-side application call WEFT. EOT would be a very workable solution if it had any support outside Internet Explorer. Unfortunately there is none. Pros:
Cons:
So that was the state of play before vector text came along. Vector Text: Typeface JS and cufónThe most recent method of text replacement borrows some ideas from sIFR but manages to avoid its reliance on Flash. Instead, both Typeface JS and cufón are slightly different takes on the same basic idea: using JavaScript to replace HTML text with Canvas elements that render the text in vector format. Each method requires you to convert your font into a vectorized JavaScript file using their free online tools. Happily, this is a relatively painless process. These vectorized fonts are then linked to your page, rendered to a canvas area, and swapped into your page on-the-fly when JavaScript is available. Pros:
Cons:
Of course, sIFR advocates would argue that surely anyone using a browser modern enough to support the canvas element is likely to handle Flash files too. This is true enough in all but one important user case -- at this time NO iPhone or, for that matter, Android phone can render Flash content. That is a sIFR showstopper for many developers. Canvas, however, already has excellent support in Safari Webkit. Trying on cufónOkay, so let's look at a quick example of using vector text in a design. I'm going to go with cufón here because it's a marginally smaller file, but most of the key concepts apply to Typeface JS too. I'm going to start out with a rough blog concept that makes no attempt to customize or replace the headers. Inevitably some users will be without JavaScript, so your page still needs to work nicely sans groovy fonts.
Step 1: Grab cufón Download a copy of the cufón script and attach it to your document. This file is without actual font data; instead it just handles all the swapping, scaling, positioning, and styling of your type: <script type="text/javascript"
src="cufon-yui.js"></script>
Step 2: Convert your font As with Typeface JS, cufón needs you to convert your file into the vectors it uses, but this is a free and easy process. Simply upload your font -- TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB), and PostScript fonts are supported -- and their generator will give you back a new JavaScript file.
Obviously this is a good time to consider the licensing restrictions. While each type foundry takes its own view -- often requiring a new license for each server or site -- Adobe have been clear in stating their position: "All fonts produced by Adobe Systems can be embedded in Portable Document Format (PDF) files, as well as other types of files." That makes any and all Adobe fonts you own (such as Albertus, Bodoni, Caslon, and so on) the no-brainer choice for trialling this method.
This file will need to be attached to your page after the cufón script. For the example, I've converted and attached two fonts -- Pointy and Renaissance:
Be aware that there are TWO checkboxes on the generator that MUST BE CHECKED before it will allow you to proceed. Make sure you find them. Step 3: Target the headings to replace Let's be clear. All of these methods (besides @font-face, arguably) are designed to replace heading text only. Replacing slabs of body text will be slow and counter-productive. To replace any heading you simply use cufón's "replace" function to target the element, and then give it a font-family. In the example below, I'm replacing all H1s, H2s, and H3s:
Easy. Step 4: The IE fix As is often the case with Internet Explorer, we need to add extra code to make it work in that browser. Unmodified, IE users will see the original text load, followed by a visible flicker before the text is replaced. Thankfully the fix is easy, if slightly ugly. Immediately before the closing </BODY> tag you need to add the following script tag: <script type="text/javascript"> Cufon.now(); </script> Add this line and give your page a test. The result As you'll see in the demo page, the resulting render is quite fast and clean on most systems.
Cufón objects take their position from your CSS and automatically
inherit any You'll also see that each word is a separate, transparent canvas, allowing backgrounds, images, and other text to show through, and words to flow freely from one line to the next. Is there a downside? Well, copy and paste is a problem, although fixing it appears to be a priority for developers. I also ran into the occasional overflow issue and what seemed to be sizing inconsistencies. But all considered -- this is new, raw, and a bit experimental still -- cufón is an exciting and really promising development for web typophiles. Don't miss out on Freelancing Success
Email me a free sample PDF now! That's all for this issue -- thanks for reading! I'll see you in a few weeks.
Alex Walker |
Latest Release
Free Book Samples
Latest TutorialsFunky Flickr Flex Widgets
16 Design Tools for Prototyping and Wireframing
Research: First Steps for Designers
20 Sites That Brought CSS into the Mainstream
Hot Discussions
New BlogsNews & Trends
JavaScript & CSS
Search Engine Marketing
Web Tech
Podcast
Web Design
|
|||||||||||||||||||||||||||||||||||
Help Your Friends OutPeople you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the Design View! |
||||||||||||||||||||||||||||||||||||
|
You are subscribed
as:
Unsubscribe from this list.
Mailing
Address: Phone: +61 3 9090 8200 |
||||||||||||||||||||||||||||||||||||
Welcome to
Design View #58.
Once you've
selected and uploaded an appropriate font, you'll be presented with a
JavaScript along the lines of "your_font_400.font.js".
In
this tutorial, Jack demonstrates how to create a small Flex widget to
display a set of location-based Flickr photos, and embed it so that it
doesn't interfere with your web page content.
In
recent years the number of wireframing and prototyping tools available has
exploded. But where should you start when choosing the right resource to
help document and design your web site? Gary Barber comes to the rescue
with this list of 16 useful prototyping tools, and the pros and cons
associated with each.
In
his new book, Sexy Web Design, Elliot Jay Stocks shares the methods he uses
to create stunning web interfaces—and one of the most important steps
is to do some research. In this sample from the book, Elliot explores
different ways to gather inspiration and cool ideas for your next
project.
So many
web sites have contributed to the advancement of CSS, it's quite a tricky
task to produce a shortlist, as Tim Wright discovered. Some are
indisputable and at the forefront of everyone's minds, while others are
less conspicuous but no less deserving in Tim's Hall of Fame.
Back to the archives
Newsletter signup
Design, coding, community or marketing? Select the right newsletters right for your needs...