Избор на шрифт

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

Кирилицата не е толкова проста

Първото ми изискване беше едновременно просто, но и много важно: шрифтът трябваше да поддържа правилно българската кирилица. Но какво всъщност означава „правилно“ в този контекст? Отдавна знаех, че има разлика между българската и руската кирилица, но никога не бях отделял време да прочета повече по темата. Досега.

Добра отправна точка с преглед на историята и основните визуални разлики е страницата, създадена от фондацията, организираща конкурса Български награди за уеб (BG Web). Най-силно впечатление ми направи разликата при малките букви: българските са много по-разнообразни като форма и височина от руските. Именно това разнообразие прави думите по-лесни за разпознаване с един поглед, защото всяка буква допринася повече за цялостния силует на думата. По-задълбочен анализ по темата може да се прочете в статия на списание „Култура“.

Въоръжен с тази информация, започнах да търся шрифтове с поддръжка на българската кирилица. Добро място за начало на търсенето е тази страница, която събира голям набор от шрифтове с българска кирилица.

Серифен или безсерифен?

Следващото решение беше по-скоро естетическо – да използвам серифен или безсерифен шрифт?

Отдавна бях чувал популярното твърдение, че серифните шрифтове са по-удобни за продължително четене, но ми се искаше да проверя доколко е вярно. Едно скорошно изследване показва, че предпочитанията към шрифтовете са силно индивидуални. Подобно на очилата, те могат да бъдат съобразени с конкретния човек. Други изследвания потвърждават, че разликите в четимостта между серифните и безсерифните шрифтове са минимални или изобщо липсват. В крайна сметка изборът остана изцяло личен, което ми даде повод да си задам въпроса: „Защо не и двата?“

И така реших да оставя избора на читателя – серифен или безсерифен - според това кое му е по-удобно.

Техническата реализация

След като избрах шрифтовете за сайта – Sofia Sans и Veleka – оставаше само да реализирам превключването между тях и да запазя предпочитанието на читателя при следващи посещения.

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

Така размерът на един шрифт намаля от около 400 KB до едва 28 KB – спад с над 90%.

Исках да видя точно кои символи са останали след тази обработка и използвах Wakamaifondue. Качвате шрифт и получавате подробна информация за него – от поддържаните глифове и OpenType функционалности до визуализации как изглеждат.

След като сравних оригиналния и оптимизирания вариант, не останах напълно доволен от избраните символи по подразбиране. Затова съставих собствен списък с всички Unicode кодови точки, които исках да използвам, и ги подадох като като параметър unicode-range в Transfonter. Това намали размера още малко – до около 24 KB – и ми даде точно набора от символи, който планирам да използвам.

Ако в бъдеще ми потрябват някои от премахнатите, просто ще повторя същия процес с разширен списък от кодови точки.

Бъдеща оптимизация

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

Заключение

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

Да дадеш на потребителите възможността сами да изберат между серифен и безсерифен шрифт е малко подобрение в потребителското изживяване, но според мен усилието си заслужава.