Font suggestion?

[superslug]

I'm using Photoshop to create buttons for my website. I need a font that will look clear and is easily readable on images around 100x40 pixels. I'm also wondering, will the images come out better if I type in the text with the canvas larger and then shrink it, or should I create them at the size they'll be at?

The buttons I'm trying to create will hopefully look like the ones at this site:
www.ditl.org
The above link provided is the inspiration for part of my site design, I'm providing it rather than my own site as this post is genuine and not spam!

 

[Hurricane]

To be perfectly honest, I think the font used at that page is too narrow to be "clear and easily readable".

It is always a good idea to create the pictures at the correct size immediately. The extrapolation done when enlarging or shrinking a picture always results in loss of quality. So a good compromise could be Eurostile, or perhaps Berlin Sans FB Demi, or why not just Arial Narrow.

 

[Jeratain]

Photoshop's default resolution (or PPI) is 72. Change that to 144 or something higher and work with the same size.

 

[Superevie]

Arial font is always good. It shrinks down easily and is readable. I use it on my website and it always looks neat tidy. The other nice thing about it is that it can be used as both in headers and the body of the text.

 

[superslug]

@Hurricane: You're right, the buttons there are narrow. The text is obviously disproportionate. I may have to rethink my button dimensions.

@Jertain: 72 is default?! Of this I was not aware, thank you!

 

[Jeratain]

Careful though. The higher the resolution, the larger the file size, and then the longer the access time.

 

[superslug]

I'm definitely conscious of that, however, my initial batch of buttons (which didn't look so great) were an average of 1.2k. Even though I'm on broadband, I do test the load time on a dialup modem.

 

[Hurricane]

Originally posted by Jeratain
Photoshop's default resolution (or PPI) is 72. Change that to 144 or something higher and work with the same size.

Well, on screen resolution is always 72 dpi, so if you increase it to 144, your button will look twice as big on the screen. So I would suggest working with 72 from the start so you don't have to keep resizing the images all the time.

 

[superslug]

Do you mean resizing when I save the final files in Photoshop or forcing a resize in HTML code? I'm not entirely sure I know why, but I just have a hunch that forcing image size with HTML code is inefficient...

 

[Crazy Eddie]

DPI only affects the printing size surely? 100x40 px will still display at 100x40 px no matter what the resolution is set at.

 

[Lucky]

Indeed. And therefore the PPI value has no meaning at all for viewing it on any screen.
PPI=Pixels per inch
Since monitors display pixels it doesn´t matter if you set it to 72 or 144 or 1200. As long as you are working with pixel dimensions in Photoshop, this setting changes nothing.

It only becomes interesting once you change to inch, cm or something like that. But "real" dimension values as inch or cm then only affect print devices.

So if you save a 100x100 px image with 72ppi (or dpi) it has the same size as with 144ppi. (~30kB uncompressed)

If you save a 10x10cm picture with 72ppi (235kB) you will use 283x283px. At 144ppi it will be 566x566px and 4 times as large in size (940kB).

 

[superslug]

There really is no need to go to a higher resolution then, since this is purely for the web.

 

[Jeratain]

No, the reason I suggested a higher resolution is so that you could view your buttons more clearly while using Photoshop. People are correct when saying they will save in the same size and do not affect the image size itself.

When you are creating small images (ie: 100x100 pixels) then zooming in is not necessarly an option you want to use to be able to read the fonts clearly. In order to see your fonts clearly without using the zoom option to blur and pixelate your image, a higher resolution will help you see how clear your fonts are without messing with your image size.

 

[superslug]

That makes sense, but will the fonts pixelize or blur at all when I save the files to their final format? I would think that I'd want to make them 72 dpi then, since higher wouldn't do any good on the web...

 

[Jeratain]

Originally posted by superslug
That makes sense, but will the fonts pixelize or blur at all when I save the files to their final format?

No. You're good with 72 dpi.

 

[Lucky]

That would only work when you set Photoshop to display pictures in cm or inch dimensions.
I´ve usually set Photoshop to use pixels, so that all your rulers and also the cursor location display the px values. With cm or another real unit it will be difficult to exactly hit the point you want at times.