One of the most important but overlooked aspects of a web design is the typography. The fonts you use and how you present those fonts can really make or break your website design. Thankfully you can use CSS to really make your fonts look great!

The first thing to learn when it comes to CSS fonts are the selectors and what each of them do. Here are the main font selectors and what they do:

font-family
This selects which font you want to use for your text. You can specify more than one font family, then if the browser cant find the font you use first it will move on to the next one and so on until it finds one it recognises.

font-size
As you might of guessed this defines the size of the font. You can define this as a pixel size (e.g. 12px), as a general size (e.g. large, small etc.).

font-style
The font style attribute defines extra styles to your font such as italic.

font-weight
The font weight sets the weight of the font. To define the weight of your font you can use words (such as normal, bold or bolder) or you can use values (e.g 100, 200, 300 etc.) the higher the values get the bolder the font will get.

These are the main font properties you will use. Now lets have a look at defining a font in CSS. We will add the font to an id called content. Basically this means that everything in the content div will be given the font style we define whilst everything outside the div will have a seperate style.

In the example above we first define the font family, you might notice I slected three fonts all seperated by a comma. This is (as described above) so the browser can find another font to use if it cant find arial. Next we define the font size which is pretty self explanitory. Then we define the font weight and font style. As the default for these two values is normal if you didn’t want to have italic or bold text then you wouldn’t have to define them so your css style would look like:

Now we will move on to writing the above style in shorthand. Writing in shorthand has the same effects as writing it the long way, it just saves some space.

The way the style should be layed out is:

So an example of a font style would be:

And that’s all you need to know for the basics of text styling with CSS.

I just had to get this post up after today. We’ve been doing work for a guy for about 2 years now on one of his websites.
Anyway we get in one morning and his site has been hacked, all the main content had been replaced with some javascript that loaded an iframe. He asked if we could sort it out for him so we got in touch with his host.
Their answer is, they dont do backups of customers sites but they’ll send him a guide on how to backup his own site in the future! So he’s lost about 100 pages of unique content that he sat and wrote up himself.

So never ever, ever, ever, ever even think about not backing up your website as the consequences could cost you dearly. If you’re using wordpress here’s a nifty backup tool that will automatically backup your wordpress website and email the backup to you. http://wordpress.designpraxis.at/plugins/backupwordpress/

My new idea for a new blog post that people might find useful is essential reads. Basically this section will contain links to sites that I use everyday to find useful; links, guides and information that I think have made me a better developer.

The first site in this series is SmashingMagazine. This website, in my opinion is fantastic. If you’re a web designer, developer or anything else to do with websites then this website is for you. They have everything from photoshop tutorials to free font downloads to desktop wallpapers and podcasts. I always check this website out at least once a day.

Cheat sheets can be very handy from time to time. Although you probably wont learn much from them, I find them excellent for refreshing my memory. For example if I’ve been working on an ASP project for a while and then have to do some CSS or even worse PHP I often take a while to get my head around the changes in language and format.

I find cheat sheets are great for helping me aclimatise quicker! So here’s a collection of my fevourites:

CSS Cheat Sheets

Now I code something using CSS at least once a day but I still have the need every once in a while to look up some obscure property, so having this CSS cheat sheet lying around comes in handy.

HTML Cheat Sheets

HTML cheat sheets can always come in handy from time to time, bookmark it or print it out so you know where it is when you need it!

jQuery cheat sheets

I’ve been doing a lot of work with jQuery recently and although my javascript isn’t very good this jQuery cheat sheet (and another one from ColorCharge that I cant find on their website anymore) has helped a lot.

ASP Cheat Sheet

PHP Cheat Sheet

MySQL Cheat Sheet

SQL Cheat Sheet

Regular Expressions Cheat Sheet

MOD_REWRITE Cheat Sheet

HTML Characters Chart

Now I realise a lot of these cheat sheets are from the same website, this is just because they’re the best ones I’ve came across. If you know of anoher good cheat sheet that I’ve missed, let me know and I’ll get it up.

I’ll update this post as and when I find new cheat sheets thatI think are worth telling people about.

Updates for this site have been slow recently, mainly because I’ve had so much on at work so when I’ve got home I just want to relax, especially with the good weather we’ve had recently!

Since my last post I’ve been doing a lot of work with asp as well as improving my php and javascript.

I’ll try and get a CSS tutorial or two online in the next few days so keep checking back.