1. We have added a Gift Upgrades feature that allows you to gift an account upgrade to another member, just in time for the holiday season. You can see the gift option when going to the Account Upgrades screen, or on any user profile screen.
    Dismiss Notice

Font suggestion?

Discussion in 'Computer Talk' started by superslug, Oct 14, 2003.

  1. superslug

    superslug Still hatin' on Khan Moderator Hall of Fame Staff

    Joined:
    Jan 5, 2003
    Messages:
    11,371
    Location:
    The Farm
    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!
     
  2. Hurricane

    Hurricane Sleeping Dragon

    Joined:
    Dec 6, 2001
    Messages:
    1,197
    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.
     
  3. Jeratain

    Jeratain On the can.

    Joined:
    Nov 7, 2002
    Messages:
    2,694
    Location:
    SF, CA
    Photoshop's default resolution (or PPI) is 72. Change that to 144 or something higher and work with the same size.
     
  4. Superevie

    Superevie Latina Goddess™

    Joined:
    Aug 22, 2003
    Messages:
    1,962
    Location:
    Wishing I Was Here
    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. :)
     
  5. superslug

    superslug Still hatin' on Khan Moderator Hall of Fame Staff

    Joined:
    Jan 5, 2003
    Messages:
    11,371
    Location:
    The Farm
    @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?! :eek: Of this I was not aware, thank you!
     
  6. Jeratain

    Jeratain On the can.

    Joined:
    Nov 7, 2002
    Messages:
    2,694
    Location:
    SF, CA
    Careful though. The higher the resolution, the larger the file size, and then the longer the access time.
     
  7. superslug

    superslug Still hatin' on Khan Moderator Hall of Fame Staff

    Joined:
    Jan 5, 2003
    Messages:
    11,371
    Location:
    The Farm
    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.
     
  8. Hurricane

    Hurricane Sleeping Dragon

    Joined:
    Dec 6, 2001
    Messages:
    1,197
    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.
     
  9. superslug

    superslug Still hatin' on Khan Moderator Hall of Fame Staff

    Joined:
    Jan 5, 2003
    Messages:
    11,371
    Location:
    The Farm
    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...
     
  10. Crazy Eddie

    Crazy Eddie Genial drunkard

    Joined:
    Sep 22, 2001
    Messages:
    880
    DPI only affects the printing size surely? 100x40 px will still display at 100x40 px no matter what the resolution is set at.
     
  11. Lucky

    Lucky Game- and Quizmaster

    Joined:
    Nov 6, 2001
    Messages:
    2,304
    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).
    :D
     
  12. superslug

    superslug Still hatin' on Khan Moderator Hall of Fame Staff

    Joined:
    Jan 5, 2003
    Messages:
    11,371
    Location:
    The Farm
    There really is no need to go to a higher resolution then, since this is purely for the web.
     
  13. Jeratain

    Jeratain On the can.

    Joined:
    Nov 7, 2002
    Messages:
    2,694
    Location:
    SF, CA
    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.
     
  14. superslug

    superslug Still hatin' on Khan Moderator Hall of Fame Staff

    Joined:
    Jan 5, 2003
    Messages:
    11,371
    Location:
    The Farm
    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...
     
  15. Jeratain

    Jeratain On the can.

    Joined:
    Nov 7, 2002
    Messages:
    2,694
    Location:
    SF, CA
    No. You're good with 72 dpi.
     
  16. Lucky

    Lucky Game- and Quizmaster

    Joined:
    Nov 6, 2001
    Messages:
    2,304
    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.
    :D
     

Share This Page