Crisp Text in Adobe Animate for HTML5

In this video were going to talk about how to get really crisp type in adobe animate. So when you're dealing with large fonts this doesn’t really apply, its when you get down to the smaller body copy or t’s and c’s that you need to add to an ad.

Now lets say I grab my type tool, I'm going to type in, lets go t&c’s so I'm going to make it very small. I'm going to get down to maybe, well do a couple of tests, well do a 12pt and I'm going to leave you like that and I'm going to make a duplicate of it, so just copy and paste this one. now what were going to find out is this one here is positioned, you can see its x and y position on the document. So its across x amount, so 379.95 and its down this much. Now the trouble with that if you have these crazy numbers, ill add a few extra just to make it even. So what ends up happening, is that, because they don’t sit on a pixel they're half way through, these are pixel measurements. They tend to get a bit blurry. So these ones here I'm going to make sure you are at 00 and same with this one here 00. It’s not going to be a huge difference but it might be fact where the clients coming back and say hey, its not looking nice. I'm going to make two sizes of these, just to compare the two. So even smaller, this is getting allegible now but I'm just going to make sure you're on the pixel and you are not.

And the thing to know is you cant test in adobe animate because adobe animate is going to show you its actually quite legible here, I know its quite small but its quite good quality in here. You can read the word t&c’s, what you want to do is be testing in the browser, so remember I'm going to hit command return. Preview in my browser, bring it down from here. And what well do is, can you see it’s a little bit hard to see, but you can see this one here, they're exactly the same size but this one here is slightly more legible. Can you see the top of the T bar, is a lot more legible than that one. They're both too small to use, but when you get down to these smaller file sizes or font sizes. You make sure they're on whole pixels, you will get crisper nicer text. And that’s true for any web design so if you're doing stuff from Photoshop for web or illustrator designing for web, make sure they're on whole pixels and you'll get a crisper edge coming out here.

Alright that’s it for making crisp text in adobe animate, not flash.