How to achieve crisp text for web use?

Discussion in 'Design and Graphics' started by HarryPot, Apr 1, 2013.

  1. HarryPot macrumors 6502a

    Sep 5, 2009
    I'm having trouble getting images with text designed in Photoshop to look crisp in a website. Text always come out looking blurry.

    In searching Google it seems Photoshop is the worst software for designing for the web. Yet some software must be good.

    When visiting I see text in the form of a photo and the text looks very crisp and clear.

    I would appreciate any help.:)
  2. Renzatic, Apr 1, 2013
    Last edited: Apr 1, 2013

    Renzatic Suspended


    Aug 3, 2011
    Gramps, what the hell am I paying you for?
    Most text is rendered by your browser. You shouldn't have any trouble at all getting crisp text, unless saving your pages out as collection of bitmaps with the links buried behind them.

    Edit: Though clicking on the link to Apple above, I see that the iPhone 5 header is a bitmap. So I guess the question is, how are you producing your text? Are you using the text tool, or are you cutting and pasting letters off a bitmap template?

    It also depends on the size of the image your using. If it's a large image and you're scaling it down, or vice versa, that could cause some blurriness.
  3. HarryPot thread starter macrumors 6502a

    Sep 5, 2009
    Thanks for the answer.

    What exactly is a bitmap?

    I'm using Photoshop. Basically I need to create a banner to use in a website. It is a 980x300px in size, with one image at the side and some text at the right. I could do this with CSS and achieve much crisper text, but since I'm using a JavaScript for an animation, it would require much more time to do it than just using Photoshop to create the whole image with text.

    I have been able to get better results by starting with a much bigger document size (2940x900px) and then flattening the image and reducing it's size to 980x300px. Still, I haven't been able to achieve something like the one of Apple.
  4. blanka macrumors 68000

    Jul 30, 2012
    The secret to get vector graphics (logo's) and text perfect is to render them first at say 4x the amount of pixels. Then downscale in 2 steps with BILINEAR downsampling. DONT USE the default bicubic, it is horrible for vector/text.
    Save as PNG or GIF, never JPEG (unless you have the text on top of photo's).
  5. HarryPot thread starter macrumors 6502a

    Sep 5, 2009
    When you say downscale you mean just changing the Image Size?
  6. Renzatic Suspended


    Aug 3, 2011
    Gramps, what the hell am I paying you for?
    Basically a fancy word for an image. They're resolution dependent. You can't scale them up or down without losing some definition and/or detail in the process.

    This is opposed to a vector, which is what the text tool produces. They're resolution independent, since they're not based around individual pixels, but rather coordinates that are being drawn by your CPU. You can take an itty bitty 2px "A" from the text tool and use the transform tool to scale it up to 300px, and still have a perfectly crisp "A".

    That's why I asked if you're using a template for your letters. If your taking a bunch of bitmap letters, and scaling them around at random, you're losing definition along the edges, which could make them look blurry on the webpage. This is especially true if you're scaling up.

    As for your banner, it never hurts to design it a little larger than what you need. Yeah, this sounds like it flies in the face of what I just said above, but browsers can scale images down nice and smoothly. Like look at the MacRumors logo above.

    ...well hell. It's April Fools, and they've messed it up. Figures. But the text still looks alright, so I can still use it as an example.

    If you drag the image off onto your desktop, you'll see that the image is actually a fair bit larger than what it is on the webpage. Probably about 50% larger at a guess. That's because bitmaps scale down smoothly so long as they're aspect correct.

    So what I'd suggest you do is create your image at 1960x600 (pretty much like what you did, but smaller), but don't reduce the size of your image when you're done. Set the scale on your webpage instead. That should keep your text looking nice and crisp (this will also make it look nice on retina displays).

    ....and of course experiment. Like the Apple guys used a 1:1 image for their website. That could be due to the type of text antialiasing they're using. Since I'm on a Windows PC, I couldn't do a perfect match with the font (Helvetica vs. SegoeUI semilight), but this shot should give you an idea of what I mean...


    You can control text antialiasing from the little bar at the top, next to the little aa icon. I'd suggest playing around with that, too.
  7. HarryPot thread starter macrumors 6502a

    Sep 5, 2009
    Thanks a lot! I'm going to try the recommendations you gave.

  8. blanka macrumors 68000

    Jul 30, 2012
    But that scales bicubic as well, so not the best possible sharpness. Making a perfect 1:1 image with bilinear downsample is still the best for those splitting hairs. And of course, a double size one that is loaded with CSS media queries if the pixel-density is more than 1.25 or so.


    Still downsample manual 2 fold at least after converting to pixels. None of the options is perfect.
  9. smithydan macrumors member

    Mar 11, 2013
    Are you exporting the jpegs at maximum quality?

    This increases quality but also load time for an image, depending on what it is exactly.

    Do you have a before and after, whether screen shot or image.
  10. aarond12 macrumors 65816


    May 20, 2002
    Dallas, TX USA
    If you want sharp text, NEVER use JPEG. Use PNG or, if coding for older versions of IE, GIF appropriately color-reduced.

    Save some graphics from Apple's site and compare them against yours. Zoom in. See if you can tell the differences. If you're using JPEG (even at the highest compression setting), you WILL have artifacts around text and high-contrast parts of the image.
  11. smithydan macrumors member

    Mar 11, 2013
    SVG is another alternative. Not very popular but always gives clean graphics zoomed in and out and its size it constant.

    Will need illustrator to create text and export.
  12. jtara macrumors 65816

    Mar 23, 2009
    Putting text in a bitmap banner is a terrible idea. It will bloat the size of the bitmap and give you nasty artifacts on JPEG unless you use a very high quality setting. And the text in the bitmap has reduced serchability. (Though Google and others may now be able to read text embedded in graphics in some cases.)

    Why not serve text as text?
  13. chirpie, Apr 9, 2013
    Last edited: Apr 9, 2013

    chirpie macrumors 6502a


    Jul 23, 2010
    Sometimes you want a special font and you want it to work on older browsers. (I personally have given them up in favor of all things Google fonts. It's just too freeing not to. ^_^)

    Besides, so long as it's just text, you can save it as a .png file and it'll look great AND the file size will almost always be smaller than a jpg. This is a circumstance where you shouldn't use anything but a .png

    I agree though, the searchability goes down, but so long as you fill out the alt tag properly, you won't be too bad off.

    PS - OP - Someone else mentioned it, but don't forget to check your anti-aliasing methods for live type in Photoshop as well. Unless your fonts are REALLY small, you should always have it turned on. See attachment for the location if you aren't familiar with it.

    Attached Files:

  14. smithydan, Apr 9, 2013
    Last edited: Apr 10, 2013

    smithydan macrumors member

    Mar 11, 2013
    Totally agreeing with chirpie and in addition text are very fast loading and crisp.

    If we keep accommodating them(old browsers), users never will come forward. If saves you time not worrying about backwards compatibility.
  15. HarryPot thread starter macrumors 6502a

    Sep 5, 2009
    Wow, thanks a lot for all the replies.:)

    I've been able to improve the sharpness of the text quite a lot by using PNG and making a slightly larger image, then flattening the image and then downsampling it with Photoshop to the desired size.

    As for why use text in a banner and not do it with HTML and CSS. It is because I am using a javascript slider (NivoSlider), and I haven't been able to achieve a correctly organised banner with just using CSS.

Share This Page