James Carleton

Backstory
Fonts on the web have been limited by licensing restrictions setup for the print era by the font foundries who create them. Only a few limiting choices have been available to designers, while print licenced fonts remained untouchable (except in images/flash).

As a result, we’ve been working in the “web safe” range of fonts, Times, Arial, Georgia, etc. The work around was using other fonts in images, wich comes at the cost of site speed, SEO, and flexibility.

Breakthroughs
Several solutions have emerged that allow a great variety of fonts to be legally used on the web.

Open licenses

• Free unlimited use
• Limited options
• Doesn’t $upport typographers
• Sources:
  • The League of Moveable Type
  • Google Webfonts
  • Font Squirrel

Middlemen Services

• They worry about the licensing
• Huge selection
• Simplifies the compatibility mess
• Fixed Fee or Subscription cost
• Services:
  • Typekit
    Free/Paid Subscription ($0-100/year)
    Provides a wide selection of fonts, including Adobe’s library.
  • Fontspring
    One-time fee ($0-50 per font), unlimited use.
  • WebType
    Free Trial, Paid Subscription ($10-100/year)
  • Fonts.com
    Free or paid subscription ($10-100/year)
    Also provides a local copy for your mockups.
  • Font Deck
    Free trial, Pay per font, per year ($7.50 average)
  • For even more options, visit this great comparison by Sylvia Egger

How to use @font-face
This simple CSS rule references the font file. Modify size, weight, color, line-height, shadow, etc. The font stack allows fallback to safe fonts in browsers without support.

Example CSS:
@font-face {
font-family: yourfontname;
src: url(http://www.yourfontfile);
}
p {
font-family: yourfontname, Helvetica, Arial, sans-serif;
}

@font-face is supported by these browsers (and newer versions):

• Internet Explorer 5
• Firefox 3.5
• Safari 3.1
• Chrome 4.0.249.4
• Opera 10.54 (Windows & Mac OS)
• iPad and iPhone iOS 3.1

@font-face file types vary by browser:

• Internet Explorer only supports EOT
• Mozilla browsers support OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.

Services deliver the correct files for each browser, no mess.
If you host your own, you’ll need some help:

• http://www.fontsquirrel.com/fontface/generator
• http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
• http://ffffallback.com/

So, that all sound great, but what does it look like?
Check out these fonts in action:

• http://typekit.com/about
  Typekit’s own website showcases some great fonts
• http://www.onyourwayhere.com/
• http://lostworldsfairs.com/
  A really fun demo of various fonts.
• http://www.kiva.org/
• http://weareelixir.com/
• http://carletondesign.com/
  (This site uses typekit)
• http://forabeautifulweb.com/
• http://www.webfontsgallery.com/
• http://www.webfontawards.com/

Even more info:

• Zeldman.com: My Love Hate Affair with Typekit
• The Big Web Show: Web Fonts
• Font Face Tutorials
• Web Typography
• Web Font Services

So, what are you waiting for? Go explore the new world of real fonts on the web!

'Meetings are toxic.' by Mike Rohde (Image property of 37signals)

I hardly shout at all, but I have to make an exception. GET THIS BOOK!!!!!! Seriously!

Rework, by Jason Fried and David Heinemeier Hansson is a must-read. I won’t try to summarize it, you need to experience every word. I will note some of my favorite parts:

“Workaholics aren’t heroes. They don’t save the day, they just use it up. The real hero is already home because she figured out a faster way to get things done.”

“Working without a plan may seem scary. But blindly following a plan that has no relationship with reality is even scarier.”

“Interruption is the enemy of productivity. The worst interruptions of all are meetings. Meetings are toxic.”

“When everything needs constant approval, you create a culture of non-thinkers.”

There is so much more, you just have to read it. It’s general enough that anyone with a job can apply it but it also has specific wisdom for those starting a new venture. The amazing artwork by Mike Rohde is the icing on this cake of business wisdom. Yum.

To get a feel for the book, visit http://37signals.com/rework/

Get your own copy:

Rework by Jason Fried & David Heinemeier Hansson

UPDATE: In response to Rework, Happy Cog has published An Open Letter to 37signals calling for better meetings, instead of throwing them out.

I recently transitioned from being a self employed consultant, to a corporate employee. I went from wide responsibility to all aspects of my own business into a specialized cog at a big, high speed corporation.

I enjoyed the freedom of working on my own schedule, choosing my own priorities, and moving in the direction I choose. Freedom is liberating, but a challenge to sustain. You can’t rely on anyone else to carry you. It takes determination and endurance to conquer each unique task that arises in your work projects and business administration. Not an expert on tax law? Time to learn quick or hire a consultant. Need to take a vacation? Your projects won’t get done with out you. It’s all you, the good and the bad. Some days go well, others don’t, but your task is to sustain your quest toward your own definition of success.

In contrast, the corporate environment is organized and optimized. I was hired to be one part of a larger team, which is in a larger department in a larger company with multiple locations, with an international reach. Instead of balancing an array of responsibilities, I’m focused on one set of tasks which I apply repeatedly to a specific type of project in an exact timeframe, during business hours, in the company’s facility. Working in a team of specialists that are focused, toward carefully planned goals, has benefits in efficiency and productivity. Each member of the organization is able to focus on their specific task and rely on others to provide their complimentary piece of the puzzle. The organization is appropriately rigid and strategically focused on its specific measure of success, while the individuals seek further development/advancement for themselves.

I don’t know which I prefer, there are benefits and challenges to each. I like taking the afternoon off on a whim. I also like the camaraderie a group provides. I like making a big impact on small projects, but it’s also rewarding to make a small impact on a big scale. I’m grateful for the option to try each work environment and aim to learn from each situation.

For the moment, the idea of a small, diverse team of specialists that collaborate in a creative and flexible environment seems the most attractive arrangement. It can combine flexibility of being solo with the productivity of a team, while retaining a size that allows greater ownership of the work than a bigger company can foster.

It is amazing to watch a child grow up with technology as normal while the older generation is still figuring it out how to adjust to it. My one year old spends most of the day pushing buttons, opening doors, or trying to take things apart. Hopefully, that desire to learn how things work will last a lifetime. I can only wonder what the future will be like. The world is changing fast. I wonder if anyone predicted that information would be so accessible though the internet. It is simple to learn so many things that previously were confined to trained professionals. Websites and online tools allow you to manage your banking and investments, publish a book, sell your original music and much more.

Open access to vast knowledge has eliminated the traditional barriers to entry into many fields of work. Web design is a field that has no such barriers. Anything you need to know about web design is available online and can be self-taught. Many professionals started out tinkering and then developed their new skills into a career.

Why it is valuable to pay for professional web design if it’s so easy to do?

• Time: Web design basics are simple, but it quickly gets complex and takes a lot of time to develop professional level skills.
• Experience: Like any profession, there is immense value in practical experience.
• Standards: Professional web sites should be built to web standards. These standards are a benchmark that separate professionals from amateurs.
• Style: This aspect is subjective. Generally, professionals have a higher quality of aesthetic style.

So if you need a professional website, hire a pro. If you’re a technology sponge, start learning and soon you may have a new career.

Intel has a commercial portraying Ajay Bhatt, co-inventor of the USB, as if he was a rock star. Check it out:

If the web industry had it’s own rock star commercial it would have to feature Jeffrey Zeldman or Eric Meyer. Both are well known for starting the movement to create standard practices for web sites and making sure browsers supported those standards.

• Zeldman is the co-founder of the Web Standards Project (WaSP), started A List Apart and his own studio, has authored several books and lectures on the topic of web standards. He was recently called “the godfather of web standards” by .net Magazine.
• Meyer is famous for his standards evangelism at Netscape, authoring numerous books on CSS, and lecturing on CSS and web standards.

The official web standards are maintained by the World Wide Web Consortium (W3C). These standards have become an integral part of professional web development, thanks to the pioneering work of Meyer and Zeldman. Standards ensure a website’s audience is viewing the site as the designer intended and also provide a benchmark for quality work. Thanks rock stars, rock on!

Further Reading:

Jeffery Zeldman

Eric Meyer

I love photography. Life would not be nearly as fun without cameras. Photos can quickly explain a product, express an quality of a company, or provide personal connection to an experience. When designing websites or printed materials, I utilize both stock and custom photography.

Stock photography is an easy and inexpensive way to get high quality images on a huge array of topics. Instead of hiring a photographer to take specific pictures you can quickly find numerous examples online for a fraction of the cost. An example would be the three stock images I selected for the intro page design of Omni Law Group. This firm was seeking a graphic representation of it’s marketing message. The challenge with stock photography is selecting the right photo from the expanse of options. An overall vision of the project’s styling goals is required in order to ensure a cohesive result.

Stock Photography - Omni Law Group

Custom photography is best for specific photos, such as a portraits, product shots, projects, or capture events. I recently assisted entrepreneurs at BhatiaOne with custom package designs. Once the designs were printed, I photographed the finished products for use in their marketing presentations. This was a cost effective way to quickly get a new product to a professional level, ready for presentation to buyers. I have also worked with several professional photographers whose talent, training, and experience provide amazing results. The quality of the photography directly impacts the quality of the overall design.

Product Photography - BhatiaOne

Stock and custom photos can be a strong design element on web and print media. Creating a cohesive appealing design requires careful selection of photos and coordinating design. The end result can be a powerful image, worth thousands of words.

I recently completed an elaborate flash animation now online at endfossilfuels.com (see “What is a Carbon Offset?”). Working with a script developed by my client at Comcast Spotlight SF, I developed a set of themed icons which were animated to narration and sound effects. The resulting animation is an effective sales tool which educates website visitors about carbon offsets.

Custom Flash Animation (Click to Play)