Аз съм програмист. Не се занимавам с цифрова живопис, с обработка на снимки, с видеомонтаж. Наистина не се интересувам особено много от динамиката и правилното възпроизвеждане на цветовете. По-голямата част от дните си прекарвам работейки с текст в браузъра и в текстовия редактор, гледайки малко подвижните букви.

Само че оптимизирам всички настройки, за да се виждат наистина добри букви. За тази цел е необходим много добър монитор. Не, не просто е нужен, а е ЗАДЪЛЖИТЕЛЕН. Под „добър“ имам предвид толкова добър, колкото изобщо е възможно. Това са си мои мисли, базирани на моя собствен опит за това, кои монитори са най-подходящи за програмиране.

Дисплеите с ниска плътност на точките

Според моята анкета сред програмистите, цели 42% от тях все още използват монитори с плътност на изображението под 150 пиксела на инч (ppi).

Your _primary_ working monitor dpi? Use this tool to calculate https://t.co/SY8Sfd1KER Thanks!

— Niki Tonsky (@nikitonsky) May 12, 2020

Защо това е сериозен проблем? Защото единственият начин за получаването на подходящи и добре видими букви е да се използват повече пиксели на буква. Токова е просто. В миналото броят пиксели на буква бе неголям и ние се научихме да да живеем с това и дори измислихме няколко много хитри трика, за да си направим живота по-добър. Важно е да разберем две основни неща:

• Времената на дисплеите с ниска резолюция отминаха. Сега се използват дисплеи с висока разделителна способност
• Триковете, създадени за дисплеите с ниска резолюция, не успяха по някакъв вълшебен начин да накарат текста да изглежда добре. Така си беше и няма да стане възможно. Те просто направиха текста по-малко ужасен, но той все още е ужасен

Ако си мислите, че по някакъв начин можете да накарате вашия дисплей да показва качествен текст и че само трябва да се направят още някои настройки, сте в грешка. Това няма да стане. Колкото по-бързо разберете това, толкова по-скоро ще започнете да търсите правилните и реалните решения. И ще си запазите зрението и здравето.

За да станат тези мои твърдения по-основателни, нека малко по-подробно разгледаме как всъщност изглежда текста на дисплей с ниска разделителна способност и какво може да се направи в този случай.

Пикселите не достигат

Първо, за правилното показване на символите, пикселите просто не достигат. Нека се спрем на шрифта Consolas, специално създаден за програмистите. Microsoft е работил доста много, за да го настрои за рендиране на дисплеи с ниска разделителна способност. В редактора VS Code по подразбиране се използва Consolas с размер 14px, а някои хора дори допълнително го намаляват.

При тези размери главната буква B заема на екрана едва 6х9 пиксела. А малките букви имат само 7 (седем!) вертикални пиксела. Това съвсем не е много. Пръстите на ръцете ми са повече от тези пиксели. Независимо колко добре е разработен даден шрифт, трудно е да покажеш нещо добро, когато всичко което имате са седем пиксела. Всичко което е малко по-сложно от „T“или „H“ се превръща в някакъв пикселен безпорядък.

Погледнете буквата „g“ в изображението по-горе. Трудно е да се каже къде започват и къде завършват щрихите и дори колко са на брой. Това сякаш е просто някакъв случаен сив шум и шахматна дъска, но не и буква. Ето я буквата:

Наистина е обидно да се гледа как тези прекрасни малки детайли се свиват само в 7х10 пиксела.

Ужасният хинтинг

За да се пребори с проблема на сивата цапаница, Windows използва доста агресивно изглаждане, познато като хинтинг. На практика той просто леко променя и приближава чертите на буквите до най-близкия пиксел и по този начин очертава по-ясни граници.

Това работи! Шрифтовете наистина изглеждат по-добре с хинтинг, отколкото без него:

Но не се надявайте на него, така или иначе нищо няма да се получи. Той няма да накара текста да изгледа добре. Той ще изглежда малко по-добре, но все едно – лошо.

Главният проблем на хинтинга е, че той разваля очертанията на буквите. Пикселите се визуализират не там, където точно трябва да бъдат, а там където е мрежата от пиксели. Ето един пример:

Идеята е те да изглеждат по-добре, когато се визуализират в реални пиксели.

Но ако погледнем вертикалния хинтинг на хоризонталните линии, ще видим, че шрифтът силно се променя:

Виждате ли как хоризонталните линии са се изместили от тяхното реално положение във векторния шрифт? грешката тук е цели 1/4 пиксела.

Но чакайте малко! А ако никога не сте виждали Consolas с висока резолюция, кой го интересува дали буквата „g“ има оригиналната си форма? Как ще се сетите, че линиите не се намират на необходимото място, ако не знаете къде трябва наистина да бъдат? Е, понякога проблемите са очевидни – кръговете не са кръгли, пропорциите са неправилни, това което трябва да е малко, излиза огромно и т.н. Ето тук:

След преместването на хоризонталните линии в съответствие с мрежата пиксели (чрез изместване на 1/2 пиксела), Windows трудно разделя 7-те други пиксела на три равни отрязъка. За съжаление, алтернативата не е по-добра:

От моя личен опит по разработването на Fira Code, видях много методи, при които методът с обикновеното прилепване на краищата към най-близкия пиксел, обърква много неща:

Това е една игра, в която е невъзможно да се победи.

Раздробяването на пиксела

Можете ли да нарисувате права линия, която е по-тънка от един пиксел?

Да. Идеята съвсем не е сложна. Пикселът във вашия дисплей е съставен от три вертикални субпиксела, всеки от които отговаря за своя цвят. Можем да използваме този факт, за да утроим хоризонталната резолюция!

Но това не може да се използва буквално, понеже ще се получи нещо като коледна гирлянда:

Така че отново се налага да се прави компромис, като се определи предела доколко далече може да се отклони цвета от черното:

Това означава, че формата на буквата не е три пъти по-детайлна, а някъде около един път и половина по-добра, но като цяло всичко е все още доста размито:

В крайна сметка четимостта се повишава, но в същото време черно-белият текст придобива тюркоазено-оранжев ореол. Не е толкова зле, но се забелязва.

Опитвам се да кажа, че тези трикове работят. Явно е по-добре да ги има, отколкото да ги няма. При дисплеите с нисък dpi, това е просто задължително. В същото време те са жесток компромис, постигнат във времената, когато нямаше по-добри дисплеи. Сега, когато имаме нова техника, времето на тези трикове отмина.

Retina-та на MacBook

Макбукът с Retina може да показва наистина качествен текст. Но има две неща, които задължително трябва да се направят.

Първо, да се изключи изглаждането на шрифтовете

Сега не си спомням какво има там по подразбиране, но се убедете, че тази опция е изключена.

Допълнение: в отзивите виждам, че по подразбиране това е включено. Задължително го изключете!

Тази настройка заблуждава. Преди време тя се наричаше „Изглаждане на шрифтовете в LCD екраните“ (LCD font smoothing), което предполага субпикселно изглаждане. Но Apple премахна субпикселното изглаждане от macOS още през 2018 година в същия месец, когато представи на пазара своя последен лаптоп без Retina.

Съвсем друга е работата, че името предполага, че вашите шрифтове изобщо няма да се изглаждат. Не е вярно.

Всъщност шрифтът става малко по-дебел:

Тогава защо да изключваме тази функционалност? Защото не съществува автоматичен начин шрифтът да се „болдва“. Всяко тегло на шрифта внимателно е разработено от професионалния дизайнер на шрифтовете. Това е сложен процес, който включва милиони ограничения. Ако се опитате например, автоматично да добавите контур към линията, то ще се получи нещо ужасно:

Но точно това прави изглаждането на macOS! Ето още един пример, при който macOS размива писелните граници с помощта на своето „изглаждане на шрифтовете:

представете си дизайнера на даден шрифт, който най-внимателно е балансирал всяка буква, наместил е всяка тока с точност 1/100 от пиксела, само за да може някакъв глупав софтуер да игнорира неговата работа, понеже счита, че знае по-добре нещата.

Какво означава всичко това за нас програмистите? Ако вземете даден шрифт, който ръчно е оптимизиран за определен размер на пиксела (каквито са редица програмни шрифтове, например Input с 11px или Monoid с 12px), то той винаги ще изглежда размит, независимо от усилията.

И всички останали шрифтове, включително и системните, ще бъдат по-размити отколкото е необходимо.

Забележка: в коментарите към този материал Крис Моргън спомена, че с тази настройка може да се обясни защо толкова много дизайнери използват font-weight: 300 като шрифт по подразбиране за своите уеб страници. По този начин те се опитват да компенсират автоматичното удебеляване на macOS.

ClearType в ОС Windows

Има най-различни мнения за достойнствата и недостатъците на ClearType и за това, че този метод е просто необходим при дисплеите с ниска плътност на пикселите. Но трябва ли тази опция да се изключва при 4К дисплеите? На теория – да. На практика – не.

Първо, Windows дори няма потребителски интерфейс за неговото изключване. Имам предвид ето този флаг:

Дори и да го изключите, пак трябва да минете през настройките на ClearType. Забележете, че липсва бутонът OK \_(ツ)_/.

Ако все пак го изключите по този начин, той ще изчезне в някои места, но ще се появява в други места. Предполагам, че там се използват различни API и на едното място тази настройка се отчита, а на другото – не.

Но най-важното е, че текстът без ClearType изглежда ужасно.Не би трябвало да става така – в macOS текстът изглежда идеално, но в ОС Windows това е съвсем нетърпимо. Струва ми се, че специалистите на Microsoft дори не проверяват тази опция:

Просто за собствено удоволствие заснех как изглежда всичко това в macOS със същите шрифт, размер и цвят:

Но ClearType текста изглежда добре в 4К мониторите. Жалко, че не може по желание да изключим опцията ClearType.

Край на първа част. В следващия материал ще разгледаме каква е ролята на целочисленото мащабиране, как да изберем най-подходящия монитор, ползата от използването на монитори с по-висока кадрова честота, както и някои модели монитори, на които си струва да обърнем внимание.