Способи управління територіями в веб-типографіці

54

Від автора: якщо у 2006 році ви вже писали сайти, ви могли стикатися з такими дизайнерами, як я, які скрупульозно підходили до питання шрифтів, але не порівнювали, як вони виглядають на макеті і в браузері. Ви, можливо, намагалися пояснити таким, як я, що таке кросбраузерна сумісність, і як різні браузери по-різному відображають ці шрифти. Я ж висилав вам у відповідь зображення з контентом, не обтяжуючи себе перевірити, що текст у всіх браузерах виглядає однаково. Так, я був одним з таких дизайнерів.

Веб-шрифти сильно еволюціонували з того часу, а у нас з’явилися інструменти для зміни стилю відображення. Деякі з інструментів досить старі. Пам’ятаю, як у мене мало не злетіла дах, коли я дізнався про FitText.js і Lettering.js.

Незважаючи на великий вибір інструментів, є безліч ситуацій, коли нам доводиться підлаштовувати шрифти вручну для кращої чіткості. У цій статті я розповім вам про ці випадки, а також дізнаємося про способи вирішення таких проблем.

Виправляємо вигляд одного конкретного заголовка

Я часто стикаюся з такою проблемою, особливо коли в дизайні присутня супер наворочений шрифт. Сам веб-шрифт виглядає чудово, але в окремих ситуаціях починаються проблеми. Для прикладу візьмемо наступний заголовок зі шрифтом Abril Fatface з Google Fonts:

Який гарний шрифт! Але саме в цьому заголовку мені не подобається пара речей, а зокрема відстані між кількома літерами. Літери розташовані дуже близько:

Тут нам допоможе кернінг! Кернінг – це відстань між буквами. У всіх файлах шрифтів є кернінг, і з допомогою властивості font-kerning ми можемо його видалити:

.no-kern-please {
font-kerning: none;
}

Rubber Baby Buggy Bumpers

Різниця зовсім невелика, але кернінг може дійсно допомогти, якщо ваш дизайнер захоче змінити відстань між буквами.

Відключення кернінгу не завжди доцільно. Як зазначив Джеймс Колче, гарні шрифти використовують кернінг в якості інструменту не просто так. Якщо видалити кернінг з допомогою CSS для вирішення однієї конкретної проблеми, ми можемо випадково змінити відстані між літерами у всьому шрифті.

Дані про підтримку в браузерах нижче взято з сайту Caniuse, на якому також йдеться, що дана функція знаходиться в статусі W3C Candidate Recommendation.

Повна фіксація відстаней між літерами

Якщо ви працювали з шрифтами, де відстань між літерами або занадто багато, або занадто маленьке, то ви пізнали, що таке біль. Нижче приклад з ще одним чудовим Google шрифтом Dorsa:

Шрифт відмінно підходить для заголовків. Але можете собі уявити, яким було б читати текст з таким шрифтом у параграфі? Та ну.

Властивість letter-spacing може радикально змінити сприйняття цього шрифту у параграфі, додавши пару пікселів між літер:

.spaced-out {
letter-spacing: 2px;
}

Я не стану говорити, що цей шрифт став кращим для параграфів, однак з додатковим відстанню стало легше читати:

Дані про підтримку в браузерах нижче взято з сайту Caniuse, на якому також йдеться, що дана функція знаходиться в статусі W3C Candidate Recommendation.

Занадто маленький або занадто велика відстань між словами

Остання ситуація. Тут відмінність в тому, що нас не влаштовує відстань між словами, а не окремими символами. Тут нам допоможе властивість word-spacing, однаково працює у всіх браузерах. Приклад з віршем, в якому використовується шрифт Prompt. Шрифт злегка ширше за інших, і виглядав би краще, якби він трохи вже.

Нерівні відстані між рядками

Не всі рядки мають однакову висоту. Подивіться, як один шрифт здається більше іншого, хоча значення font-size у них однакове.

Властивість font-size задає прямокутну область, яку може зайняти шрифт. Якщо встановити властивість font-size: 20px, ми створимо блок, в який можна помістити букви розміром в 20px.

Деякі шрифти будуть займати більше простору, з-за чого буде здаватися, що вони більше за розміром і мають більшу або меншу вертикальне відстань між рядками.

Для управління вертикальними відступами можна скористатися властивістю line-height. Є так зване золоте правило чіткість тексту font-size * 1.5 = line-height (або безрозмірний варіант line-height: 1.5;), яка буде змінюватися в залежності від вибраного шрифту і того, як він займає вертикальне простір. Подивіться molten leading.

Чіткість і розбірливість

Не всі шрифти однаково відображаються в різних операційних системах. Це відбувається тому, що в ОС Windows, Mac OS і т. д. береться різну кількість пікселів на малювання шрифтів. Багато веб-дизайнери ненавидять ту думку, що ми залежимо від того, як ОС інтерпретує наші рішення зі шрифтами.

В CSS є властивості, що збільшують дозвіл шрифтів для відображення в ОС. Цей процес називається субпиксельный рендеринг. Браузеру даються команди, щоб той спробував залити певні пікселі на екрані.

Було багато суперечок, чи можна гратися субпіксельним рендерингом чи ні. Дмитро Фадєєв красиво висловився проти цієї практики. Його слова актуальні, незважаючи на те, що минуло вже кілька років.

«Режим згладжування – не «фікс» для субпиксельного рендеринга, в більшості випадків він тільки заважає. Субпиксельный рендеринг технічно перевершує режим згладжування, він чистіше і більш читабельний. Ефективне дозвіл для згладжування шрифту збільшується в три рази за рахунок використання кожного субпікселя. Режим згладжування буде корисний у певних ситуаціях. Наприклад, темний текст на світлому фоні. Однак згладжування не замінить субпиксельный рендеринг, і вже точно це не «фікс».»

Але, наприклад, ми все ж хочемо це зробити. Властивість font-smooth дає нам певний рівень контролю над чіткістю і читанням тексту. Властивість заповнює ті пікселі, які пропустила ОС. Значення властивості font-smooth:

auto: дозволяє браузеру самому прийняти рішення про те, як найкраще залити пікселі шрифту.

never: відключає автоматичне згладжування системи. Шрифт буде відображатися по-звичайному, з зазубреними краями і т. д.

always: браузер отримує команду завжди додавати пікселі в шрифт, якщо є така можливість.

Примітка: на момент написання статті властивість font-smooth вважалося неофіційними властивістю і не рекомендувалося для використання. Для роботи в браузерах WebKit і Mozilla є спеціальні вендорные префікси, однак властивість нестандартизоване. Враховуючи примітку вище, для вендорних префіксів можна виділити наступні значення:

-webkit-font-smoothing

none: відключає згладжування шрифту WebKit браузерах.

antialiased: згладжує шрифт на одному рівні, так як пікселі вже отрисованы операційною системою.

subpixel-antialiased: згладжує текст на мікро рівні, підвищуючи чіткість тексту, особливо для екранів з високою роздільною здатністю.

-moz-osx-font-smoothing

auto: браузер сам вирішує, чи потрібно оптимізувати згладжування шрифту чи ні.

inherit: властивість успадковує значення від батьків.

unset: те ж саме, що none у префіксі WebKit.

grayscale: те ж саме, що значення antialiased у префіксі WebKit.

Дані про підтримку в браузерах нижче взято з сайту Caniuse, на якому також йдеться, що дана функція знаходиться в статусі Unofficial або W3C «Note».

Ви користуєтеся SVG?!

В SVG є свій рівень підтримки описаних у цій статті технік. В SVG є свій кернінг, відстань між літер і слів. Також варто згадати атрибут textLength, з допомогою якого можна явно задати ширину тексту, а текст підлаштується під зазначені межі. Атрибут lengthAdjust також працює з одним символом або глифом (знаки пунктуації).

Висновок

Типографіка в інтернеті – заняття непросте. Так, у нас є тьма інструментів, з допомогою яких можна контролювати відображення шрифту, його рендеринг і розташування на екрані. Проте з великою силою приходить велика відповідальність. Принаймні, тепер у вас є кілька інструментів, якими ви можете допомогти дизайнерам, які не можуть вирішити проблему точного перенесення дизайну в браузер.