Tom Hirst

Custom Web Fonts with @font-face, Google Font API and Typekit

Tom — Wed, 21 Jul 2010 00:12:18 +0000

A while ago I found myself constantly using the same font for everything. I’m talking body copy, header tags and even logos. My Helvetica (with -1px letter-spacing) obsession was at its peak and I was struggling to mix up my font stacks to add more variation to my designs.

Since then, as advances in web typography have become more readily available, I’ve found it much easier to use type as a key design element in my work, as opposed to being creatively restricted by “web-safe” fonts. The aim of this post is to briefly round up our options (along with my views) when using custom fonts in web design. So let’s take a look!

CSS3 @font-face

With CSS3 standards right around the corner, most browsers supporting CSS3 features and more websites taking advantage of them – @font-face is a custom web font option to consider.

I use the @font-face method for this website and I feel it works well. ChunkFive Regular is an example of a free font that’s license allows us to embed it into our CSS, as I have done with header tags on this site. I would strongly suggest you make sure that by using @font-face you are not breaking the terms of any font you intend on embedding.

Whilst on the subject of @font-face, I must mention the incredibly useful Font Face Kits by Font Squirrel. There are 100s of pre-made @font-face kits that include multiple type formats for all browsers, including Internet Explorer! You can even make your own kits by uploading other fonts with the Font Face Generator but again, check those licenses.

CSS


@font-face
{
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive-webfont.eot');
	src: local('‚ò?'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

h2
{
	font-family: ChunkFiveRegular, Georgia, serif;
}

Pros

Endless available fonts (providing you are adhering to the relevant licenses when using them!).
Works in all browsers (including iPhone and iPad) when all the right font formats are used.
Is not dependant on JavaScript being enabled in the users browser.

Cons

It takes slightly longer to implement than Google Font API (more code).
Quality of font rendering may differ browser to browser.
@font-face is a CSS3 property, so will not pass current W3C CSS 2.1 validation.

Google Font API

Recently, my first stop when working out typography for new projects has been the Google Font API. Although a relatively new service, I find it incredibly simple to use and more importantly painless to set up. The speed of which I can quickly browse the Font Directory, choose a suitable font and have it live on a website is incredible. This is definitely the most hassle free option when using custom web fonts, in my opinion.

The only let down with the Google Font API currently (the service is still in beta) is the fairly small amount of fonts available, although there are variants (bold, italic, etc.) included with some fonts in the directory.

HTML

CSS


h2
{
        font-family: 'Cantarell', arial, serif;
}

Pros

It’s a free service.
Extremely quick set up time (small amount of code).
Is not dependant on JavaScript being enabled in the users browser.
No need to worry about license legalities.

Cons

Small number of fonts to choose from.
Quality of font rendering may differ browser to browser.
No support for iPhone or iPad.

Typekit

I first heard about Typekit when I received an invitation to try it out a year or so ago. The first thing I noticed is the huge font library – you will definitely find a typeface to fit your designs there. The second thing I discovered was that to use the service to its full extent you have to pay a yearly fee. The “Portfolio” package, which gives you unlimited websites, unlimited fonts per site and access to the full library is by no means expensive at $49.99 per year – but this cost may still be off-putting, especially for designers who are just starting out.

I had used the free trail account to test out Typekit’s functionality, although the limitation of 1 website and 2 fonts is kind of low in my opinion. Coupled with the lack of access to the full font library and the requirement of a Typekit badge in a fixed position on my page, I wasn’t won over enough to upgrade to a paid account.

HTML

CSS


h2
{
        font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Pros

Large array of available fonts.
Good support articles and help section.

Cons

Whilst not overly expensive, Typekit is a paid for service (if you want all features).
Browsers may render your page content before the custom font, usually meaning a web-safe fallback will be shown for a couple of seconds beforehand.
Is dependant on JavaScript being enabled in the users browser.
No support for iPhone or iPad.

In conclusion

The custom web font method you use with any given project will be decided by both personal preference and the requirements of each design/build. For instance, if you require your custom font to work with Mobile Safari you would choose @font-face over Google Font API or Typekit. This was the clincher for me personally due to two main reasons – #1 My analytics show a high percentage of visits are from this browser and #2 I like to browse the internet using my iPad. Therefore giving visitors of my site (including myself) the best possible user experience is of high priority to me and using @font-face delivers this.

I hope you found this article interesting. If you have anything to add, whether you agree or disagree with my points – please feel free to leave a comment.

New York themed iPhone 4 wallpapers

Tom — Fri, 02 Jul 2010 14:44:47 +0000

Having had the standard “earth” wallpaper on my iPhone 4 for the first week of ownership, I decided it was time for change and to make more use out of that new retina display. What better way to personalise my new gadget than with one of my favourite places, New York!

The bonus with iOS4 is we can now use two different wallpapers – one for the lock screen and one for the main menu and everything else. This means you can use two of these wallpapers in tandem! It certainly helped me as I couldn’t pick between my favourite pair and I feel it gives the iPhone more of a “theme” to it, rather than using just a single wallpaper.

The wallpapers are created from photographs I took from a recent trip to NYC, edited in Lightroom and re-sized in Photoshop. They are free to use how and where you want, although if you want to link to them – please use the URL of this post (not the direct download).

To download the iPhone 4 wallpapers (file size 1.4MB), click the button below – I hope you enjoy them!

Giving yourself the right title

Tom — Tue, 29 Jun 2010 12:47:16 +0000

Upon graduating from University I jumped straight into the realms of self-employment. One of the things I have learned in this time is the importance of giving yourself the right title and branding yourself successfully.

I have always described myself as a web designer and since I work for myself, a freelancer – but does this best reflect firstly, my abilities as a designer and secondly, what I have to offer my clients?

Like many freelancers, word of mouth recommendations are a large part of my work flow. This is all well and good until I realise I’ve been mis-sold. For instance, an existing client recommends my services to a potential client describing me as the “website designer guy”. The potential client then gets in touch expecting me to write them a custom CMS, or re-create Facebook from scratch. Sure I have some development skills, but the time it takes me to educate the client about the differences between designer and developer is cringe-worthy; usually ending with said potential client disappointed that I can’t develop their application for the same price the recommender’s WordPress design and build cost.

On the flip side of the initial cringe-worthy situation, this is still a lead that I would not have had. With a bit of project management, outsourcing and explanation to the client on my part I could still get these requirements fulfilled – budget and time frame dependant of course.

Upon reflection and relating this back to giving yourself the appropriate title, I think the client’s vague perception of a “web designer” is actually a plus point in getting new work. Granted some people will leave the initial discussion disappointed but sometimes things don’t work out and you won’t win a project, it’s just part of the industry.

The importance of the right title is again highlighted when dealing with design agencies. Obviously a company looking for freelance creatives will know the difference between someone describing themselves as a “web designer”, “web developer”, “illustrator”, “photographer”, etc. Assigning yourself the most relevant job title will more than likely make it easier for them to find you, thus leading to potential new work.

Tangent alert!

But then this got me thinking. Is giving myself the “freelance” title and using my own name the best way to advertise my services as a whole? Should I consider creating a brand for my business and work under the guise of “we” rather than “I”? I think this might be an option as in my experience, people like to think they are working with an orchestra and not just a one man band.

More on this from me a little further down the line.

In conclusion

As creatives it’s pretty much impossible to summarise our entire skill set with a single title. Most designers will at some point have strayed away from their bread and butter. For example, I’ve delved into print design on a few occasions, with web design being my day to day job.

I think the most effective strategy is to create a company identity but not forget the importance of your name and title as a brand in it’s own right. By running both in parallel, you are casting the net over a larger number of potential clients and jobs. The smaller (project, budget and personnel) clients who prefer to work one to one and larger companies who like to think they’re dealing with a 10-strong design house.

On a personal level, I have spent the last year building up my personal brand. Thus, starting to look at the bigger marketing picture is my next step to gaining more clients and ultimately growing my business.

Additional reading

What’s the first thing you do with a new WordPress install?

Tom — Mon, 21 Jun 2010 14:01:32 +0000

As you probably already know, I’m a massive fan of WordPress. I use it for the majority of my projects, hence installing and configuring it on a regular basis. After starting a fresh site today, I realised I’ve picked up a set up habit.

I always (like, literally always) do this first:

This particular permalink structure has proven successful for me in terms of SEO, although my main reason for using it is I can’t stand the default WordPress suggestions. For instance, what does http://tomhirst.co.uk/?p=123 mean to anybody? It’s in no way descriptive enough.

I’m not sure why this is my first port of call, but it’s just one of those things my mind goes on autopilot to do. I guess it’s like driving to work everyday – something you do without thinking, as you know the route by heart.

So, what’s your first step when configuring a clean install of WordPress? Leave a comment and let me know.

Redesign complete!

Tom — Wed, 16 Jun 2010 00:00:03 +0000

After far, far too long with the standard one page site – I’ve finally had the time to give my portfolio a brand new look.

For reference and to anyone who didn’t see the previous design, click the screenshot to the left. It’s come a long way don’t you think?

I’m really happy with it and it’s great to finally see the finished product live. A fair amount of time has been spent on attention to detail; getting everything exactly how I want it without cutting any corners. Hopefully everyone will enjoy using it and reading my blog posts!

Let me know what you think! Constructive criticism is always welcome – so if you’ve got any suggestions, feel free to comment.