Почему же края цветные?
В прошлом номере читателям была предложена задача:
Некоторые компьютеры могут вести себя необычно: если на них увеличить чёрно-белый текст (например, со снимка веб-страницы) в редакторе изображений, то края букв будут цветными, а не чёрно-белыми — вопреки ожиданиям. Объясните причины такого странного явления.
Чтобы разобраться, напомним, как устроен экран большинства жидкокристаллических мониторов. Экран сложен из маленьких квадратиков — пикселей. Их обычно около миллиона. Каждый пиксель состоит из трёх вертикальных полосок — красной, зелёной и синей: 
. Цвета выбраны так потому, что в нашем глазу есть как раз три типа колбочек: одни лучше реагируют на синий цвет, другие — на зелёный, третьи — на красный.
Пиксель очень маленький, и наш глаз не видит полоски по отдельности. При восприятии они смешиваются, и получившийся цвет зависит от яркости каждой полоски1. Например, если все три полоски пикселя горят максимально ярко, мы увидим пиксель белым: 
.
На рисунке 2 показано, как устроена одна и та же область размером 4×4 пикселя, когда мы видим её белой, чёрной, синей и жёлтой соответственно.
Рис. 2
Как изображается чёрная буква A на экране? Если нарисовать её чёрными пикселями, контуры буквы получатся слишком угловатыми (рис. 3).
Рис. 3. Буква A из целых чёрных пикселей: в редакторе и на экране
Можно использовать оттенки серого, делая некоторые пиксели не совсем чёрными, а чуть светлее. Контуры получатся более гладкими, но буква станет размытой (рис. 4).
Рис. 4. Буква A с оттенками серого: в редакторе и на экране
Но ведь можно пойти по другому пути — вспомнить, что каждый пиксель состоит из трёх полосок, и менять яркость каждой полоски по отдельности. Результат вы видите на рисунке 5 (контуры буквы выглядят более ровными, чем на рисунке 3).
Хотя некоторые пиксели погашены лишь частично, в любом месте экрана мы видим либо чёрный цвет, либо все три цвета рядом, поэтому буква A получается чёрной, а фон — белым.
Рис. 5 (слева). Буква A на экране, у некоторых пикселей погашены не все полоски. Рис. 6. Добавляем плавное изменение яркости у полосок
Если же при этом ещё и плавно менять яркость полосок (как в случае с оттенками серого), можно сделать букву ещё глаже — как на рисунке 6. (Кстати, примерно так и совершенствовались буквы при создании шрифтов.)
Но что произойдёт, если мы увеличим букву A, устроенную как на рисунке 6? После увеличения каждый пиксель превратится в квадрат того же цвета, но большего размера, и его цвет станет различим глазом. Например, если в каком-то пикселе горела только синяя полоска, после увеличения он превратится в синий квадрат, как в примере на рисунке 2. Такие «неполные» пиксели расположены как раз по краям буквы. В итоге мы получим букву A рисунка 1 с цветными краями. Вот и весь секрет.
Рис. 7
В дополнение заметим ещё, что в разных электронных системах пиксели могут по-разному делиться на полоски: например, цвета могут идти в другом порядке. А если повернуть экран на 90°, как мы часто делаем с планшетом или телефоном, пиксель уже будет разделён на горизонтальные полоски. Бывает и более сложное деление пикселя, как на рисунке 7. Всё это нужно учитывать при сглаживании шрифтов.
Художник Мария Усеинова
1 Смешивая именно красный, зелёный и синий цвета, можно добиться наиболее широкого спектра цветов, которые мы можем воспринять. Подробнее об этом читайте в статье А. Бердникова «Цветные тени» в «Квантике» № 7 за 2015 год (PDF, 8 Мб).
Рис. 1. Края увеличенной буквы цветные