Blurry Text - HELP

[HaylesB]

Hi can someone help please 😞 I am trying to upload the first image to web, however when it goes onto web the coloured text comes out blurry and really rubbish quality. I have attached an example so you can see what i mean of how it comes out when uploaded to web.

[Monika Gause]

You export is to JPG or PNG, right? This is a raster based format, so blurriness has to be expected. On top of that, if you upload to Social Media: they apply their own compression, which makes the whole thing worse.

[HaylesB]

Yeah i always export to JPEG or PNG, i've even tried exporting for web to see if that worked but it didnt make a difference once uploaded it goes blurry. Is there anything i can do to atleast make it look not as blurry?

[Monika Gause]

You cannot change the compression algorithms of Facebook et al.

Only thing you can do is adapt your design to it. Use larger Text, avoid high contrast, so the compression isn't as visible.

[Mike_Gondek]

Your question does not provide any of the settings, or what your destination pixel size is. Most likley you need more pixels, or having more pixles than needed if quality is an issue.

Here are settings you especially need to pay attention to

The top row of type is done with none, the bottom with crisp

[HaylesB]

Hi Mike!

Yeah im not familiar at all trying to learn myself through tutorials ect for social media for work. However from your examples you've shown it looks like that could do the trick so thankyou very much 🙂

[Bobby Henderson]

As others have stated, there are serious limitations with type when it is rendered into pixel-based form. I've used a certain trick on rasterized text in graphic designs to display on LED-based variable message signs. I size the lettering where the baselines and cap height lines line up with the pixel grid. The lettering is still going to look soft no matter what, but if the baselines and cap height lines match the pixel grid the text will look noticeably sharper. The same principal can apply for rasterized text in web graphics. For example, if that red stripe behind the word "SALE" is 80 pixels tall, you could size the lettering in the word "SALE" to be 60 pixels tall or some specific even number value and vertically align it to that red stripe. Illustrator now has variations in how to size letters, including cap letter height. You can define the value by pixels, inches, etc. That will allow the baseline and cap height lines to match the pixel grid and provide a modest improvement in sharpness.

In a perfect world all the social media sites and all web browsers would properly support vector-based web graphics standards such as SVG. But we're still not there yet. So we have to use various work-arounds until then.