Чи варто використовувати в проекті безкоштовні шрифти

1. Звідки беруться безкоштовні шрифти
2. Alegreya
3. Source Sans Pro
4. Open Sans
5. Anonymous Pro
6. Playfair Display
7. Roboto
8. Lato
9. Merriweather
10. Karla
11. Clear Sans
12. Fira Sans
13. Ще кілька непоганих безкоштовних шрифтів
14. Точка зору: Юрій Вєтров, керівник відділу проектування і дизайну інтерфейсів в Mail.Ru Group

Наша взаимовыгодная связь https://banwar.org/

Зустріч Шоафа з безкоштовними шрифтами сталася досить типовим для індустрії чином. На початку кар'єри в 2003 році його начальник відмовився витрачати гроші, вручивши йому замість цього CD під назвою «5000 безкоштовних шрифтів» зі словами про те, що такий диск потрібен кожному дизайнеру, щоб навіть думки не виникало про подібні витратах.

Природно, на цьому диску були в основному неякісний приклади - «типу сучасні» і ретро, ​​шрифти для Хеллоуїна, техношріфти, був навіть шрифт, в якому букви були сформовані з котів, які брали різні пози. Кернинг, гліфи та рендеринг цих шрифтів ввергали в жах. Загалом, жоден з них не міг би бути використаний професійним дизайнером навіть під страхом смерті. В результаті Шоаф вирішив звернутися до старої доброї Гельветіка.

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

Звідки беруться безкоштовні шрифти

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

Все змінилось. Не так давно навіть такі великі компанії, як Adobe і Google, почали робити свої шрифти відкритими, передаючи їх учасникам розробки різних open source-проектів. Професійні дизайнери також не сидять склавши руки і активно просувають свою експертизу, публікуючи цілі шрифтові сімейства на сервісі Google Fonts .

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

Alegreya

Alegreya - це відомий шрифт, обраний ATypI одним з 53 «Шрифтів десятиліття» під час недавнього конкурсу Letter.2. Він доступний для скачування на Google Fonts, проте більшості дизайнерів Alegreya досі невідома, тому зустріти даний шрифт де-небудь в інтернеті все ще досить важко.

проект Beef використовує Alegreya для тексту на сторінках сайту, надаючи тексту солідності, що відмінно контрастує з заголовками, набраними шрифтом Avenir .

Гарний курсив Alegreya використаний для заголовка на сторінці з вакансіями на сайті Beef.

Source Sans Pro

Випущений Adobe в серпні 2012 році Source Sans Pro є першим відкритим шрифтом компанії. Дизайнер Пол Д. Хант надихався готикою початку ХХ століття, наприклад, такими шрифтами, як Franklin Gothic і News Gothic. Шрифт призначений для користувача інтерфейсів, так що відмінно рендерится навіть на малих екранах. Доступно 6 накреслень ( «ваг») шрифту, що дозволяє домогтися широкої варіативності його застосування.

CAST83 використовує на своєму сайті Source Sans Pro, наочно демонструючи різнобічність шрифту; великі заголовки виконані шрифтом з меншою вагою, а більш важке накреслення використовується для написів меншого розміру і в верхньому регістрі, що створює унікальний типографический контраст в рамках одного сайту.

Plentific використовує екстра-легкий і звичайне написання Source Sans Pro для створення контрасту між заголовками різного рівня.

Open Sans

Розроблений відомим дизайнером Стівом Маттесон і використовувався Google Open Sans - це один з найпоширеніших в інтернеті безкоштовних шрифтів. Саме на ньому заснований новий фреймворк Foundation 5 від Zurb, цей шрифт присутній на багатьох сторінках Google, які пройшли редизайн. П'ять накреслень з відповідними їм курсивом цього шрифту без зарубок дозволяють використовувати його в самих різних ситуаціях.

на сайті Vitor Andrade Open Sans використовується мінімалістичним чином; дизайн не привертає увагу до себе, дозволяючи відвідувачам сфокусуватися на контенті, який представлений на сайті.

Легкий Open Sans використаний для набору заголовків новин на сайті The Industry .

Anonymous Pro

Anonymous Pro - це моно шрифт , Який відомий дивно малому числу дизайнерів. його створив Марк Симонсон - дизайнер, який стоїть за проектом Proxima Nova. Моноширинних шрифти зараз користуються популярністю у багатьох професіоналів.

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

Per Sandström використовує Anonymous Pro для тексту на сторінках сайту, в комбінації з заголовками, набраними шрифтом Futura , Виходить напрочуд красиво.

На сайті Per жирне накреслення Anonymous Pro використовується для написів на кнопках.

Playfair Display

Playfair Display - висококонтрасний шрифт із зарубками, створений Клаусом Еггерс Соренсеном. Він чимось нагадує Baskerville , А його ідеологія сходить до шрифтів, що використовувалися в кінці XVIII століття. Незважаючи на те, що Playfair Display створювався для використання в заголовках і назвах, наявність трьох накреслень з відповідними стилями уможливлює набір з його допомогою і невеликих уривків тексту. Для набору довших текстів, Playfair Display можна ефективно поєднувати з Georgia.

У Playfair Display є красивий курсив, який можна зустріти, зокрема, в заголовках на сайті Boompa Records.

Жирне накреслення Playfair Display використовується в заголовках на сайті Digital Abstracts.

Roboto

шрифт Roboto звинувачують в тому, що це « Франкеншріфт »- суміш Гельветики, DIN і Myriad. У цьому є частка правди, що не скасовує і його плюсів. Після виходу статті із звинуваченнями в запозиченнях, Roboto був значно доопрацьовано і поліпшений. Шрифт добре працює на екранах різних розмірів і дозволів.

Roboto використаний в проекті Type & Grids , Шрифт добре рендерится на дисплеях малих розмірів з високою щільністю пікселів.

Paone Creative варіант Roboto легкої ваги можна зустріти в блозі.

Lato

На польській Lato значить «літо». І назва відмінно підходить цьому теплому шрифту без зарубок. Дизайнер Лукаш Дзідзіч спочатку створив Lato як пропрієтарного шрифту для великого клієнта. Після того, як цей клієнт вирішив рушити в іншому дизайнерському напрямку, Лукаш зробив свою роботу відкритою. Lato виглядає скромно і непомітно, коли використовується для тексту невеликого розміру, але варіант з курсивом дуже яскравий і впізнаваний. Lato використовується в темі по-замовчуванню в WordPress під назвою Twenty Fourteen, що забезпечує йому зростання популярності.

Френк Чімера (Frank Chimero) елегантно використовує легкий вага шрифту в статті «Чого хочуть екрани» - великі написи набрані у верхньому регістрі, що є непоганою знахідкою для такого легкого варіанта шрифту.

на сайті «100 років дизайну» від AIGA застосовується допрацьована «безточечная» версія Lato.

Merriweather

Створений Ебен Соркіним Merriweather - шрифт із зарубками, який призначений для читання прямо з екрану. Merriweather зараз активно розвивається, і поліпшення відбуваються постійно. існує версія sans serif.

Легка вага Merriweather на сайті Dickson Fong додає дизайну елегантності.

У футере на сторінці Vtcreative можна побачити легку курсивні напис, набрану шрифтом Merriweather

Karla

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

проект Borsch, Vodka & Tears uспользует Karla для невеликих шматків тексту на сайті, виглядає цілком непогано.

Kalyn Nakano застосовує звичайне і жирне накреслення Karla на своєму сайті-портфоліо .

Clear Sans

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

Делікатний, легка вага Clear Sans використаний для набору тексту на сайті самого шрифту.

Fira Sans

Розроблений для Firefox OS шрифт Fira Sans випущений під відкритою ліцензією. Він багато чим схожий на FF Meta, що не дивно, адже обидва вони розроблені дизайнером Еріком Спайкерманном. Існує і Моноширинний версія Fira Sans під назвою Fira Mono. Цікавий факт - на сайті самого шрифту чомусь використаний не він, а відомий нам Open Sans.

Ще кілька непоганих безкоштовних шрифтів

Безкоштовні шрифти підходять не завжди

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

Точка зору: Юрій Вєтров, керівник відділу проектування і дизайну інтерфейсів в Mail.Ru Group

Я б розділив питання на дві частини: чи варто використовувати кастомниє шрифти, і якщо так - чи має сенс платити за них. Ми в Mail.Ru Group активно займаємося оновленням продуктів, і хороша типографіка, природно, важлива в цьому процесі. Зараз ситуація сприятлива - все більше хороших кириличних шрифтів для самих різних завдань, а завдяки сервісів типу Google Web Fonts і Typekit їх підключити технологічно нескладно.

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

• Головне завдання типографіки в нашому випадку - забезпечувати комфорт читання і сканування інформації. Тому перевіряйте рендеринг в браузері на реальній верстці, а не в Photoshop. Хоча в його версії Creative Cloud з'явився наближений до системного рендеринг, все одно в підсумковій реалізації можливі як мінімум відходження. А в гіршому випадку - абсолютна нечитабельність. Я збираю колекцію таких прикладів (картинка нижче), можете спробувати вгадати сервіс (скріншоти зняті на Chrome для Windows 8). Перевіряйте в Windows 7, Windows 8 і Mac OS.
• У продовження - для сервісу з великою відвідуваністю необхідно пам'ятати про Windows XP і мати механізм деградації до Core Fonts for the Web для неї. Хоча все професійне співтовариство ненавидить ОС, і її офіційна підтримка офіційно припинена, там до цих пір сидить пристойну кількість користувачів. В системі дуже складна ситуація зі згладжуванням шрифтів (залежить від комбінації сервіс-пака і браузера), і якщо ви подивіться на кастомний шрифт в IE6 пару хвилин, то очі повільно витечуть.
• Слідкуйте за розміром підвантажуваних шрифтів. Чим більше накреслень ви використовуєте, тим важче цей обвіс для користувача - залишайте тільки дійсно потрібні. Пам'ятайте, що у нього може бути дорогою трафік і повільна швидкість. Також можна оптимізувати сам шрифтової файл, прибравши звідти непотрібні вам символи типу ієрогліфів і арабської в'язі. Хоча тут треба бути обережним - багато виробників шрифтів забороняють це в ліцензії, оскільки є ризик поламати його тонкі настройки.
• Кастомний шрифт можна використовувати для заголовків і виділень, а також для основного тексту. Для обивателя основний ефект досягається акціденціямі, для завдань дизайну вони також дають найбільш видимий ефект, при цьому проблем з їх рендерингом менше за рахунок менших обсягів і більшого кегля. Майже весь геморой з рендерингом - як в раз в основному тексті, і проблеми в ньому найгірше впливають на читабельність. Можливо, вам буде досить обмежитися заголовками.

Сумні наслідки відсутності перевірки рендеринга на реальній верстці

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

З платними на практиці все непросто. На жаль, ліцензійна політика сервісів оренди типу MyFonts або Fonts.com абсолютно крохоборская для великих компаній. З нас беруть гроші за щомісячне кількість показів, причому за масштаб економію ви не отримаєте. Так що за рік проект з багатомільйонною аудиторією може заплатити десятки тисяч доларів за використання шрифту - не дуже розумне вкладення грошей. У деяких ситуаціях виходить, що розробити свій шрифт - дешевше оренди існуючого! На круглому столі тематичної конференції «Срібло набору 2013» я задав питання на цю тему і отримав у відповідь, мовляв, «раз ви такі великі - поділіться!». Не особливо конструктивно.

З ситуації є цікавий вихід - знайти хороший і маловикористовувані шрифт, домовитися з автором про його кирилізації. У підсумку ви отримаєте унікальну для вітчизняного ринку типографіку по досить осудною ціною. Цим шляхом пішли , Наприклад, хлопці з 2ГІС в недавньому редизайне.

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

Що стосується Mail.Ru Group, то в минулому році почали активно з'являтися продукти, що використовують кастомную типографіку. У 2014 це стане системним - очікується багато оновлень, і сервіси поступово вибудовуються навколо декількох шрифтових рішень. Обмежень і нюансів при великому масштабі багато, так що буде чим поділитися - в вигляді розгорнутої статті або презентації