Photoshop :: Unable To Get Legible / Clear Fonts For Image Map

I have upgraded from CS5.5 to 6. I work on web design and am currently completing an image map of a series of rectangles with text in them which will involve slicing and placing on the web page. To me, the text appears to be very blurry and not clear, despite the settings I use - font smoothing, different font types, etc. I have also tried an example of making the image triple size, doing the fonts and then reducing to required size, but as a small blur filter is applied, it comes out quite illegible. I'm thinking I may need to try this in Illustrator, but I have never used the product and am not sure how to go about doing what I did in Photoshop. I've actually had to reduce the font size to less than 6px to get it to fit in the image map I am undertaking, which I am sure is not working (2.5 and 3px, it's ridiculous). I'm not sure if it's something I am doing wrong or if there is something different in version 6. Image size is 685x880px, 72dpi (but have tried it on 300), RGB. I am saving them as png's, but the blurriness is there while in PSD format. I have attached examples for you to peruse - unfortunately, I have to work with the colours provided.
 
The fonts I have used are arial, calibri, verdana and tahoma. I've attached a copy of the word document I am redrawing from - it's gorgeously crisp and clear in that, shouldn't I be able to get the same effect in a graphics program?