I am trying to create a plain text logo using photoshop/illustrator but am having great trouble making it so the text appears high resolution.

I want to be able to create a logo with the same resolution as the welcome text in the page below http://pandsmarine.com

As you can see my best attempts is nowhere near that quality..


Could I please get some advice as to how to go about doing this along with recommendations on file format, dimensions, resolution etc.

Many Thanks.

  • You obviously have the font as a webfont, so why not just do the logo in the font? There's no need for any images, and since it's resolution independent it will always be crisp
    – PieBie
    May 15, 2016 at 13:46

2 Answers 2


Some thoughts.

That is not necesarly a resolution issue, but how thin lines are processed.

1) An aliased image consist in some transition pixels to simulate smoothness

If you have a thin line, lets say below of a pixel in size, you get just the aliased part: A gray line. In thin lines this diference is very notorious.

One posible solution is making your text at much greater scale than needed, for example instead of making it at 300px wide, do it at 3 times larger. 900px wide.

After that you can resample the image at the desired resolution. This method makes a better aliased result, because process the image a bit better.

The other advantage is that you have now a Retina ready image. Normally you need a 2 times or 3 times larger image. (I leave you this retina image as a homework)

2) Specially in fonts, a solution is a subpixel: Why are white digital fonts composed of more colors than white?

This is made in automatic in the browser with a vector based image, specially with fonts.

So the second solution is that your logo is made in vectors, and let the browser make the necesary calculations to smooth the logo.

Use SVG file format for this.

3) In the specific case of your "logo", that it consist only in plain webfont letters, just make some CSS properties to add color and use the webfont as it is, as PieBie comented.


This is because Retina display requires more pixels, as explained in details in this post: http://www.sitepoint.com/css-techniques-for-retina-displays/

In order to fix that, you can: 1) As PieBie suggested, use the font directly as icon; 2) Use alternative high resolution picture with either media query or JavaScript. You can find example code in the 1st and 3rd solution in the post I provided.

  • Where any retina display was mentioned?
    – Rafael
    May 15, 2016 at 17:31
  • What in the earth is a high resolution pixel?
    – Rafael
    May 15, 2016 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.