?>
March 10, 2008

Illustrator Trick: How to avoid blurred Pixel Fonts & Shapes

New to Vibr8 Bros.? Don't panic. Get our RSS Feed.

Illustrator Trick: How to avoid blurred Pixel Fonts & ShapesHave 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.

Wrong use of Pixel FontsWell 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.
  • Reference point for pixel fonts in Adobe IllustratorThe 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)
  • Illustrator leading, line spacing buttonThe 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.

Pixel font FFF Star Condensed positioned wrong and correctly

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:

  • Adobe Illustrator: align the stroke (tutorial)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:

Adobe Illustrator: how to avoid blurred pixel strokes

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:

Position lines correctly in Adobe Illustrator

So when we place the lines at half values (0.5, 123.5, 1028.5, etc.), they are sharp. Why is that?

Pixels explained

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:

How the monitor displays pixelsThe 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?

You want more? You want more. Subscribe!


16 Comments here!

1. The Vibr8 Bros. on Pixel Fonts & Shapes March 11, 2008 at 11:29

[...] their newest article, How to avoid blurred Pixel Fonts & Shapes, you will find what you need to know about the above, with illustrated examples. And if [...]

2. Mark March 11, 2008 at 21:43

Excellent info - this will come in very handy. Thanks for taking the time to put this together! Subscribing to your feed now :)

3. Christian Belanger April 23, 2008 at 0:21

Hello!

This is really nice. Thank you.

However, pixel fonts are blurry in all of the CS versions of Illustrator, even if placed at full x/y values. Seems like the only Illustrator versions that shows pixel fonts the crispy way is Illustrator 10 and below.

I wrote to Adobe about it last year (2007, or even 2006), and I still didn’t get an answer (surprise!).

Does anyone know the trick for crispy looking pixel fonts in any of the CS versions? I’d like to design my Websites in CS! I’m done with 10!

Thanks,

Chris.

4. Yuri Teixeira April 25, 2008 at 23:30

Same problem here… Sometimes, 1-pixel shape appears ok on screen, but in most part of times, the blur effect occurs… This is the only missing issue to be solved to make me totally convinced to migrate from fireworks to illustrator.

If any of you have a suggestion, please, write here…

Thanks!

5. The Bros. April 29, 2008 at 21:22

Christian, Yuri,

Thanks for your feedback. We didn’t have this issue in the past, so maybe we were just lucky ;)

Anyway, we did some testing, and there really is an option to take care of this problem.

It’s the Anti-Alias Setting that you have to take care of, both for pixel fonts and elements with a 1-px stroke. Before saving it for web, you need to rasterize the objects you want to appear sharp. Illustrator has two options for this:

1) Go to Effect > Rasterize. For Anti-aliasing, choose “None”.
2) You can find the same option in Object > Rasterize, only then you can’t redo it. So it’s better to use the Effect, although it creates a larger file.

This should really eliminate all dependance on luck :)
Does this work out for you?

6. Yuri Teixeira April 29, 2008 at 21:39

Thank you very much, but unfortunelly, now i’m convinced that illustrator was not made for my needs. So, i’m back to my fireworks for now… Maybe in CS4 (or something like this), when simple operations like work with 1-pixel shapes maybe will be transparent for me, end-user, i try it again. The features and the cool interface are very atractive (the same great panel interface is not available for Fireworks), but Fireworks is more productive to me now.

But than you a lot about your explanation!

Bye!

8. Christian Belanger April 29, 2008 at 22:10

Thanks!

9. Illustrator-pixelig - PSD-Tutorials.de - Forum May 21, 2008 at 22:37

[...] Illustrator-pixelig vibr8bros | Illustrator Trick: How to avoid blurred Pixel Fonts & Shapes __________________ Trash all IE [...]

10. Chris Strom | Blog December 21, 2008 at 7:21

[...] You can read the full tutorial on Vibr8bros.com here. [...]

11. Haruspex February 06, 2009 at 19:47

To be honest, it seems working with pixel-precise graphics in Illustrator is not the way to go. The reason is simpe: pixel-precise graphics are within the raster realm, not vector. You should do you vector work in Illustrator, but when it comes time to do raster work, you should be in Photoshop. Photoshop makes handling 1-pixel strokes and lines as well as pixel fonts a snap. Remember, it’s all about the right tool for the job. No multi-tool ever got the job done best, so if you want the best, use the proper tool.

12. Christian Belanger February 06, 2009 at 23:22

Well… Photoshop isn’t the best tool to design Flash Websites because 1) Flash is vector based, and 2) the design process would be very slow and unefficient because Photoshop is made to alter PHOTOS.

Flash and Illustrator tools work in similar ways, therefore, those two applications are a perfect match.

Why not design directly is Flash? Simply because 1) Illustrator is much more designer friendly, and 2) a lot of designers have been designing with Illustrator for decades, so therefore are comfortable with it.

Adobe changed the Illustrator engine since CS, wich is a shame, because Illustrator was working even better before (10 and -).

Personally, I’m still working with Illustrator 10 when I design Flash Websites, because rasterizing type everytime I create a new text bloc seems a waste of time.

13. tayfun hakyemez November 14, 2009 at 1:21

swett tahnks

14. Kevin M. Scarbrough January 09, 2010 at 8:17

Up one late night I decided to figure this problem out once in for all (it has bugged me for ages). Thank you for posting it, my issues have been resolved!

15. sreilly May 07, 2010 at 18:39

I couldn’t get this to work (alignment or effect suggestions) for type, but I did find a solution. Exporting the illustrator file to photoshop did the trick.

16. Perfect 1-Pixel Lines in Adobe Illustrator | News | Chris Strom, LLC May 28, 2010 at 23:22

[...] can read the full tutorial on Vibr8bros.com here. Comments [...]

We'd like to know what you'd like to say.

You might wanna use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>