Зміст
Ми всі можемо погодитись, що вбудовані веб-шрифти є одним із найбільших успіхів у веб-дизайні з моменту його створення, особливо в епоху адаптивного веб-дизайну. З такою кількістю елементів, які переміщуються та змінюються від одного розміру екрана до іншого, чудова типографіка та чіткі шрифти є однією з єдиних констант, які однаково добре працюють на кожному пристрої (крім пристроїв, що використовують браузер Opera Mini).
Просто додавання веб-шрифтів - це лише частина історії. Слова можуть мати значення, але букви мають емоції. OpenType (OT) - це міжплатформенний формат файлу шрифтів, розроблений Adobe та Microsoft. Його особливості додають більшої глибини та різноманітності, розширюючи набори символів шрифтів із підтримкою OT, включаючи такі друкарські вишуканості, як лігатури, смужки, стилістичні альтернативи і навіть справжнє кернінг. Розширте свій емоційний запас, досліджуючи всі ці дивовижні риси; немає жодної причини зупинятися лише на гарнітурі.
Перегляньте ексклюзивний скрінкаст цього підручника:
Тільки які всі ці друкарські красуні? Ну, для початківців існують лігатури (включаючи стандартні, дискреційні та контекстні різновиди). Це комбінації символів, які історично мають тенденцію поєднуватися, коли їх малюють або вирізають, наприклад, ff, ffl, fi або fj. Технічно це тоді, коли «капюшон» f поєднується з «заголовком» малої літери i або j, але ви бачите, як важко буде тримати пряме обличчя під час обговорення теми.
Одним з моїх особистих фаворитів є менш поширена лігатура для ct та st, як це можна побачити, зокрема, в Adobe Caslon Pro. Потім є зразки, як ті, що знайдені у Fairbank (показано у використанні з Fonts.com): прекрасні махи та прикраси, які додають справді виразного персонажа, якщо їх добре використовувати.
Інші загальні риси включають стилістичні замінники та різні варіанти числівників, включаючи табличні фігури (рівномірно розташовані та ідеально підходять для фінансових таблиць), дроби, фігури старого стилю (як піднімаються, так і низхідні, щоб добре поєднуватися з великими та малими літерами) і, звичайно, кернінг таблиці. (Тільки це може коштувати вартості вступу, оскільки я завжди вважав, що браузери, як правило, виконують досить середню роботу з інтервалами на екрані.)
- Завантажте зразок сторінки, що містить безліч порад та підказок, які ви можете спробувати у своїх власних проектах.
Трохи попередньої історії
Ці персонажі та особливості існували століттями, але лише нещодавно вони стали придатними для використання в Інтернеті. Вперше лігатури були побачені в шумерських рукописах та багатьох наступних формах письма та каліграфії. З появою рухомого типу лігатури використовувались для поліпшення розстановки літер, щоб забезпечити інтервал більш щільний, ніж це дозволяли б окремі блоки типу. Багато з цих функцій потрапили в немилість із появою набору фотографій, а потім і комп’ютерної. Лише за останні роки кращі формати шрифтів знову зробили їх доступними, і їх використання зросло.
З появою OpenType (або більш правильно Open Font Format) на робочому столі та його похідному Web Open Font Format (WOFF) для використання в Інтернеті, нарешті, існує пара форматів шрифтів, які можна використовувати майже універсально. Важливість тут полягає в тому, що ці формати підтримують набагато ширший набір символів та функцій для більш точного друкарського контролю, ніж будь-коли раніше. Як і в Інтернеті, використання цих функцій підтримується на різних рівнях у всіх основних браузерах, але зараз це досить поширене, щоб бути вартим серйозного розгляду та використання.
Необхідний CSS існує вже кілька років і є частиною модуля типу CSS3. На жаль, це був повільний прогрес, щоб отримати достатньо широку підтримку формату WOFF, тому з цього випливає, що впровадження та підтримка браузера також розвивалися повільно. Однак варто зазначити, що кожен основний браузер для доставки підтримує функції OpenType (за винятком Opera Mini). Ви можете перевірити, наскільки назад ця підтримка легко поширюється на Чи можу я використовувати.
На щастя, навіть незважаючи на те, що підтримка та синтаксис різняться, такі інструменти, як Sass, можуть допомогти зробити більш практичним спробувати, і якщо синтаксис не працює або функція не підтримується, користувач просто отримує звичайний текст. Звичайно, завжди є улов; увімкнення функцій OpenType збільшує розмір файлу, але з обережністю та кешуванням це не повинно вбивати продуктивність.
То навіщо турбуватись?
Дизайн - це спілкування, і люди судять про зручність користування на основі естетики.Тож наш обов’язок - зупинитись у тому, як ми спілкуємось із типографським вибором. Крім того, ви повинні пам’ятати, що ми читаємо, скануючи групи фігур, а не окремі літери. Тож чим плавніший потік і чим легше вловлювати групи букв і розуміти їх як слова та фрази, тим швидше користувач зрозуміє повідомлення, яке ви намагаєтесь передати, і ви будете робити це зі стилем.
Деталі, будь ласка
Після того, як на вашому сайті є шрифт, на якому активовані функції OpenType, використовувати їх у своєму CSS досить просто. Офіційний синтаксис CSS3 виглядає так:
p {font-feature-settings: "liga" 1, "frac" 1; }
Цей код включає як стандартні лігатури, так і дроби, якщо ці функції доступні. Через варіації синтаксису фактично безпечніший спосіб їх включення буде виглядати приблизно так:
p {-moz-font-feature-settings: "liga = 1", "frac = 1"; -moz-font-feature-settings: "liga" 1, "frac" 1; -webkit-font-feature-settings: "liga" 1, "frac" 1; -ms-font-feature-settings: "liga = 1", "frac = 1"; -o-font-feature-settings: "liga" 1, "frac" 1; налаштування шрифту-функції: "liga" 1, "frac" 1; }
Так, Firefox тут двічі. Це пов’язано зі зміною синтаксису десь навколо Firefox 14. Ось більш повний перелік наявних функцій та способи посилання на них:
- "c2sc": маленькі ковпачки від ковпачків
- "calt": контекстуальні альтернативи
- "clig": контекстні лігатури
- "dlig": дискретні лігатури
- "hist": альтернативи історичного характеру
- "hlig": історичні лігатури
- "kern": дозволити використання вбудованої таблиці кернінгу
- "liga": загальні лігатури
- "nalt": альтернативна анотація
- "сіль": стилістичні альтернативи
- "smcp": маленькі ковпачки
- "ss01": альтернативний стилістичний набір 1
- "ss02": альтернативний стилістичний набір 2
- "ss03": альтернативний стилістичний набір 3
- "ss04": альтернативний стилістичний набір 4
- "ss05": альтернативний стилістичний набір 5
- "swsh": смужки
- "нуль": косо-нуль
Наступні варіанти вимагають свого роду умовної логіки (принаймні на ваш погляд), оскільки ви можете одночасно активувати лише одну з цих пар:
- Номерний регістр: "lnum": номери підкладок або "onum": номери старого стилю
- Числовий інтервал: "pnum": пропорційний або "tnum": табличний (для вибудовування рядків цифр, таких як фінансові дані)
- Дроби: "frac": звичайні дроби або "afrc": альтернативні дроби
Не хочете все це пам’ятати? Якщо ви користуєтеся Sass, я отримав для вас Mixin. Він містить список вище та робить увесь код, що пише для вас. Щоб отримати вичерпний список, спробуйте Adobe.
Обґрунтований підхід
Кожен елемент вашого дизайну повинен бути присутнім з певною причиною, але важливо пам’ятати, що іноді вагомою причиною є просто краща краса. І це нормально. Приємна річ функцій OpenType полягає в тому, що вони самі повертаються до звичайного типу, тому їх цілком безпечно додати до вашого дизайну, і рівень лаку, який вони додають, може бути досить помітним. З більшим акцентом на читабельність, підвищену щільність пікселів та якість екрану, все більше користувачів читають довший вміст в Інтернеті. Це означає, що вигоди від читабельності від кращого типографічного оформлення можуть швидко перерости у підвищену лояльність, більшу сприйнятливість до користування та навіть паради єдинорогів та цуценят (добре, так що, можливо, останній з них є перебільшенням).
Слова: Джейсон Фундаментал
Ця стаття спочатку з’явилася у випуску 253 журналу net.
