Научете как работи изобразяването на текст и се уверете, че шрифтовете ви се изобразяват красиво.

перфектно

Изборът на красив шрифт е безполезен, ако изглежда грозно на екрана ви. За да избегнете отвратителен - или по-лошо - нечетлив текст, винаги трябва да проверявате дали шрифтът работи добре на устройствата, които вашите посетители използват. Може да се изненадате; повечето от посетителите ви вероятно не използват същото устройство, което използвате за проектиране и разработване. Всъщност по-голямата част от хората, сърфиращи в интернет, използват машини с Android и Windows.

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

Например шрифт, който се представя добре на macOS, може да изглежда крехък в Windows (вижте изображението по-долу). Важно е да използвате реални устройства, тъй като инструментите за онлайн тестване на браузъри и виртуалните машини често са неточни (повече за това по-късно).

Ако все още нямате съдържание на сайта си (tsk!), Завъртете образеца на уеб шрифта на Тим Браун. Той задава съдържание в няколко размера на текста и с различни цветове на фона. Това не е заместител на реално съдържание, но ще стане на крачка.

Понякога имате късмет и шрифтът, който сте избрали, е проектиран изрично за екрани: ScreenSmart на Hoefler & Co, eText на Monotype и Reading Edge на Font Bureau са примери за колекции, специално проектирани с мисъл за екрани и трябва да изглеждат красиви навсякъде. Разбира се, струва си да проверите повторно изобразяването на текста, независимо от произхода на шрифта.

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

Растеризиране и сглаждане

Процесът на трансформиране на контурите на шрифта в пиксели се нарича растеризация. Механизмът за визуализиране на текст на операционната система поставя контура (т.е. формата) на всеки символ с желания размер на шрифта върху пикселна мрежа. След това оцветява всички пиксели, чийто център е вътре в контура (вижте изображението по-долу).

В този пример пикселът е включен или изключен, без значение колко от контурите присъства в пиксела. Това сближаване на математически перфектни контури се нарича псевдоним; опити за сгъстяване за смекчаване на грубите външни прилики на стълби, причинени от ограничената разделителна способност на екраните.

Идеята на антиалиасинга е да се разбере каква част от контурите присъства във всеки пиксел и да се представи това със стойност на сивата скала. С други думи, ако контурът обхваща 50% от пиксела, той използва 50% от черното, за да оцвети този пиксел. Ако пикселът е изцяло в очертанията, се използва 100 процента черно и т.н. Това води до сгъстен визуализация, който намалява псевдонима (вижте изображението по-долу). Често ще виждате термина „сглаждане на сивата скала“, използван за описание на този ефект.

Докато сглаждането подобрява качеството на изобразяване на текст, възможно е да подобрите резултата допълнително, като използвате подпикселно изглаждане. Subpixel antialiasing използва характеристиките на екраните, за да увеличи разделителната способност на растеризирания текст. Всеки пиксел в дисплея се състои от три продълговати субпиксела: червен, зелен и син (съществуват и други конфигурации, но се прилагат същите принципи). Операционната система може да контролира тези субпиксели поотделно; subpixel antialiasing експлоатира това чрез прилагане на изчислението на покритието към всеки субпиксел (вижте изображението по-долу).

Разликата между тези опции за изобразяване на текст става очевидна, когато започнете да работите с по-малки размери на текста. Без сглаждане, героите бързо губят отличителните си очертания. Стягането на сивите скали прави мъжете размазани, но запазва формата им. Subpixel antialiasing прави остри символи, но също така въвежда някои цветни ресни около ръбовете на героя.

Съвети за изглаждане

Можете да промените настройките за сглаждане чрез нестандартни -webkit-изглаждане на шрифтове и -moz-osx-font-изглаждане CSS свойства. За съжаление, много CSS рамки и библиотеки използват сгладен и сива скала стойности, за да изглежда текстът по-лек в macOS. Повечето разработчици и дизайнери обаче не осъзнават, че това деактивира субпикселното сглаждане и прави текста по-размазан, като по този начин вреди на четливостта.

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

Двигатели за рендиране на текст

Повечето операционни системи използват свой собствен механизъм за рендиране на текст, докато други използват същия механизъм с отворен код (макар и не непременно със същата конфигурация). Всички те обаче поддържат сглаждане и субпикселно сглаждане, но се различават леко в тяхното изпълнение. В много операционни системи изборът на метод за сглаждане може да бъде избран от потребителя. В Windows например субпикселното сглаждане се нарича ClearType; на macOS се нарича LCD Font Smoothing.

В момента има четири основни механизма за рендиране на текст: интерфейсът на графичните устройства (известен също като GDI) и DirectWrite в Windows; Основна графика на macOS и iOS; и FreeType с отворен код за Linux, Chrome OS и Android.

Най-общо казано, браузърът ще използва механизма за рендиране на текст, който е присъщ на операционната система, на която работи. Chrome например използва DirectWrite на Windows, Core Graphics на macOS и FreeType на Android. Windows е уникален с това, че предлага два механизма за рендиране на текст: GDI и по-новия DirectWrite.

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

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

Браузърите също деактивират подпикселното сглаждане в подобни ситуации, например когато текстът се завърта или анимира. В този случай растеризираният текст вече не съответства на подпикселното оформление на първоначалната позиция на текста и ще трябва да бъде растеризиран отново. Това е скъпо, особено за анимации, така че повечето браузъри се възползват от сгъстяването на скалата на сивото, което не страда от същия проблем и работи във всякаква ориентация.

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

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

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

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

При тестване винаги използвайте представителна извадка от вашето съдържание. Библиотеката с шаблони е идеално подходяща за тестване на рендиране на тип, защото включва широка извадка от вашето съдържание: заглавки, основен текст, етикети, цветове на фона и анимация. Наличието на примери за вашето съдържание на една страница ви позволява бързо да проверите всички комбинации от стилове и цветове на фона.

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

Тази статия първоначално е публикувана в брой 301 на net, най-продаваното списание за уеб дизайнери и разработчици в света. Купете брой 301 или се абонирайте за net.