Cufon

Cufon is a Javascript-based font replacement solution which makes heavy use of canvas and VML. This allows it to render the font on most browsers along as Javascript has not been disabled. The beauty of Cufon is it’s limitations, or lack thereof, when it comes to which fonts it can render. The system works by rendering any specified text configured on the Cufon site. When the page loads the text is transformed using ‘Canvas’, a cross-browser element that looks and acts exactly as you specify in the website’s stylesheet.

Unfortunately – like most systems – there is a major drawback. Although Cufon can render any font using the Cufon configuration tool, site owners need to be assured that they have the right to use the font for this purpose (font embedding without Adobe Flash). Certain fonts require an extended license for this purpose, however it’s important to identify whether you can legitimately use the font or whether you would have to seek an additional license first. Other disadvantages can be that it is quite bulky compared to straight forward CSS, which can add to your pages load time.

Typekit

Typekit is a pretty simple method for implementing alternative type as it is provided via a web service. Typekit has a library of fonts which you can license by purchasing an annual subscription to the service. Although there is a free plan, it is quite restricted for use on one website with the Typekit badge having to be visible on the site. There is a wide range of typefaces available and the Typekit website allows you to completely configure fonts, font weights and styles using an intuitive interface.

However, it does have it’s downsides and for us these are some pretty big downsides when it comes to font rendering. The fonts available on the Typekit Library rarely match with fonts you might have locally for use in Illustrator or Photoshop. Quite often you have to settle for a close match, and this is not good practice with regards to brand guidelines etc. Often takes a fair amount of explaining to the client when the visual they signed off then doesn’t match what they are seeing on their final website.

Another issue is that although the fonts render smoothly in modern browsers on Mac OSX, rendering on Windows doesn’t even come close with most fonts options. The fonts just end up rendering really badly. And this doesn’t help when you’ve designed with a font that Typekit renders badly for the majority of your sites users.

The major benefit of Typekit is the freedom to use the font sets available without worrying about licensing. The major drawbacks are the lack of availability of certain ‘standard’ fonts and the render failures in Windows which really let it down.

@font-face

@font-face is a system which actually permits the render of any font from your web server. You simply add the font files and reference them using ‘@font-face’ syntax and the font will render as expected. @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages. And with this you will find issues with regard to cross browser compliance, however, it does seem now, that all the major browsers appear to be addressing this with Safari, Firefox and Chrome having already adopted this method natively. There are other issues around licensing, but these appear to have become less prevalent with the birth of freely available @font-face kits. Such kits can be found at Font Squirrel.

Although not perfect, the @font-face method is a pretty solid solution. Fonts render perfectly, the nature of it’s delivery means there is far more choice regards font selection and rendering speeds are faster than the Javascript or Flash based alternatives.

Google Font

Obviously, when Google throws its hat into any ring, it has a tendency to change everything. Recently, Google (in conjunction with Typekit) quietly launched a webfont API that could result in just such a long-term shift. Google decided to forgo a members-only service completely in favor of providing a free and easy way for any web developer to quickly load custom fonts into a web design. Needless to say, this is the single fastest and easiest webfont solution we’ve come across. Since you don’t have to go through the mess of registering specific domain names to license the fonts for.

Like just about all of the popular webfont solutions, Google’s system is using @font-face to get the job done. So why not just do it yourself? Chris Coyier points out three main benefits in his article on the Google Font API: “Bandwidth savings (weight is on Google), Caching speed (same font used on multiple sites, browser cache kicks in), and Speed in general (Google’s CDN is faster than your site).”

However, one of the biggest downsides is that there are currently very few fonts to choose from, however this is continuously growing and currently Google has over 500 font families. But you can always decide on a couple of fonts you may wish to use at the start of the project so you know it is available.

Conclusion

All the libraries mentioned here have their benefits and all have their issues. There is, however, one clear winner. As the browser software companies adopt it, the @font-face method is likely to become the norm. Helped also with Google Fonts, which takes advantage of the @font-face system, this is the easiest to use and implement and it’s free. In fact you will see from our own website that we have adopted the Google Font API to render the font ‘Open Sans’ for some of our text.

We have loads of stuff to still add, so make sure you check back regularly to see whats new. And this time we promise to update the blog more often with some great tips and hot topics for you all to discuss.

2012 has already been a frantic year, with some fantastic projects already under our belt and lots more that we are currently working on. We can’t wait to share these with you.

So, let us know what you think of the new site, your feedback is always welcome and enjoy the rest of your Easter weekend.

The Creative Monster Team.

At Creative Monster Limited we are currently testing out Microsoft’s Office 365 services and we are very happy with the product, it’s incredily flexible and has a lot of extra functionality compared to their BPOS offering.

Once we are happy with the product and it has officially lauched, we will be upgrading our existing BPOS clients to Office 365.

If you would like any further information, feel free to contact us at hello@creativemonster.net.

The new up and coming Manchester label, Seven Eleven, is about to launch it’s spring/summer range, after meeting with the designers they told us a little bit more about their brand.

Our creative vision has been to produce an exciting range of fashion scarves that cater for all occasions and offer a point of difference to those found on the high street. We source one off prints from around the UK, offering exclusive designs for everyone. Our silk-mix scarves are adorned with intricate feather trims for that touch of glamour and our in house team and collaborative designers provide eye catching digital prints on the finest of silks.

At Seven Eleven we are true believers of british fashion and manufacture, which is why we source and manufacture within the UK.

At Creative Monster we look forward to working with Seven Eleven to help establish their brand and in the mean time why not check out their website, Facebook page or Twitter feed:

Facebook Group: SevenEleven Scarves
Twitter: @SevenE11even
Website: sevenelevenscarves.co.uk

Starting this weekend, 2nd February 2011, with a Valentines Special, Feet For Ransom will be hosting a night at The Mulberry every other month. It’s free to get in so come down and knock back some cheap drinks with us while the FFR residents “tear the mother down”. From 08:00 PM until 01:00 AM at The Mulberry, located on Station Hill in Farnham, Surrey, you can enjoy the sounds of some of the countries biggest, up and coming DJs. Such as, FLN (DBF), Liberate (Kane FM) and Ahadadream playing a variety of music, including, garage, DnB, funky, hiphop, dubstep and grime.

On the night The Mulberry will be offering deals on various beverages and meals. There will even be a late winter BBQ from 10:00 PM. So, you have no reason not to make an appearance; tunes, drink and food… what more could you want?

Please Support our friends at Feet For Ransom and invite your friends, family, cats and dogs to the event and the pages below, help us spread the word:

Facebook Group: http://on.fb.me/c2Av43
Facebok Fanpage: http://facebook.com/feetforransom
Twitter: http://twitter.com/feetforransom
FFR Website: http://feetforransom.com
DBF Website: http://dontbefaceless.com

HOLD YOUR FEET TO RANSOM // DON’T BE FACELESS

So it’s now 2011 and we have finally got round to finishing and launching our new website. Although it has taken us a while to finalise the design and coding, due to new projects taking priority, we are pretty pleased to say the least and we hope you like the look and feel of the our new website as well.

Our old site was just a temporary one, just so that we could show off our growing portfolio. However, you will notice a lot of new additions with this site with much more detail on our services and what we do. Our major new feature that we have included in our new site is this blog. We plan to update you with some of our latest news, events, as well as, news from the industry and we hope to provide you with some useful tips and design techniques also. Our Creative Monsters may also chuck in a few freebies now and again that you can all enjoy!

So, make sure you subscribe to our rss feed or check back often to keep up to date with our latest news. You don’t want to miss out on any cool freebies or awesome competitions.

Please take a look around and get in touch, let us know if you have any questions or are interested in working with us. No project is too big or small for Creative Monster, so even though we may not include it on our website, it doesn’t mean we can’t do it. Just drop us a line and we will be more than happy to help discuss your next project.

And finally, please feel free to leave your comment below and let us know what you think of the new site. Wishing you all a Happy and Prosperous New Year!

The Creative Monster Team.