Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

A Brief Glance At Pixel Hinting

Wednesday, July 9th, 2014 by Servage

Pixel Hinting TechniquesWe all have appreciation for respectability on the web and decent layouts of web content. This is why seasoned web designers favor pixel-perfect icons and typography online. The desired result of design pros is always to display expert quality while providing brilliantly performing sites that stand out in the crowded, world wide web.

Many tech-savvy clients also insist on well polished work in their projects. Despite great effort, many web designers often end up with a product that doesn’t meet expectations and at times, causes disputes between client and developers.

From my extensive experiences with site design, I can recommend some useful ways for obtaining pixel-perfect results; pixel hinting is one of them. Vector based approaches that make use of SVG have brought recent advancements to the table and paved the way for enhanced design quality. So, let’s first review vector designing as a technique to help us understand pixel hinting.

Vector Designing as a Technique

Vector graphics are the result of mathematical expressions for a shape, in which a computer calculates the curved path and how it should be rendered, by confining the math within the pixels of the device’s screen. Put more simply, a computer decides which pixels should be displayed as a whole and which can be less than whole.

On the other hand, raster shapes are basically a memory of pixels on the computer screen, where no mathematical formulas are at work. Instead, this bitmap approach simply translates graphics to the screen’s display of pixels. This fundamental difference between vector and raster shapes makes for a significant change in rendering. Vector shapes simply multiply the formula, not the pixels’ memories. Not only do vectors render quickly, they also automatically apply anti-aliasing on curved shapes.

If we carefully observe how vector shapes are rendered on a highly zoomed screen, we would notice the outline on the shapes is smooth for each curve. Thus, if we were to draw a grid behind these rendered shapes, we would find that as the pixels are snapped to our grid, they can appear even smoother as lines and curves. And so we have to apply these same principles on our raster shapes to make them appear polished, akin to their vector counterparts.

Secrets and Methods of Pixel Hinting

Now, we will remove the jagged pixilation in vector curved shapes, where they are more apparent. To do this, we must move the imaginary vectors’ outlines and anchor points, so they rest on pixel borders. This will make straight lines more perfect without the disturbing half pixels of the curves. This is called pixel hinting.

To perform pixel hinting in Photoshop, you will need to adjust some settings such as:

  • Turn on pixel grid in the View menu, with “Extras” checked
  • Be sure you have a gridline on each 10 pixels with 10 sub-divisions or an otherwise equally similiar ratio
  • Don’t forget to disable snapping. This way anchor points won’t snap at 1 px increments and and we can adjust anchor points within pixels or pixel boundaries.
  • You have to manually nudge each anchor point in order to align them more closely with the pixel grid layout. You need to realize if you can’t put a shape precisely on the grid lines, they should be placed close enough, so the shape looks fine when zoomed out. In short, maintain consistency.
  • For typography, take an extra step and copy the original layer on to a new layer and work only on the new layer, by freezing them so you won’t lose the original copy in case of accidents or mismatches in your work.

Pixel hinting adjustments are often done on icons and logos, which are generally repeated on each UI, sometimes though, also more frequently used buttons need to have this exceptional treatment and design technique applied.

References & More Reading

The designer’s guide to pixel hinting
A Guide to Pixel Hinting

A Brief Glance At Pixel Hinting, 5.0 out of 5 based on 3 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.