Matching Website Text Quality

[mikehutch]

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

[Alfred]

24 minutes ago, mikehutch said:

Is there any way to accomplish this?

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

[mikehutch]

Thank you Alfred. Much appreciated.

Regards.

Mike

[Pšenda]

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.

[toltec]

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.

[HuniSenpai]

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. 

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

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:

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

[R C-R]

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.

[Pšenda]

Hello, I responded to the text "is essentially vector, but a PNG image is raster". The correct answer is "font".