Web typography

Blog

I recently discovered webtypography.net which I would recommend to anyone who has to design any interfaces for web based applications.

This area of UI is often overlooked and in my opinion a good baseline grid, the choice of web font and good punctuation cannot be highlighted enough.

 

Typefaces

Everyone has their typefaces of choice and it is normal to have a couple of good old reliable s for every situation but here are a few that I will be considering for my next project as highlighted by Billy Whited in blog.typekit.com.

Another super cool site I have found that does some amazing web typographical experiments (think chrome experiments for web fonts) is webtypographyforthelonely.com I especially love the opening interactive image.

A good starting point for web typography is Scott Gilbertsons talk that can be viewed below.

Baseline grid

Both Smashing Magazine and A List Apart give amazing overviews on the benefits and problems encountered with implementing a baseline grid so I am not going to repeat what they say so much more eloquently.

So here is what I have found to be my baseline grid of choice. fluidbaselinegrid.com
This is to quote their blurb:

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

Not only does it provide a solid baseline grid but it also used normalize.css as a reset to render all browser elements the same.

It also uses respond.js as a polyfill to fix the pesky issue of older IE versions (6/7/8)  not recognizing media queries.

Yet another handy feature is the inclusion of a fluid column system for responsive design, similar to responsive.gs or goldengridsystem.com.

And yes before you point it out the headers are not perfectly aligned, but this is something you can go back and fix manually if you are creating a static interface and if not, well then I am sure you are aware of the difficulties of creating a perfect baseline grid in a responsive manner with dynamic information.

IMAGE$68CFECD5FAE4B58D

Font Icons, my new favorite thing!

Blog

I recently discovered font icons and I have to say I simply love them!

The benefits of using them are amazing, they are easy to resize without losing quality, and using CSS you can easily style the opacity, shadow, colour and when browser support gets stronger the gradient also using background-clip.

Chris Coyer gives an awesome tutorial on how to use the correctly on css-tricks here.

There are a number of free font icons available for use on the web or you can simply create your own in illustrator, save your icons as SVG and use a service like icomoon to create your icon font.

As they are loaded as a font in your CSS it cuts down on HTTP requests and saves on file size over image sprites so these will be especially useful for when you need to design for reduced bandwidth or a mobile site.