: High Resolution Text Logo 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

@Si6392903

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
www.otake.com.mx/Foros/Aserrado-01.jpg
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.

Vote Up Vote Down

@Angela777

This is because Retina display requires more pixels, as explained in details in this post: 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.

Vote Up Vote Down