Editing Fix Blurry Pixel Art Style Fonts in Unity

Ryan Nielson: https://nielson.dev/2016/09/fix-blurry-pixel-art-style-fonts-in-unity

The Unity UI system is great, but by default it doesn’t tend to work well when using fonts that require very sharp edges like those seen in pixel art style games. Though the fonts look alright, upon closer inspection the edges of the characters are slightly blurry and sometimes the characters look off. In the image below, if you look closely, you can see some blurriness around the character edges.
[[File:Blurry-text.png|center|frameless|562x562px]]


Switching the font’s import setting <code>Rendering Mode</code> to <code>Hinted Raster</code> can help a bit with the blurriness, but it doesn’t seem to reproduce the characters properly. This leads to letters that look slightly different than they do in the original font.

Luckily there’s a way to fix this issue in the Unity editor that doesn’t require too much additional work. Begin by bringing a font into your project like you normally would. For this example I’m using a font called Press Start. Next click on your font in the project window to open the inspector, change the <code>Character</code> dropdown to <code>Unicode</code>, and click <code>Apply</code>. This process prepares Unity for the next step.
[[File:Font-import-settings.png|center|frameless|271x271px]]


Click on the cog in the top right of the font inspector, and select <code>Create Editable Copy</code>. In your project window you should now see a new material, texture, and font asset with similar names to your existing font. By default when Unity imports a font it doesn’t give you the ability to modify the related material and texture. <code>Create Editable Copy</code> gives you these assets to modify to your heart’s content.
[[File:Created-font-files.png|center|frameless|232x232px]]


Now click on the newly created texture, which should open the texture inspector. Switch <code>Texture Type</code> to advanced and change the <code>Filter Mode</code> from <code>Bilinear</code> to <code>Point</code>. This should remove the blurriness from your font’s texture. The settings I’ve used are in the image below. Sometimes it seems as though selecting the incorrect settings can cause issues when displaying your font, so if you are having issues just start the process over and try to match the settings below.
[[File:Texture-import-settings.png|center|frameless|461x461px]]


Now click on your UI Text object in the hierarchy, and replace the existing font with the new font asset (PrStart_copy in my case). You should immediately see sharper text in your game view. The image below shows the old font on the top, and the new font on the bottom. Hopefully it’s clear enough to illustrate the difference the above steps make.
[[File:Side-by-side-fonts.png|center|frameless|484x484px]]
<br />
Latest revision		Your text
Line 1:		Line 1:
−	~~The article was originally written by~~ Ryan Nielson~~, reproduced here by kind permission. Here's the original blog post~~: https://nielson.dev/2016/09/fix-blurry-pixel-art-style-fonts-in-unity	+	Ryan Nielson: https://nielson.dev/2016/09/fix-blurry-pixel-art-style-fonts-in-unity

	The Unity UI system is great, but by default it doesn’t tend to work well when using fonts that require very sharp edges like those seen in pixel art style games. Though the fonts look alright, upon closer inspection the edges of the characters are slightly blurry and sometimes the characters look off. In the image below, if you look closely, you can see some blurriness around the character edges.		The Unity UI system is great, but by default it doesn’t tend to work well when using fonts that require very sharp edges like those seen in pixel art style games. Though the fonts look alright, upon closer inspection the edges of the characters are slightly blurry and sometimes the characters look off. In the image below, if you look closely, you can see some blurriness around the character edges.