Веб-сервісів шрифтів присвячується - думка від першої особи

1. Ти пройшов великий шлях, малюк!
2. ПІДТРИМКА В браузері
3. ВГОРУ І ВИЩЕ ЗА МЕЖІ: ВІДПОВІДІ НА ПОТРЕБИ ДИЗАЙНЕРІВ ШРИФТІВ
4. «А як же ми?»: Що потрібно веб-дизайнерам
5. Дозвольте нам використовувати ваші шрифти в макетах
6. висновок

Ми підготували для вас переклад цікавої на наш погляд статті, яка буде корисна в першу чергу веб-дизайнерам.

Автор статті - Лора Франц, професор в Університеті штату Массачусетс, США (University of Massachusetts Dartmouth), де вона викладає дисципліни з декількох областей, такі як Веб Типографіка і Інтерактивний Дизайн.

Далі йде текст від першої особи.

Коли ви купуєте щось, сперечаємося, ви хочете, щоб це працювало. Навіть якщо щось дісталося вам безкоштовно, може, ви позичили в одного, ви хочете, що воно працювало. Ніхто не вважатиме за краще черевики, які тиснуть (або занадто вільні), машину, яка деренчить на швидкості більше 60 кілометрів на годину, або кухонний ніж, яким не можна розрізати помідор. Точно так само і веб-дизайнери не віддають перевагу шрифтів, що не вписується в проект, розвалюється в різних браузерах або таким, які не можна використовувати в макеті.

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

Ти пройшов великий шлях, малюк!

Вісім років тому, видання List Apart опублікував «CSS і Ten: наступна велика річ» , В якій Ейкон Фіуме Лі описує сервіс @ Font-face і заявляє: "Дві речі повинні відбутися, перш ніж веб-шрифти зможуть вивести веб-дизайн на новий рівень ... По-перше, ми повинні упевнитися в коректності обраного підходу ... По-друге , ми повинні переконати розробників браузерів в необхідності підтримувати веб-шрифти. "

ПІДТРИМКА В браузері

Сьогодні браузери підтримують веб-шрифти, і у нас є легальна CSS (таблиця оформлення структури сторінки, прим. Пер.), Щоб шрифти відображалися нормально. Звичайно, так як браузери попереднього покоління змінили нові браузери (і розширені сімейства шрифтів), що діє CSS перетворилася в вічну гру в "мета-рух".

Дійсно великої вдячності заслуговують Пол Айріш, який дав нам "Bulletproof Syntax", щоб обдурити Internet Explorer (IE) під час завантаження коректного файлу шрифту; Річард Фінк, автор "Mo 'Bulletproofer Syntax" для усунення проблеми завантаження шрифтів на ОС Android; і Ітен Даннем, автор "Fontspring @ font-face Syntax," який сумісний навіть з IE 9. Вони все ретельно пояснили, чому їх синтаксис працює, що змусило кожного активізувати свої сили там, де інші здавалися. Більш того, Font-face генератор Даннема забезпечив працює синтаксис для всіх тих веб-дизайнерів, які могли лише мріяти про те, щоб їх шрифти відображалися по-людськи.

Нарешті, хостинги шрифтів, такі як Typekit і Fontdeck, заслужили на окрему згадку. Вони працювали над крос-браузерної підтримкою декількох стилів шрифтового сімейства. Різноманітні специфічні назви шрифтових сімейств (звичайно, легше і коротше сказати «агов, приятелі, вам потрібно використовувати унікальну назву для кожного стилю і накреслення шрифтового сімейства») вимагають більш довгу CSS, проте вони ефективні і дозволяють завантажуватися одночасно більш чотирьох шрифтовим накресленням і стилям в IE 7 і 8. Ті з дизайнерів, хто не може жити без легені, нормального, жирного і дуже жирного накреслень, і для яких чорний має значення, виявилися в раю веб-шрифтів!

ВГОРУ І ВИЩЕ ЗА МЕЖІ: ВІДПОВІДІ НА ПОТРЕБИ ДИЗАЙНЕРІВ ШРИФТІВ

Один аспект, який Лі упустив в своїй замітці (потреба в більшій кількості веб-шрифтів) - як же ми зможемо вивести веб-дизайн на новий рівень, якщо у нас немає великої кількості шрифтів для використання? Це, зрозуміло, значить, що сервісів слід домогтися довіри в суспільстві шрифтових дизайнерів.

Потрібно було захистити шрифти.

Пам'ятайте, коли дизайнери не хотіли створювати або віддавати веб-шрифти без гарантії, що їх файли в безпеці? Стаття на Typekit «Обслуговування та захист шрифтів в Інтернеті» (2009) показала, що сервіси навіть чинять перешкоди до «випадковим зловживання» і тому винайшли «помірно безпечну» систему для обслуговування шрифтів.

Завдяки витримці кожного в дизайнерському співтоваристві, в якийсь момент за останні чотири роки «помірно безпечно» було досить, щоб спробувати. І тепер вони на гачку. У недавньому інтерв'ю, Джонатан Хофлер і Тобіас Фре-Джонс з H & FJ сказали: «Ми вимагаємо, щоб кожен новий проект міг процвітати не тільки на папері, але також на декстопов і екранах мобільних пристроїв.»

Як же здорово, правда?

Так, протягом усього лише шести років, ми пройшли великий шлях. Синтаксис веб-шрифтів працює і підтримується більшістю браузерів (наші шрифти завантажуються!); у нас є тисячі веб-шрифтів для роботи; у нас є кілька способів передачі веб-шрифтів (DIY або через сервіс-провайдера; безкоштовно або на щомісячній, щорічної або одноразової платній основі); сервіси безперестанку поліпшуються, так що веб-шрифти легше ввести і вони зазвичай завантажуються рівномірно!

Що ще потрібно дизайнеру?

Я так рада, що ви запитали.

«А як же ми?»: Що потрібно веб-дизайнерам

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

На деяких сайтах доступні тисячі шрифтів. Але знаєте, що?

«Більше» не завжди добре. Іноді «більше» перетворюється в «більше-здолати-щоб-знайти-то-що-я-хочу». У 2010 р в статті в New York Times «Занадто великий вибір: проблема, яка може паралізувати», йдеться про «послаблює» ефекті занадто великого вибору, так як в такому випадку складніше вибрать.Веб-дизайнерам вже дали тисячі веб-шрифтів. Тепер їм потрібно корисна інформація щодо можливих варіантів, а також допомогу у визначенні кращих робочих шрифтів в конкретному проекті. Які з них витримають відображення в різних браузерах? Які з них найкращим чином інтегруються в робочий процес? Як ми можемо бути впевнені, що наш вибір кращий? Як ми можемо знати, що шрифт підійде? І якщо підійде, як ми дізнаємося, що інший не був би краще?

Бенджамін Шайбеен, вчений і дослідник Університету Базель в Швейцарії, передбачає, що такий занепад сил приходить не тільки від занадто широкого вибору, а й від «нестачі інформації або належного розуміння варіантів». Хммм, але поки ми тут і дивимося на автомобіль, звідки ми знаємо, що він не буде деренчати на шосе? ..

ПОКАЖІТЬ НАМ ВАШІ ШРИФТИ В СЕРЕДОВИЩІ

Більшість з продавців показують, як шрифти будуть виглядати безпосередньо в середовищі. Вони дають можливість побачити, чи підійде шрифт ( «Мм, це як раз slab serif, це має спрацювати»), і допомагають виділити ті, що абсолютно точно не спрацюють ( «Ні, я не хочу такої круглий шрифт»). Відмінний старт, але цього не достатньо.

Беріть приклад з історії. Перед тим, як шрифт перейшов в digital-середу, друкарі і друкарі показували клієнтам свої набори в справі, щоб продати їх. Вони могли скласти томи книг, розміщуючи кожне зображення в абзаци в різних кеглях. Вони б показали доступні стилі для кожного шрифтового сімейства. І так як зразки листів і книг були вже запечатані, видавці і дизайнери могли побачити, як працює шрифт, коли виявляється надрукованим чорнилом на аркуші.

Зразок листа газети, Вільям Каслон, 1728р. Шрифт показаний в параграфах різних розмірів як в Roman, так і в Italic. Якби ми були на ринку шрифтів в далекому 1728, ми б знали точно, чого очікувати від містера Каслона.

Не вважайте за рекламу, але тільки Fontdeck , Fontspring , Font Squirrel і MyFonts пропонують можливість тест-драйву веб-шрифту в реченні. Проблема з пропозицією полягає в тому, що воно не показує, як шрифт виглядає в абзаці. В абзаці є візуальна текстура, і вона може бути привабливою (жваво, але не нав'язливо просуваючи погляд по горизонталі) або що хитається (з порожніми полями або сильним горизонтальним натягом, що перешкоджає руху погляду по горизонталі). Текстура впливає на читабельність.

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

Спадаючі пропозиції з Typekit. Нагорі: Kepler Standard від Adobe. Внизу: Utopia Standard від Adobe. Обидва шрифту - це serif зі злегка овальної чашеобразной частиною (подивіться на форму «о») і сильним контрастом між товстими і тонкими штрихами. Для непідготовленого ока вони виглядають практично однаково. Ха, та вони виглядають так навіть для тренованого ока! Ті ж шрифти, представенние абзацами від Typekit. У такому вигляді ми можемо побачити різницю. Нагорі: Kepler Standard від Adobe. У Kepler більш кругле, «пухирчасті» сприйняття і він виглядає трохи дрібніше, коли представлений в абзацах. Жоден з шрифтів не є «неправильним» в тексті. Але вони виглядають по-різному в параграфах, і кожен може бути придатним в якомусь проекті.

Тепер про інших сервісах - Google Fonts , Fonts.com , Webtype і Hoefler & Frere-Jones - вони показують свої шрифти в параграфах. Спасибі їм. Але просто для того, щоб ви знали, не всі абзаци так корисні, як вони могли б бути.

на Google Fonts текст має занадто щільну висоту по ширині рядка, так що все шрифти виглядають незграбно (див. ілюстрацію нижче). Fonts.com не пропонує достатньо варіантів розміру тексту; якщо шрифт виглядає занадто маленьким в 14 пікселів і занадто великим в 18, ми не можемо сказати яким він буде в 16 пікселів (для інформації, 16 - це дійсно дуже популярний розмір веб-тексту). Webtype використовує рядок для букв верхнього регістру, так що у них занадто багато заголовних букв, і шрифти виглядають незграбно; якщо ж вони дійсно хочуть показати, як виглядають їх шрифти, просто нехай використовують простий текст. Що стосується Hoefler & Frere-Jones , Їх абзаци обмежені трьома рядками, з дуже довгою 725-тіпіксельной довжиною рядка; такі параграфи не дуже-то приємно читати, і вони підривають якість шрифтів.

Який з шрифтів ви виберете? Форма абзаців має значення. Нагорі: абзаци Google Fonts з щільною високою рядком. Open Sans виглядає незграбно і важко читаемо, і складно сказати, чи буде шрифт виглядати добре в абзаці. Внизу: Open Sans на Typekit. Невелика висота рядка допомагає нам побачити, що такий же шрифт взагалі-то приємно читати

Typekit або Typotheque , Їх всіх сервісів, які я відвідувала або використовувала, дають кращу можливість перевірити вид тексту усередині абзацу. Є кілька параграфів різних розмірів, з хорошою довжиною і висотою рядка. Рішення сервісу WebINK також прекрасно. Використовуючи FontDropper, ви можете помістити будь-який з їх шрифтів на існуючу веб-сторінку і перевірити, як текст виглядає в справі.

Хоча все ж одна проблема є: бібліотека FontDropper не дозволяє вбудувати шрифтову систему повністю, так що ми не можемо побачити текст у накресленнях bold і italic.

Що ж призводить нас до шрифтових сімейств? Гадаю, ви вже помітили, дорогий читачу, що версії bold і italic іноді занадто схожі у традиційних шрифтів, що має на увазі ієрархію. З іншого боку, bold може виявитися занадто важким або italic занадто розплющеними, так що і той, і інший складно читати. Ось і все причини, за якими веб-дизайнери не дуже-то шанують використання особливих шрифтів. На додаток до всього, іноді bold і italic мають літерні форми, які просто не подобаються клієнту.

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

А ЯК ВАШІ ШРИФТИ ВИГЛЯДАЮТЬ В ІНШИХ системах і браузери?

Я багато говорила про середовище. Середовище - це не тільки текстура шрифту в абзаці або те, як шрифтовое сімейство виглядає все разом. Середовище - це також місце, в якому шрифт «живе».

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

Якщо шрифти вбудовані невірно, накреслення можуть значно змінюватися від браузера до браузеру. Цей шрифт виглядає чудово на останній моделі Mac. Однак коли я протестувала його в різних браузерах, я зіткнулася з проблемами (нижче). Шрифт виглядає занадто тонким для легкого прочитання. Якщо шрифти вбудовані невірно, межбуквенное відстань (і внутрішнє, і зовнішнє) може помітно змінитися в різних браузерах. Цей шрифт виглядає чудово на останній моделі Mac. Однак коли я протестувала його, з'явилися проблеми. Шрифт ширшає, і відстань між буквами нестійке.

Єдиний спосіб дізнатися, чи буде шрифт працювати як задумано в різних браузерах - це протестувати його. І, дозвольте зауважити, тестування веб-шрифтів - досить тоскний, віднімає багато часу працю. (Одного разу я вважала за краще розчистити свій гараж, щоб уникнути тестування шрифтів для проекту.)

Спасибі Fonts.com, MyFonts і Typekit за скріншоти шрифтів в різних браузерах. Ви показуєте тільки пропозиції, але навіть це допомагає. Також як Містер Каслон запечатував великий лист-зразок, Ви троє даєте веб-дизайнерам можливість побачити шрифт в справі. Ви показуєте, який шрифт відкинути, а який розглянути в подальшому тестуванні.

Hoefler & Frere-Jones, ви оголошуєте, що Ваш новий сервіс Cloud.typography створює кілька файлів шрифтів (кожен побудований для браузера і платформи окремо) і забезпечує кожен тип браузера унікальним файлом. Якщо це так, то ваші шрифти повинні виглядати відмінно скрізь!

Дозвольте нам використовувати ваші шрифти в макетах

Деякі веб-дизайнери без проблем переходять з начерку від руки олівцем або ручкою до макету-чернетки сайту. Деякі вважають за краще (або від них цього вимагають) проміжний етап у вигляді макетів сторінок в Photoshop, Illustrator або InDesign.

Знаю - тепер ваша черга сказати, що слід заглянути в історію. До того, як шрифт став цифровим, дизайнери не робили начерків з використанням справжніх шрифтів. Клієнти просто не очікували побачити їх - і складачів це влаштовувало. Але з ранніх 1980-х, макети повинні були виглядати «як справжні». І якщо ми хочемо (або нам потрібно) показати реалістичну макет-сторінку клієнту, нам необхідний доступ до «чорновим» шрифтів.

Fonts.com, Font Squirrel, Google Fonts і WebINK - ви все доповнюєте шрифти для вебу безкоштовним доступом до «чорновим» шрифтів за умови підписки. Спасибі вам! Але, на жаль, жодне з ваших рішень не зовсім. Fonts.com, ви даєте доступ до «чорновим» шрифтів тільки на один день, для «просування дизайн-процесу». Не знаю, як все влаштовано в вашому офісі, але я не в змозі зробити все за один день. Font Squirrel і Google Fonts, ви спеціалізуєтесь на безкоштовних шрифтах. У той час як мені (і моїм студентам) подобається користуватися безкоштовними шрифтами, доступ до високоякісних основним накресленням обмежений. WebINK, ваш плагін для Photoshop - прекрасне рішення, але тільки до тих пір, поки дизайнер не захоче використовувати Illustrator, InDesign або інше програмне забезпечення.

Fontspring, MyFonts, Typotheque і Hoefler & Frere-Jones, я знаю, що ви всі даєте пакетні пропозиції або знижки за покупку веб-і декстопних шрифтів відразу, що значно зменшує витрати веб-дизайнера. Однак, якщо ви - маленька компанія або фрілансер, такі дрібні витрати тільки для замальовки ідеї не надто приємні.

Найбільш перспективний підхід для «чорнових» шрифтів, мабуть, вже не за горами. Typekit, я знаю, що ви працюєте з Adobe Creative Cloud, щоб забезпечити синхронізацію з декстопнимі шрифтами. Я тільки що протестувала сервіс, і щаслива доповісти, що він працює як за помахом чарівної палички! (Гаразд, мій старенький ноутбук Mac поводиться як черепаха під час роботи Creative Cloud - але я ж можу його вимкнути, поки не використовую.)

Я була цинічна щодо вже функціонуючих сервісів синхронізації шрифтів. Я використовую CS6 і безкоштовний Creative Cloud. Ви обіцяли, що він буде працювати з платним Typekit (який у мене вже є), і він працює! Шрифти залишаються синхронізованими навіть тоді, коли я працюю офлайн. Це дає відмінні можливості.

висновок

Я знаю, що ви зайняті, тому не буду затягувати.

Ще одна подія має статися, щоб вивести веб-дизайн на новий рівень, і тільки ви можете це зробити. Ви повинні задовольнити потреби людей, які вже вибирають і використовують ваші шрифти - веб-дизайнерів. Впевнена, ми все можемо працювати над цим разом. Що стосується мене, я використовую спеціальну сторінку-зразок для тестування цікавих мені шрифтів. Після того, як я звужую вибір, я самостійно тестую шрифти в різних браузерах. Кілька годин по тому, якщо хоча б один з шрифтів працює так, як мені потрібно, я можу йти відразу в HTML і CSS від олівцем начерку і уникнути використання «чорнових» шрифтів.

Але виникає питання:

«Чому ми повинні опрацювати ці деталі?»

(Всі веб-дизайнери, які люблять використовувати нові шрифти, повторюйте за мною: «Чому?»)

Якщо важливо те, що шрифти завантажуються в будь-якому браузері, чому не вважається важливим визначити, які шрифти виглядають відмінно у всіх браузерах?

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

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

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

Насмілюся сказати, ви заслужите розташування кожного веб-дизайнера, який коли-небудь дивився на тисячі варіантів шрифтів і вигукував: «Чорт забирай, який же мені вибрати ?!»

Щиро ваша, Лора

Автор статті - Laura Franz.

оригінал статті Dear Web Font Providers на сайті www.smashingmagazine.com.

Переклад - Анна Данилова для Adventum.

[Grwebform url = "https://app.getresponse.com/view_webform_v2.js?u=BIpOw&webforms_id=495504" css = "on" center = "off» center_margin = "200" /]