[Solved] Pixel perfection icon font, is not 100% pixel perfect

Hi! I’m making a “pixel perfect” icon font. This example has a screen size of 16 pixels (and within that 16 pixels a margin of 1 px on all sides, so the icon is 14x14 pixels). I have read the “Pixel perfection” tutorial.

Left you see the outline put in Photoshop at 14x14 pixels. At the right you see the icon font, font size 16 pixels so the icon size would be 14x14 pixels.
There’s a difference between left and right, i can’t get the font pixel perfect in Photoshop.

  • Export from Glyphsapp with auto hint turned off.
  • The font is set to ‘sharp’ in Photoshop, the other anti-aliasing methods are way worse.
  • The pixel preview in Glyphs app looks very different.

What is the best way to assess it on the screen? Thanks!

This is in Glyphsapp:
960 units per Em. Grid Spacing 60, subdivision 60, including pixel preview.

This is in Photoshop: font size 16px, anti-alias method ‘sharp’.
It’s also not 100% pixel perfect…

Can you send me the .glyphs and the Photoshop file?

The text frame is not aligned with the pixel grid. And it is difficult to move it to it.

I added two guides and made sure that they are on the grid exactly. Then I placed a new text frame and copied the content over. Then switch the text rendering to “Sharper”.

I did not realize the text frame wasn’t exactly on pixel. I changed it, and changed the anti-alias mode to ‘crisp’ and now it’s perfect. Thanks!

2 Likes