Jump to content
mikehutch

Matching Website Text Quality

Recommended Posts

I need to create a .png with transparency  using 18pt Arial to match the existing website text quality. Whatever I do the ,png text isn't as sharp as the page text. Is there any way to accomplish this?

 

Thanks in advance for any help.

 

Mike

Share this post


Link to post
Share on other sites
8 hours ago, αℓƒяє∂ said:

In a word, no. Selectable text on a web page is essentially vector, but a PNG image is raster.

But the vector must also be rendered using pixels. Standard view (100%) should therefore be of the same quality.

Share this post


Link to post
Share on other sites
37 minutes ago, Pšenda said:

But the vector must also be rendered using pixels. Standard view (100%) should therefore be of the same quality.

No, absolutely not!

Browsers and operating systems know you are using fonts and do a lot of extra rendering work, using antialiasing etc. Some even use sub-pixel rendering, which as I understand it, uses coloured pixels to improve on the grey only standard antialiasing. Must admit I don't know too much about who, when and where that is used but being a font does matter!

A pixel in an image is just a pixel.

Share this post


Link to post
Share on other sites
49 minutes ago, toltec said:

Browsers and operating systems know you are using fonts and do a lot of extra rendering work, using antialiasing etc. Some even use sub-pixel rendering...

Yup, agreed! It's called ClearType, and it was developed by Microsoft to add additional resolution to text. It can do this magical thing because every single pixel consists of three dots; a dot is just a red green or blue rectangle. 

Image result for monitor close-up

So what they do around text aliasing is have red, green, and blue turn on procedurally. 

That's why if you take a screenshot in Microsoft Windows, and really zoom in on some rasterized vector text, you'll see some delightfully strange effects

image.thumb.png.ec445a0596868587fc02cb3e25c0dfd8.png

The antialaising implemented here is perhaps the most clever antialaising available. It effectively triples the 'pixels' on your screen by being able to put all of those dots to use by sending colors to your screen. As such, edges can be extra smooth as Windows and other operating systems are able to divide each pixel into a third.

Problematically, no programs will really let you create this same kind of text, simply because it really ought to be done on the side of the operating system. This is what Affinity Photo will do:

image.thumb.png.fa5ca36b0ac4d5d2d1da9576fa3f8bfc.png

Both of these, however, are better than text with no anti-aliasing at all, which looks image.png.a967d86e1514308b726339874b3a0037.png

image.png

Share this post


Link to post
Share on other sites
3 hours ago, Pšenda said:

But the vector must also be rendered using pixels. Standard view (100%) should therefore be of the same quality.

No, it will not be the same quality if html text elements are used on the web page & compared to a bitmap image of that same text. In fact, web browsers may not even use any of the same fonts (there can be more than one) the tagged text element suggests the browser could use to render it.

To oversimplify a bit, a web page is like a recipe sent to a browser that identifies various elements as text, bitmap images, vectors, video, links, or whatever. It is sort of like how a cookbook might list the ingredients of a recipe & instructions on how to prepare it. But the 'cook' (the browser) is not compelled to follow those instructions exactly, or even use all the ingredients in the list.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.