Illustrator Trick: How to avoid blurred Pixel Fonts & Shapes
Have you ever used a pixel font? If so, have you experienced the text looking blurred, unsettled, not sharp? This Illustrator tutorial will help you avoid this hurdle!
Pixel fonts are quite popular these days. It all started in Flash: these developers have been using pixel fonts for some time now. The trend soon swopped over to static design, and now you can find many websites using pixel fonts in their design.
But that’s not all: pixel fonts quickly conquered print design as well. It’s not hard to follow: they are stylish, and they provide a certain modern, sharp and ‘technozoic’ look. But most of all they just look good.
Well almost: here’s the catch! Unlike usual typefaces, you have to know how to use a pixel font correctly. It’s simple: a pixel font is made up uf single pixels. That means that a stroke is only 1 px. There are no corner fillers or shades to make it nice and round. After all, they are called pixel fonts, right?
This fact makes them not so easy to handle. The same thing also applies to 1-pixel strokes. If you don’t know the matter, you will end up getting blurred text and borders. That can make your whole design look unprofessional and bad.
So how can we avoid this? Simple:
The most important rule when using pixel fonts and 1-pixel strokes is this.
Positioning is key!
Sounds easy, right? Well, almost. Maybe you’ve already heard that pixel fonts have to be positioned at full X and Y values, but at what reference point? And does this also apply for borders?
Let’s assume we’re working in Adobe Illustrator, but this also applies for other vector programs such as InkScape. We have three cases: Pixel fonts, rectangles with 1-pixel strokes, and 1-pixel lines. There are a few things you need to know about all of these, for they aren’t to be treated the same.
1. Pixel Fonts
These are the rules for using pixel fonts:
- Pixel fonts are to be positioned at whole X and Y values. E.g. 0/0, 15/425, 2998/19, not 0.443/0.928 or 256.1/0.49.
- The reference point is always the upper left corner. Not the middle, not the lower right corner.
- Usually, the size is to be set in increments of 8. That means you must use a pixel font at 8 px, or at 16, or at 24, but not at 7 px, 9 or 12. (Sometimes, this differs. There are pixel fonts using 10px or even 12px as a standard size, which will be noted in the font’s readme file)
- The font size shows you the font leading (the line spacing). If the font’s standard size is 8px, you’ll usually use 16px for line spacing. You can also use 8, or 24, or 32.
Let’s take a look at an example. We used the typeface FFF Star Condensed.
To the left, the font is positioned at crooked values, and the text appears blurred. On the right side, the text is positioned at whole values (in this case: 0/0). The font size is set to 8, the leading to 16.
Note: Don’t rely on how it looks in Illustrator’s standard view. In order to see the final version, you can switch to Pixel Preview (View > Pixel Preview).
2. Elements with a 1-Pixel Stroke
These are almost similar to pixel fonts, but with a few more things to mind:
- Pay attention to the stroke alignment. It’s always best to align the stroke to the element’s center.
- Position the element at whole values.
- Use the center reference point.
- Use whole dimension values (width and height).
Let’s look at the example:
There you go. To the left, the strokes are blurred, but as soon as we took care of the positioning, we’ve got nice and sharp strokes!
3. Pixel Lines
You think it’s the same? Use whole values and you got it? Wrong!
- Always position lines at half X and Y values. Horizontal lines at .5 Y values, vertical lines at .5 X values.
Let’s look at the example first before we explain why that is:
So when we place the lines at half values (0.5, 123.5, 1028.5, etc.), they are sharp. Why is that?
Because strokes are always centered on the path of a line (not for shapes, where you can choose the stroke alignment), if you place it at a whole value, two rows of screen pixels (the ones on your monitor) have to display one single pixel. That makes it blurry. If we were to take a picture of your monitor and zoom in really really deep, it would look something like this:
The Path is the line itself. It has no width at all. That’s why Adobe calls it Path, and we designers follow. As soon as we apply a stroke to the path, we give it a width (in this case: 1 pixel). Illustrator puts the path in the middle of the stroke.
Now, if we were to position the path on a whole value (red), the stroke would go half into the left column if pixels on your screen and half into the right column. So what we do is place the path at .5 pixels (green). That way, the 1-pixel stroke is only displayed by a single column of pixels - the way it should be.
This is the explanation for pixel fonts and shapes with 1-pixel borders as well. It’s never too bad to know why things are the way they are, right?