<p>This is called subpixel rendering.</p>

<p>The different primary colors in your monitor are not stacked on top of each other. Instead they are arranged near each other. Different monitors have different patterns but most commonly they are aligned so that the colors are side by side. </p>

<p>If you know the physical arrangement, then you can prepare the image so that you have calculated a different sample position for each color channel. In essence your boosting the resolution of your image so that you are treating each individual color as a separate pixel. </p>

<p>This, of course, means that you need to know the display orientation and have some data that can be shifted. The image wouldn't be all that useful on other monitors with different pixel alignments. So this is reserved for things that are dynamically generated, most often fonts.</p>

<p>It also means that when zoomed or presented on a medium with different or no subpixels, the effect will register as a blur. So zooming in on the pixels of a subpixel rendered image is not very good idea. For this reason it migth be a good idea to disable the effect if you make images for others to use and the subpixel alignment is unknown.</p>

CC BY-SA 4.0
2016-02-12T20:50:25.683Z
2018-08-21T09:45:54.990Z
2018-08-21T09:45:54.990Z
joojaa
<p>Why is it that when you zoom in to some black text you find that it is made up of orange, slightly black and blue pixels like the picture below. </p>

<p><a href="https://i.sstatic.net/0gIia.png" rel="noreferrer"><img src="https://i.sstatic.net/0gIia.png" alt="Black text zoomed in"></a></p>

CC BY-SA 3.0
2016-02-12T08:44:20.430Z
https://en.wikipedia.org/wiki/ClearType or more generally https://en.wikipedia.org/wiki/Subpixel_rendering
Rotem
<antialiasing><font-rendering><subpixel-rendering>
why does black text have orange and blue pixels
HEGX64
# why does black text have orange and blue pixels

(Asked by: username_0 on 2016-02-12)

Why is it that when you zoom in to some black text you find that it is made up of orange, slightly black and blue pixels like the picture below.

[![Black text zoomed in](https://i.sstatic.net/0gIia.png)](https://i.sstatic.net/0gIia.png)

**Tags:** antialiasing, font-rendering, subpixel-rendering

> **Comments:**
> **username_1**: https://en.wikipedia.org/wiki/ClearType or more generally https://en.wikipedia.org/wiki/Subpixel_rendering  

---

## 1 answers

### Answer by username_2 on 2016-02-12. Score: 12 | Accepted answer

This is called subpixel rendering.

The different primary colors in your monitor are not stacked on top of each other. Instead they are arranged near each other. Different monitors have different patterns but most commonly they are aligned so that the colors are side by side.

If you know the physical arrangement, then you can prepare the image so that you have calculated a different sample position for each color channel. In essence your boosting the resolution of your image so that you are treating each individual color as a separate pixel.

This, of course, means that you need to know the display orientation and have some data that can be shifted. The image wouldn't be all that useful on other monitors with different pixel alignments. So this is reserved for things that are dynamically generated, most often fonts.

It also means that when zoomed or presented on a medium with different or no subpixels, the effect will register as a blur. So zooming in on the pixels of a subpixel rendered image is not very good idea. For this reason it migth be a good idea to disable the effect if you make images for others to use and the subpixel alignment is unknown.


---

