Mar 27 2013

Pixel Perfection

A lot of designers throw around the term pixel perfection. But what does it really mean? Googling it really didn’t help. With this article, I am going to not only attempt to define it but also give clear examples on how to achieve it. I will also share design files from which you can deconstruct and analyze.

Download .sketch files

You’ll need Sketch to open these files:





“Sharp” is defined as razor-edged and honed. It’s the opposite of blurry. In other words, outlines are well-defined, texts are more readable, shapes are easily distinguishable. But beware, just like in photography, there can be too much sharpness, and that gives designs an unnatural, heavy look. You can strike the perfect balance of sharpness by not stretching elements from its original size and by comparing to reality. If you look outside the screen and really pay attention to the outline of things, you’ll notice a fine crispness and natural polish. That’s your balance. Good sharpness is unmistakable. An outline is an outline, it doesn’t mistake itself as the background or a shadow.


By looking closely at this design, you’ll notice a light shadow and a white shadow. They’re clearly defined – not too dark and not too light because that how I intended them to be. That’s the level of importance that I gave them. Also, they’re not mistaken as anything else. Had I made the light shadow whiter, it could be seen a double, blurry white shadow and that would destroy the purpose of that sharpness I was aiming for.

Perfect Position & Dimension

Understanding perfection is not enough. You need to apply the right techniques within the application context. In Photoshop and Sketch, that means resizing and positioning your shapes using round numbers. Half pixels are detrimental to pixel perfection. When you place a shape composed of many sub-shapes, you will spot uneven pixels. It’s important to quickly scan with your eyes the sharpness of the outlines and make proper adjustments.


In Photoshop, that means pixel snapping vector points manually by selecting them, then Command + Shift dragging them. See how the Facebook logo is a lot sharper on the right?


In Sketch, it’s even more precise because you can simply select each sub-shape and edit round the numbers (x, y, width and height). The toggle circle is much sharper on the right.


Pixel perfection is an obsession and a standard to which serious designers live by. It’s a learned skill that needs nurturing in a fast-paced, technology-driven industry. It is even more unobvious now that pixels are getting denser every day. Ten years ago, when 800×600 displays and pixel fonts were the standard, it was a lot clearer to spot the imperfections. Today, you almost have to use a magnifier in order to distinguish the pixels on a screen. That’s why it’s more necessary than ever to rely on tools like Sketch for pixel snapping and for rounding the numbers to be absolutely certain that your design is pixel perfect.

Go ahead and download my .sketch files and spot the half pixels. You may find some and if you do, pat yourself on the back because you now have pixel perfection in your blood.

0 tweets

67 responses to “Pixel Perfection”

  1. Pixel Perfection: A lot of designers throw around the term pixel perfection. But what does it…

  2. @trey_mckay says:

    Another well-written and insightful post by @MengTo. (His blog looks great on mobile as well ++)

  3. @LukyVJ says:

    Pixel Perfection by @MengTo:

  4. @gielcobben says:

    Pixel Perfection by @MengTo:

  5. @kuswanto says:

    What’s Pixel Perfection?

  6. Pixel Perfection » #graphic #ui #ux #design

  7. @aurielz says:

    Pixel Perfection by @MengTo:

  8. Chase Giunta says:

    I could be wrong but, I think Meng To likes Sketch… ;P

  9. Pixel Perfection, the truth. by @MengTo:

  10. I love reading posts like this: Pixel Perfection by @MengTo #design #ui #ux #psd

  11. @tikaszvince says:

    Pixel Perfection | Design Blog #weblabor

  12. moojoo says:

    Great post, Meng. As a new designer, it is very inspiring to see somebody strive towards perfection.

  13. @pixelradius says:

    Pixel Perfection by @MengTo:

  14. @cssradar says: | ピクセルパーフェクトなデザインをするということ。1pxに神が宿るのであれば、サブピクセルの行方についても考える。Meng ToではSketch推しなので、Sketchのサンプルも提供。

  15. Nice little roundup of Pixel Perfection by @MengTo:

  16. @Madedigital says:

    Anyone learning to use Sketch?. Heres some Sketch files to download. Here and here

  17. Chris says:

    i love these articles and wish more than anything Sketch would come out for Windows so I can have a play with it

  18. Have I mentioned how awesome iOS dev weekly is? Yes? Well, I’m doing it again: via

  19. @novikoff says:

    Pixel Perfection by @MengTo:

  20. @littlehj says:

    Pixel Perfection by @MengTo:

  21. @kwiboo says:

    Think you’re pixel perfect? are you sure? Our creative director @duncanlaud1 was discussing this earlier this week –

  22. @gnatok says:

    Pixel Perfection by @MengTo:

  23. Pixel Perfection (via Instapaper)

  24. […] my previous blog posts, I have been a strong advocate for rounding fractional numbers for Pixel Perfection results. Well, Dominik showed me this neat feature in Sketch that specifically helps you round the […]

  25. @pitchmak says:

    What is Pixel Perfection? by @MengTo:

  26. @thedaneray says:

    Pixel Perfection by @MengTo:

  27. @thedaneray says:

    “Pixel perfection is an obsession and a standard to which serious designers live by” #truth

  28. @logotweek says:

    Pixel Perfection by @MengTo:

  29. Caleb says:

    Keep up the great articles–especially write ups about Sketch–and kudos for pushing pixel perfection :)

  30. […] Pixel Perfection by Meng To […]

  31. […] Edge”, I created a shortcut in Actions called “Refine Tool” so now I can make Pixel Perfection with just a […]

  32. […] Pixel Perfection by Meng To […]

  33. […] again: Take a look at Meng To’s article to learn more about pixel […]

  34. […] again: Take a look at Meng To’s article to learn more about pixel […]

  35. Rachel says:

    could you tell us where the half pixels are, so if we don’t spot them we can compare? I haven’t looked much yet but the first file I’ve looked at looks great.

  36. Kien Tran says:

    Could you make an article about differences between Sketch and PTS, which one is better?

  37. designer says:

    Lifestyle products without compromising on functionality, quality & the design aspects.

    They have a long lifespan and often come with adjustable options for dimming.
    Place one bed behind the other against the wall, and create a storage partition in between.

  38. We are a bunch of volunteers and starting a new
    scheme in our community. Your website offered us with
    useful info to work on. You have done an impressive job and our entire neighborhood will be thankful
    to you.

  39. Angela says:

    ..Hard coding pixel dimensions is something that I’ve been doing in Illustrator for years, and with much more precision. Someone please tell my why Sketch is superior all of a sudden?

  40. Chris says:

    Why doesnt sketch pixel snap by default. That’s what they advertise on their home screen. I keep finding crap in my files that are half pixels.

  41. Thanks to my father who told me concerning this
    web site, this webpage is in fact awesome.

  42. Excellent posts. today i’m able to make smarter wire frame. Thank you for giving this excellent posting.

  43. Elise says:

    I like what you guys aree up too. This sort of clever work and reporting!
    Keep up the excellent works guys I’ve added youu guys to blogroll.

  44. […] Meer over pixel perfectie vind in dit artikel. […]

  45. düşük hapı sipariş

  46. aşk fm dinleee

  47. düşük hapı sipariş sitesi

  48. Good post about how bring pixel perfection to designs.

    Nice post.


  49. Referat says:

    Why doesnt sketch pixel snap by default. That’s what they advertise on their home screen. I keep finding crap in my files that are half pixels.

  50. John says:

    Thanks for the Informative blog.

Leave a Reply