To celebrate the 40th anniversary the station is holding a T-Shirt Design Contest and asking its listeners to help choose the design that best exemplifies the Pacifica mission and the uniqueness of KPFT. To vote on your favorite go to KPFT’s T-Shirt Gallery and email your choice to 40thtshirt@kpft.org.

KPFT relies on the support of its listeners and is 100% commercial free with no influence from corporate conglomerates who push their own politically and economically motivated self-interests. Please help support Houston’s true media gem by pledging a Donation and letting the station know that you value and enjoy what your hearing.

“a comfortable atmosphere which makes you feel at home, a constructive work atmosphere for business meetings, and a casual meeting place for when you just want to get together with some friends.”

One of the ways I SLGT is by purchasing server and web hosting space through Host Gator, a local business uses 130% Texas wind powered electricity to power its data center. The average server produces as much emissions as a 15 mgp SUV and Hostgator is committed to reversing the environmental effects of web hosting by purchasing certified renewable energy credits. I also SLGT by purchasing all computer equipment that I use for the company and for clients through Directron.Com, a Houston owned and operated computer wholesale company.

What can you do

If you would like to show your support for SLGT you can connect through Facebook by becoming a fan or by following on Twitter. If you have a local business you can write a message on the wall introducing yourself and to promote any specials for other members.

If you have a website or blog, you can add a fan-page widget by copying and pasting the code below:

SLGT Support Local Grow Together on Facebook

If you would like to link back to the SLGT Website (currently under construction) add the following code to your website or blog:

Support Local Grow Together

Typekit Revisited

Last week I wrote an article reviewing the new Typekit service for embedding fonts on websites. After using the service for over a week now on my website, I am still on the fence about it’s practical uses for building client sites. The font choices are incredible and they are offering a very wide variety of type choices from some of the great foundries like Under Ware, Font Head, Ps.Type.Lab, and many others. Many well know designers are praising the service and using it on their own sites.
Andy Clarke– A beautiful Web says

“Typekit will revolutionize the way that we work with, and purchase typefaces in the same way that iTunes revolutionized the way we buy and listen to music.”

And Jason Santamaria’s font kit is featured on Typekit’s feature tour.

As I mentioned in my earlier article, you use the service by calling a javascript file hosted on Typekits servers which return a file that replaces your chosen selectors with the fonts you have included in your kit. Typekit claims “Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.” Adding that “—often faster than most web sites can serve their own CSS.” Unfortunately the service fails to deliver on this claim.

If you look at the picture, you will see that it is taking 1.2 seconds for the 363kb font file to load from their servers. This causes the page to jump slightly when the default fonts are replaced with the Typkekit fonts. My font kit contains 2 fonts with a bold, regular, and italics version of one and just a bold version of the other. 363kb is a huge size file to load and my support questions in their forums regarding the issues have not been addressed (my support request were posted 6 days ago and still no answer). Once Typekit can work out the kinks in their javascript, file sizes and fully staff their support team, I think they will become the standard for web font embedding.

How to use the new css @font-face

To use the css @font-face declarations you need to add a call to the font file which can be stored on your server or anywhere on the web. To use the fonts on your web pages simply include the font names in your selectors and font stacks. See code below:
@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("Alternate name"), local("Alternatename"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
@font-face {
font-family: "Your italic typeface";
src: url("type/filename-ital.eot");
src: local("Alternate name"), local("Alternatename"),
url("type/filename-ital.woff") format("woff"),
url("type/filename-ital.otf") format("opentype"),
url("type/filename-ital.svg#filename-ital") format("svg");
}

The above code references and call the font stored on root directory in the folder named “type”. You will notice that the font is called in 4 different formats. This is necessary for your font to show up properly on different browsers. The .eot format is for Internet Explorer, the .svg is for mobile browsers and the .woff format is the new secure type format developed by Mozilla that is supported by the upcoming Firefox 3.6 release. Woff stands for “web open font format” and is fully explained on the Mozilla Hacks Blog. Many of the large foundries and type face designers are supporting the new format including Adobe and House Industries.

It is very important to place the font calls in proper order in your css. The reason the .eot is placed first is because if not Internet Explorer will try to render the type in any format placed before the eot. This takes up bandwith and will slow loading times for IE users.

You will also notice the use of 2 @font-face rules, this is because to properly render the italic version of the same typeface you have to treat it as a 2nd font.

Font Squirrel

Since most fonts are only available in open type or true type format you will need a way to convert them. Font Squirrel provides a free for commercial use @font-face generator. You just upload your font, choose your format, and Font Squirrel returns back a zip file containing the css, the fonts, and a sample html file to see how the fonts are rendered. It also includes a base 64 coded style sheet to use on fonts that require encryption for web embedding use.

Here is the css returned in my @font-face kit:

@font-face {
font-family: 'ITCGaramondHandtooledStdBold';
src: url('GaramondStd-HandtooledBold.eot');
src: local('ITC Garamond Handtooled Std Bold'),
local('GaramondStd-HandtooledBold'),
url('GaramondStd-HandtooledBold.woff') format('woff'),
url('GaramondStd-HandtooledBold.otf') format('opentype'),
url('GaramondStd-HandtooledBold.svg#GaramondStd-HandtooledBold') format('svg');
}

Font Squirrel also has hundreds of free commercial use fonts available for download. Each font includes the @font-face kit.

Web Font Specimen

Tim Brown from Nice Web Type , a site dedicated as a complete guide to web fonts, has created tool for designers to use for evaluating type faces and how they render in browsers Web Font Specimen contains an example HTML file, three CSS files, and an empty folder in which to put your type. I use this tool to compare fonts before using them on the web.

EULA Limitations and Progress

The real remaining limiting factor effecting the use of fonts on the web is the End User License Agreement. Since it is a fairly new technology most foundries and type face designers either haven’t addressed web embedding in their license or they do not allow it due to fears of “font-piracy”. Some are turning to Typekit to license their work and others are making a specific web embed license available. My favorite foundry, House Industries allows the use on a case by case basis and charges accordingly to allow the use. MyFont’s EULA prohibits the use but their license does not specifically address the issue.

For a complete list of foundries supporting Web Font see Typegirl’s blog post.

Conclusion

With all the new services and products available for commercial designers, now is the time to learn about the new standards and help make the web a more beautiful place by removing the former limitations on only being able to use “web safe” fonts. What are some of the issues you have run across with web font embedding? Please share your comments below.

References and further reading:

A List Apart, “Real web type in real web context”
A List Apart, “An Interview with The Font Bureau’s David Berlow”
Nice Web Type “One place for web typography”
Web Designer Depot, “10 Web Typography Rules Every Designer Should Know”

Many small businesses face the dilemma: How to enable employees to share documents, communicate and collaborate on projects and present a professional well organized image to clients. Managed I.T. infrastructure is simply an expense they is way out of the scope for many companies. Google solves this problem with it’s new enterprise level cloud computing product, Google Apps. Cloud computing is the latest industry buzzword that simply means using software as a service where the programs and files are stored on internet servers and are accessed through a web browser. This eliminates the need for an I.T. department and costly hardware.

Fast paced business environments need access to their data at all times and Google Apps allows users to share contacts, calendars, and email in sync from any web browser or smart mobile phone. If you have ever worked in a large corporation you are familiar with Microsoft Outlook and share point which requires hardware and support within the infrastructure to run the applications. Outlook has big learning curve for new users and is often buggy and hard to setup to work properly. Google Apps is as easy to use as their popular Gmail. In fact it runs on the same interface with the only difference being you can brand it with your own company’s logos and identity.

To set it up on your domain you simply need access to your hosting providers dns and mx records. Your web host can help you with this or you can hire someone to set it up for you. Once you have configured your web host you access your interface by going to www.mail.yourdomain.com and log in just as you would on Gmail. You can then ad users to your account, set up calenders and share your contacts. To allow syncing with your mobile phone, Google provides a link to install the app on Blackberry’s, Iphone, Android, and other popular smart phones.

There are two versions of the product available, the enterprise version cost $50 a year per user and allows greater security and the ability to use and integrate third party applications. The standard version which I am using is free for up to 25 users and has many of the same features. Go to Google Apps for Small Business to get started or learn more.

For all of my website customers, I will be offering installation and configuration of the product as part of the hosting plan. It’s great way to be productive and save money in the current economy.

Until just recently web designers were very limited in the way they used fonts on websites. The Cufon js and Flash Sifr methods have been around for a little while but they are not widely accepted and you still had the license issue. Commercial Eula’s have always been very specific in regards to how you could use the fonts in a printing environment and specified how many work stations they could be installed on. They also do not allow embedding fonts in files that will be distributed to a third party like the print shop or the client. These terms also apply to embedding font’s on a website and were probably written before anyone knew that website font embedding would even be possible.

Then along came @font-face the new CSS rule that allows you to link to a font stored on any server. Most modern browsers support @font-face but IE and mobile browsers don’t support true-type or open-type fonts, they require the font to be converted to a different format. This is all great if you don’t mind limiting yourself to the few free non-commercial fonts that allow embedding.

Typekit, a new subscription based service for linking to high quality fonts that can be embedding on any website could be the solution. The library of fonts available is very impressive and they are signing up new foundries every month. They allow the font authors to license the use of their work for embedding without worrying about their work being downloaded by anyone without paying for it. You simply choose the fonts you want to use and Typekit links them to your site using a simple Javascript file and you can include your chosen fonts in your font-stacks the same way you would any other font.

I am using the free trial version on this site that allows you to use 2 different fonts from a smaller collection that whats available to paid users on 1 domain. My only complaint so far is that the fonts are not loading as quick as I would like and they are split into 2 files so you can see the font change while the page is loading. Since I only started using the service about 30 minutes before I started writing this post, I am hoping it speeds up as their cache refreshes across all their world wide data centers.

The Project

National recording artist and Elvis Impersonator, Glen Brown, needed a website to promote his new band and showcase his talents to a national booking venue audience. The requirements were a booking calendar and a built in media player so users could listen to any of his tracks. Glen also wanted to incorporate his celebrity impersonations so a flash sideshow was created to play his impersonation sound bytes over photo galleries featuring classic images of the celebrities.

The Design

A large full screen background image with some design features that mirrored Glen’s personality and love of Elvis. For the media player we incorporated the bands Reverb Nation account that tracks and manages all the music.

Visit Site

The Project

Design and develop a logo, branding package, and website for a local home improvement company who specializes in providing eco friendly home repairs and offers improvements that save energy costs and help the environment.

The Design

Professional user friendly design that incorporates a go-green theme using softer and more modern colors than the typical go-green styles being used right now. The project also included some re-writing and organization of the content to provide a better user experience and a very bold call to action was incorporated above the fold on the home page. Other features include an eco-friendly font was incorporated into the logo design that uses less ink than normal type faces.

Visit Site

1st set: Various fabric samples and some slate formica

2nd set: A study in bubblewrap

The Project Scope

Create a website for a newly formed firm that showcases the unique services available and make it easy to update and easy for potential clients to find and contact the lawyers.

The Design

Strong bold colors with a clean modern feel. Designed in Photoshop CS4 then hand coded with XHTML and CSS then transformed into a wordpress theme.

Vist the site