@font-face fonts: What are they and where do I find them?

July 30, 2010 17:13 by Ben
@font-face

For many designers and front-end developers, another hot topic of conversation is the @font-face CSS declarations which now allow us to use any font we like in our websites as if it was installed on the users computer.

Before we were restricted in which fonts we could use, relying solely on the fonts which most users would have installed on their computers; Arial, Verdana, Times New Roman, Courier New – to name just a few.

Now we can upload the required font files to our server, reference them in our CSS and we are all set.

I bet I know what you are thinking – what about browser support? It goes without saying that everything we do is affected in someway or another by the browser support of the features we want to use. The good news is that @font-face is currently supported by all major browsers: Firefox 3.5+, Chrome 4+, Safari 3.2+, Opera 10.1+, even Internet Explorer 6+.

But hang on, isn't Internet Explorer 6 (IE6) over 10 years old? Yes it is, and even though @font-face is officially a new declaration within CSS3, it was originally planned for CSS2 and therefore was implemented by IE6 – when it came to @font-face being removed from the spec (for reasons I am not quite sure of), support was never removed from IE6.

For more information on the code required and how to create a bulletproof @font-face declaration which is cross-browser, check out Paul Irish's article on 'Bulletproof @font-face syntax'.

However, though in theory @font-face allows us to use any font we like – we are restricted by the font's licenses whether font embedding or sharing is permitted. This is mainly down to the fact that if we are linking to a font file in our code, it means anybody can just download the font and then is it on their computer.

Therefore, it is important to check if the font you want to use is permitted to be used on the web.

Alternatively, there are a few resources which I have come across and found extremely useful in getting @font-face fonts and making sure they are permitted to be used.

  • Font Squirrel

    The Font Squirrel website lists 'hundreds of @font-face font kits' which are 100% free for commercial use. The kits provide all the necessary fonts and code needed to be implemented.

  • Fontspring

    If you wish to have even more of a selection of font, and have a more unique feel to your website - Fontspring provides purchasable fonts along with @font-face licenses, all very reasonable prices.

  • FontDeck

    Whereas the last 2 services allowed you to select individual fonts, and in the case of FontSpring, purchase @font-face licenses, FontDeck allows you to pay a subscription and have full access to their library of fonts to use on your website. Great alternative if you want to use a lot of fonts, or as a freelancer you love to use unique fonts for all your clients' websites.

  • TypeKit

    Like FontDeck, TypeKit allows you to pay a monthly subscription allowing access to their library of fonts and use them on your website. The higher level your account type is, the more fonts you can use and the more website domains you can use the fonts on.

So when you are next designing a website, or even as a client looking to have a website designed, look into the possibility of using more custom fonts to get more aesthetics and edge on the web. Stand out, be at the forefront of new technologies and trends.


Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

IKEA - Verdana: Design suicide or creative genius?

June 17, 2010 15:34 by Editor

IKEA has long been an innovator of contemporary clean lines and had close associations with highly regarded designers (mostly Swedish). They have made the flat pack industry their own with peers either folding or falling by the wayside (MFI to name one). They are the epitome of Scandinavian design.

 

 

So the question is what possessed the powers that be to rebrand such a recognised identity and in the process replace Futura with Verdana as the corporate font? Sure Verdana is an extremely popular font that is used on millions of websites worldwide. But that is the point, aren't IKEA innovators rather than followers? Or is the choice of Verdana further enhancing that quirky reputation? There is another question, how many times have you seen one font used solely across all communication models? The majority of brands use complimentary fonts for use inappropriate instances.

The change of typeface has angered many IKEA fans, with online petitions and forums being set-up to give IKEA-ites a platform to vent their anger.

But they need to remember, this is IKEA! The brand often surprises and can produce random spots of advertising that often leave the viewer perplexed. It is what fascinates and draws people towards their products and brand.

Believe it or not my issue is not with the printed materials but the website. There is just no creative flair or inventive usage of the typestyles, no considerations have been made, it could almost be a direct CSS amend. Of course the site is extremely efficient, clean and functional, but I just can't help think that something is missing; something different and exciting. On certain pages within the site the use of the font overlaying an image renders the copy almost unreadable– again it's about the consideration and isn't what we expect from IKEA.

 

In the design world we are all aware of what to do and what not to do with Verdana. It is awful above 11px and even more grating in caps or bold. It is also a very wide font, that doesn't give you much room for manoeuvre. The champion site for using Verdana is the BBC, but even they introduce an alternative font on blog posts. That said IKEA handles the font weights and sizes very well across the majority of the site, there are just a few too many styles which makes certain pages look a little out of place.

As for the printed materials, on the whole I wasn't expecting too much, but the usage of Verdana doesn't actually jar too much. It has been sensitively applied at a readable, but not too large, point size. On the odd occasion I have seen pretty awful applications on recent IKEA deliverables, which are most probably outsourced for quick turnaround as they bear none of the careful considerations witnessed in the primary corporate communications.

The 2010 catalogue isn't a perfect example of how Verdana can work as a print font either,there are a number of pretty awful spreads – let's face it Futura is a much more flexible and accessible font that works in large, small, bold, caps or lowercase. In certain instances it would appear the fonts have just been switched and it just doesn't work like that when dealing with these two fonts.

At the end of the day IKEA have made a statement on the inside of their 2010 catalogue that reads, "We're constantly striving to cut costs without compromising quality." But surely the font switch has compromised quality to a certain degree. In effect it looks like a 'cheaper' font, but doesn't possess the quality that Futura offers. Verdana is a love/hate font and unfortunately the IKEA brand may now be looked at in the same light.


Currently rated 4.5 by 2 people

  • Currently 4.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: ,
Categories: Craig Kean
Actions: E-mail | Permalink | Comments (1) | Comment RSSRSS comment feed

Calendar

September 2010
SuMoTuWeThFrSa
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

Tags