How can I get smooth fonts in mock ups?

Question

I am mainly a coder but have to do design mockups from time to time. For this I have Fireworks CS5 which is great because I know how to use it and can just chop up various supplied media into a layout.

However, the fonts look awful. It's not a case of enabling anti-aliasing as I have experimented with those settings.

When the google web font is rendered by JS in the browser it looks crisp and clear and much better than in my mockups.

The only way I can get this same clarity in my mockups is to create text twice the size I want it in separate image and then export back to my mockup at 50% size. I have tried doubling the dpi canvas settings but that doesn't work.

Is this just the way I have to do things or am I missing a simple trick?

I realize that there is probably better software on the market but it's hard to justify paying hundreds of bucks out on new software when the one I've got generally meets all my needs.

Any advice appreciated, thanks.

Answer 1

It sounds like you're using a retina display to view/work on. In the browser it's scaling your fonts where Fireworks is not.

Designing at double the size of the file would be a start, though that means 24px fonts are 44px and 100x100 squares are 200x200 as an example.

Also, why not try using Sketch.app? It's only $99 w/o subscription. Or Affinity Designer for $40

Fireworks is dead bro.

In photoshop I design @2x. My files are 72DPI and I double the size of everything. That 80pxH Menu is now 160pxH. My documents are 2880x1900 or 1440x900 at 144DPI/PPI. There is a time and a place.