It’s Friday, I was thinking to have a little fun and offer you this brand new multibrowser addon to create pixel-perfect layouts based on a horizontal grid.

We will also think about a vertical one, or mixing vertical and horizontal grids to bring some happiness into designers’ world

Suggestions and improvements are welcome and much appreciated.

No related posts.

Google came with a new idea in their list of web toys. A font directory that allows you as a web developer to include some “fancy” fonts in your pages without struggle.

What is Google Fonts Directory all about?

All the fonts in the Google Font Directory are licensed under open source licenses that let you use them on any website, from a private blog to a big commercial site. The idea seems to be good and comes to complete the Google AJAX Libraries API.

For now there are only a few fonts available but in time I think the list will grow.

There are two ways to use this on your site

The first one is simple and only requires a css file retrieved from Google’s servers like below:

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine">
 
    <style>
      body {
        font-family: 'Tangerine';
        font-size: 48px;
      }
    </style>

You need to specify the family of the font and if it contains spaces you need to replace this with a “+” (plus character) sign

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Droid+Sans">

You can load multiple fonts in a single call. This will decrease the loading time because you use only one http request. The multiple fonts will be separated by a “|” ( pipe character ) sign.

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Normaly the fonts are loaded using the regular version but you have more control over the loaded font using some selectors for the style and weight, using a “:” ( colon character ) sign, and the values if more than one separated by a “,” ( comma )

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic">

The style and weight of the font can be specified using a fullname, an abbreviation or a numeric value ( for weight )

bold:b
bold:700
italic:i
bolditalic:bi

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700">

Take into account that not all the fonts have the styles you might need so first of all verify in the font directory if it does.

The second option

The second option to load the fonts is to use the webloader (Javascript) that Google offer for this. This script can be called directly ( which is faster) or using their AJAX API functions. The main advantage of this method is that you can load fonts provided by TypeKit and Google or from any other font provider at the same time from the same library.

WebFont.load({
 
    google: {
      families: [ 'Tangerine', 'Cantarell' ]
    },
 
    typekit: 'myKitId',
 
    custom: { 
       families: ['OneFont', 'AnotherFont'],
       urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
       'http://yetanotherwebfontprovider.com/stylesheet2.css' ] 
   }
});

The disadvantage of this method is the increased loading time comparing to the simple method.

Other things to consider

Loading external fonts is slow, at least the first time, until the font is cached on the visitor’s computer. Don’t overuse it.

You need to specify a fallback version for the font in case the browser is not supported. Here the browser uses a serif font in case it’s not able to load the “Tangerine” one.

  body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

The crossbrowsing issue

Each browser behaves in a different way, of course IE being the worse. To make a consistent behaviour across all the supported browsers you should use the webloader. This gives you the chance to display the styled elements with an initial font until the requested font file is loaded, and when this occurs to change it.

    .wf-inactive p { // Show paragraphs in serif font until fonts have loaded.
    font-family: serif
  }
  .wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
    font-family: 'Tangerine', serif
  }

If the number of fonts will increase then Google Fonts Directory will be a good alternative compared to other webfonts providers that offer this as a paid service. But you still can have fun with it, I’m sure google will continue to improve this service.

Check the demo

A demo page can be seen here. Interesting to see how IE behaves.

More resources

Google Font Directory
Google Fonts Directory API

and of course

Typekit

Check the Spanish version of this post:
Tutorial de Fuentes de Google

Related posts:

1. Wacky fonts anyone?
2. 5 free retro fonts that you should use

Do you think using weird fonts will improve or distroy your website? Do you think a boring typeface is better than a wacky one? Then you haven’t seen these fonts

1. Amadeus

2. AKKA

3. Hornswoggled

4. BPdotsUnicase

5. Badaboom

Any wacky ideas anyone?

Related posts:

1. 5 free retro fonts that you should use
2. Google Fonts tutorial

For the font maniacs that would like to improve the web’s boring look with some new fancy fonts, here’s a list with great free retro fonts that will improve your website design.

1. UpperEastSide

2. Riesling

3. Lemonchicken

4. Deftone Stylus

5. LakeShoreDrive

Related posts:

1. Wacky fonts anyone?
2. Google Fonts tutorial

Webiconset.com offers for download three small sets of  icons (10 icons per set ) for both personal and commercial use. The Icons are high quality and come in 4 sizes –  128, 64, 48 and 32 pixels, in png format.

Aplication Icon Set

contains: Register, Settings, Users, Database, Login, Chat, Add, Delete, Edit, Invoice.

Cute Blogging Icon

Set has the next icons : Design, Download, Freelance, Part-time, Hire Me, Not Available, About Me, Services, My Blog, Contact.

while the last set

Mobile Icons Set

includes Phone Call, Photos, Messages, Calculator, Wireless, Calendar, Settings, Contacts, Notes, Map.

No related posts.

There’s no reason for our Google Maps to look ugly because of  the icons Google used to offer. Now have become available a huge number of icons offered by Nico Mollet under the Creative Commons 3.0 license. The cherry on the cake is that they give away everything related to these icons so everybody can develop their own icons based on the original Photoshop files.

The Google Map icons set now includes:

1. Grocery
2. water sports
3. winter
4. Administration, Office & Industry
5. Culture & Entertainment
6. Education & Kids
7. Events & Weather
8. Friends, Family & Real Estate
9. Media
10. Miscellaneous
11. Restaurants & Hotels
12. Sports, Health & Beauty
13. Stores
14. Tourism & Nature
15. Transportation

As far as I see they intend to continue developing icons so the future looks bright for our Google Maps.

Related posts:

1. 3 free icons sets – webiconset.com

We’ll try today to bring some icons to be used for the UI of the iPhone. Like the ones below:

The icons should be grayscaled, as the operating system will take care of all the graphic effects –  like the nice aqua gradient, or the background of the button.

Some of the resources presented are free and some are paid, but the prices are not high.

Free:

Glyphish –  130 png icons.

Pixelpressicons.com –  a free set for commercial or personal usage.

glyFX.com –  5 free icons

app-bits.com –  48 free icons

Paid:

Eddit.com

A set of 160 icons.

Icondock.com has 2 sets of icons

Rocky, a vector set containing 290 icons

and Simply bold, another vector with over 150 icons.

Pixelpressicons.com

A set of 328 icons both available in pixel or vector format.

Kombine.com – 130 png icons

Paid or not, this sets of icons can save you time and money in the process of creating an iPhone application. Share yours.

Related posts:

1. 3 free icons sets – webiconset.com

Due the limited number of fonts available for web we need to make use of other techniques to make our design look the way we want.

Most of the time we simply cut the image from the psd file and place it in the html/css. But this has impact over the accessibility of the site and the compatibility with other browsers (for example text browsers or browsers with  images/CSS disabled)

Of course there are workarounds and fixes for this in orderto improve usability, but what do we do in case our page is dynamic?

In this case we can use text replacement techniques -  some of them presented below:

SIFR2

SIFR2 is  updated with SIFR3  but deserves to be mentioned as it became SIFR3.  Read below.

SIFR3

No need  to tell too much – it uses flash to replace the text in a webpage  with the font specified by the designer. The site presents all the required steps to setup the script.  For me as a non-flash user seems very complicated  and I think this is a huge drawback for this script – it also might discourage other people from using it.  The advantage? – Flash is supported by 99% of  today’s browsers.

There is a little online helper that is very handy in creating the needed files: sIFR Generator and a library for already generated fonts: sifrVault

Cufón

Cufon takes a different approach using Javascript to apply some proprietary generated font files. The renderer creates a SVG canvas(non IE browsers) or a VML representation (IE browsers) altough  SVG seems to be slow in some browsers.

p+c dtr

“P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS.”

Some further stuff about it:

P+C DTR is based on Dynamic Text Replacement script  but allows you to integrate it in your site without any modification –  well… except the setup of the script.

An improvement of this script is done by João Makray , allowing you to have word-wraps.

Flir

“Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between!” . No more comments –  it’s self explanatory.

typeface.js

An alternative for cufon.

Fontjazz

Fontjazz takes a different approach, generating one file with images for each glimpse in a font –  you can select which ones –  and then using Javascript to manipulate the DOM of your page & adding the fonts in specified locations.

Kernest

Kernest technically is not a font replacement technique but it makes use of @font-face –  which is supported by modern browsers –  and allows you to use a free font, or to “rent” one for a year.

Do you know others? Let me know

No related posts.

SemLabs just released two free iconsets:

Free Web Design Icon Set

The Free Web Design Icon Set is a collection of 310 icons in PNG format. They are 16×16 pixels and they’re designed to be used on web projects but may also be useful for systems icons and for print. This icon pack is free to use in commercial and non-commercial projects, modify and distribute.

and

SEM Labs Web Blog Icon Pack

The SEM Labs Icon Set is a pack of 52 icons in PNG format. They are 48×48 pixels and they’re specifically designed for blogs and have an SEO theme. However over the coming months more icons will be added to it to give them a broader scope.

They are released under the Creative Commons (by) Licence.

Related posts:

1. 3 free icons sets – webiconset.com

Function is a set of 128 free to use icons, in 48×48 pixels format. This set includes some of the main Social Media Icons such as: Design Float, Digg, Delicious, Furl, Technorati, Flickr, Stumble Upon, Twitter & Many more…

Related posts:

1. 3 free icons sets – webiconset.com