ДИЗАЙН Для недизайнерів, заняття 4
Типографіка
Які є шрифти? Яка їх анатомія? Хто їх розробляє? Як підбирати шрифти у проект?
Що таке типографіка?
    Це наука про оформлення набірного тексту за допомогою правил верстки. Складається із шрифтового дизайну, тобто створення символів літер та цілих шрифтів; шрифтового оздоблення, тобто модифікації та декорування малюнків літер; верстки, тобто вибору шрифту, параметрів набору, способів розміщення на площині та компонування з іншими елементами.
      Історія шрифтів
      Сучасна наука вказує на те, що вперше форми для набору тексту з фаянсу були застосовані в Китаї майже тисячу років тому (1040 г.) слугою імператора Бі Шеном. І хоч матеріал, що використовується для цього, був недовговічний, аж до появи його в XIII столітті в Кореї подібною технологією ніхто не користувався.

      З середини XV століття типографіка з'явилася в Європі, тут і почався її бурхливий розквіт, чому сприяла простота і невелика кількість букв в латинському шрифті, на відміну від китайських ієрогліфів.

      Першопрохідцем європейської типографіки вважають німецького ювеліра і винахідника Іоана Гутенберга. Саме він в 1440 році створив складальну форму з свинцевих букв і друкарський верстат. З їх допомогою можна було не тільки швидко і точно набрати потрібний текст і віддрукувати сторінку, але і багаторазово використовувати металеві символи. Першим шрифтом був обраний готичний, так як він найбільше відповідав рукописному тексту тих часів і містив майже 300 знаків.
      Роль України у становленні типографіки
      1444-1446
      Невідомий нікому Прокопій Вальдфогель (підозрюють, що це сам Гутенберг) укладає угоди з різними особами з продажу технології «штучних листів».
      1468
      перша книга в Чехії.
      1494
      італійський друкар Альд Мануцій видав книгу зі зразками шрифтів, які вже лише віддалено нагадували рукописне письмо.
      1517
      перша книга на білоруській мові.
      1561
      Видане Пересопницьке Євангеліє, написане староукраїнською писемною мовою. Раніше від роботи московського друкаря Івана Федорова.
      1580
      віддруковані 1500 примірників Біблії в Острозькій друкарні. Це перше повне видання всіх книг Св. Письма церковнослов'янською мовою.
      Найбільш зручним для читання буде нейтральний і непомітний шрифт.
      Навпаки ж, образ можна зробити практично з будь-якого фрагмента тексту. Для цього потрібно відняти у читача можливість сприйняття на підсвідомому рівні, зробити текст незвичним.
      Анатомія шрифта
      Найпростіше пояснення: шрифти бувають з засічками і без засічок.
      Види шрифтів
      Зазвичай виділяють чотири види шрифтів:
      Антиква
      Контрастний шрифт із засічками
      Брусковий шрифт
      Неконтрастний або контрастний шрифт із зарубками, близькими за формою до прямокутника
      Гротеск
      (рублений)
      Шрифт без засічок
      Гротескна антиква
      Контрастний шрифт без засічок
      У більшості шрифтів у кінці є Sans, або Serif.
      Serif в перекладі з англійської - «зарубка» (тобто шрифт із зарубками), а Sans - «без» (тобто Sans Serif - без зарубок).
      Одиниці виміру шрифтів
      Розмір шрифту вимірюється у pt від англ. "Point"
      пункт, що рівний 1/72 дюйма.
      Це запропонував Франсуа Дідо, таким чином заклавши основи для вимірювання висоти шрифтів.

      Чому з'явились пункти:
      Колись давним-давно літери відливалися на металевих або дерев'яних брусках, і їх розміри були досить статичними. Висота літерної площадки називалася кеглем, а вимірювали її в пунктах (1 пункт дорівнює 0,376 мм).
      Що погубить будь-яку типографіку — орфографія
      Писати дефіс замість тире
      довге тире — alt+0151;
      коротке тире — alt+-, alt+0150
      Ставити дюйми замість лапок
      Alt+0171 (праві лапки)
      і Alt+0187 (ліві лапки)
      Розтягнення і стиснення літер
      Геометрично це змінює контраст літери і псує весь вигляд шрифта.
      По-перше, не викликає сумнівів те, що око не може з легкістю сприймати значну кількість слів, набраних шрифтом, для якого характерний різкий контраст між основними і додатковими штрихами. По-друге, що око важко сприймає велику кількість слів, ..., якщо довжина рядка перевищує допустиму межу. По-третє, кегль шрифту повинен бути співвіднесений з довжиною рядка. В середньому, кількість слів у рядку, яку може без праці сприймати очей читача, коливається між 10 і 1
      Стенлі Морісон
      Британський типограф, автор шрифта Тimes New Roman
      Найвідоміші шрифтовики
      Пауль Реннер. Шрифт Futura.

      Історія створення: Франкфурт, 1927 на словолитній фабриці Bauer (Bauer Type Foundry). Futura була створена через популярність в той час таких шрифтів. Але в зв'язку з тим, що Bauer була набагато більше, ніж Ludwig & Mayer, Футурі вдалося пройти випробування часом. Спочатку вона була нудною, бо геометричні форми повторювалися, але потім її допрацювали. Кирилична версія цього шрифту з'явилась напередодні оформлення Олімпійських ігор у Москві.
      Де ви могли його бачити: Величезна кількість постерів до фільмів, включаючи «Гравітацію», «Красу по-американськи», «Зниклу» і «Інтрестеллар», а також серіали, такі як «Залишитися в живих» і «Вулиця Сезам». Використовується в високо оціненому графічному романі «Хранителі» (Watchmen). Це улюблений шрифт відомих режисерів Уеса Андерсона і Стенлі Кубрика, тому його часто можна спостерігати в їх фільмах.

      Стенлі Морісон, шрифт Times New Roman.

      Історія створення: Англія, 1931. Був розроблений за замовленням британської газети The Times після того, як шрифт дизайнера Стенлі Морісона піддався критиці через погану читабельність. Морісон допомагав штатному дизайнеру створювати Times New Roman, який потім розійшовся по всьому світу.
      Де ви могли його бачити: та майже повсюди. Зазвичай його називають «шрифт найменшого опору». Включений в усі версії Microsoft з 1992 року. Часто використовується в книгах і газетах. Його висока розбірливість відмінно підходить для текстів.

      Клод Гарамон, шрифт Garamound.

      Історія створення: Один з найстаріших шрифтів, який використовується до цих пір. Датою виникнення вважається приблизно 1530 г. Час політичних і соціальних заворушень у Франції. Це була епоха, якій були потрібні нові шрифти, щоб сформулювати нові ідеї. Пізніше, після смерті Гарамона, шрифт був придбаний французько-німецької шріфтолітейниє компанією, і почав використовуватися як шрифт в 20-м столітті.
      Де ви могли його бачити: Логотип Abercrombie & Fitch. Нібито вважалося, що цей шрифт міг зберегти США $ 400 млн. через його високу контрастність.
      Джон Баскервіль і Baskerville
      Найбільший вплив на типографіку, яка замикнулась на антиквах зробила праця Джогна Баскервіля, бо в середині XVIII століття вперше з'явилися спроби систематизації типорозмірів і випуску книг шрифтових зразків. Джон закликав відмовився від використання книжкового орнаменту на користь «чистої» типографіки, заснованої виключно на шрифтовому оформленні. І саме з його праці з часом на зміну узорчатості приходить геометрична точність, проявляється значимість загальної композиції вільного простору листа, народжуються все нові засоби відтінків, і з'являються контрастні шрифти.
      Ян Чіхольд: закладач типографічних правил елегантності макету
      Ян Чіхольд. 1925 вийшла його брошура «Elementare Typographie», яка разом із книгою «Die Neue Typographie» здійснила переворот у способах набору. з 1926 він викладає каліграфію і стилистику набору в Мюнхені в Школі майстрів німецького книгодрукування. Отримав орден Почесного королівського дизайнера.

      Був видатним модерністом і діячем руху Bauhaus.
      написав "Вигляд книги" та "Нова типографіка", які є хрестоматійними при вивченні типографіки, хоча і сам Чіхольд з часом осудив їх за максималізм, змінивши погляди на менш модерністські. Саме його слід читати для більшого розуміння типографіки.


      Як обрати шрифт
      Якими тезами слід користуватись при виборі гарнітури для проекту
      Поставте мету проекту і тоді вибирайте шрифт
      Якщо ви використовуєте шрифт у інтернет-рекламі, то слід вибирати беззасічкові шрифти, або геометричні гротески, а якщо це буде друкована реклама — то можна звертати увагу на антикви. Обирайте прості і практичні шрифти, обирайте серед безкоштовних, або купіть їх, чи арендуйте.
      Не знаєте, як поєднувати — беріть на заголовки шрифт без засічок, а на основу — з засічками.
      Це просте правило допомагає скоротити час при підборі шрифтів, коли натхнення, або ресурсів практично немає.
      На друк і на веб — шрифти різні
      Формати веб-шрифтів і шрифтів для друку відрізняються своєю контрастністю, тому слід враховувати це при виборі шрифтів, які мають бути фірмовими і використовуватись і там і там.
      Враховуйте вимоги цільової аудиторії
      Якщо у вас переважаюча ЦА — жінки, то їм підійде летеринг, або каліграфія, але якщо чоловіки — то ця "няшність" зовсім ні до чого. Відчувайте строгість, коли вона потрібна, і якщо не знаєте, який шрифт обрати — обирайте строгі беззасічкові гарнітури.
      Сім раз відмір — один раз зроби макет
      Перевіряйте усі шрифти на наявність кириличних символів, наприклад "і", перевіряйте шрифт, як він виглядає при дуже великому кеглі і дуже маленькому.
      Дивіться на нього з різних девайсів і адаптивності.
      Засічки сприяють запам'ятовуванню тексту
      А для коротких фраз краще взяти красивий неогротеск, це правило не виходить з моди.
      Від шрифту залежить лише 40% успіху макету
      Решта 60% — від сітки і розташування блоків тексту на ній.
      Як треба і не треба працювати з шрифтами
      Менше шрифтів — краще
      Максимум три гарнітури водночас: оптимально обрати дві, або взагалі одну, змінивши начертання. Велика кількість шрифтів призводить до візуального шуму.
      Розрядіть обстановку
      Не зліплюйте літери докупи. Якщо у вас виникли проблеми з нестачею місця для тексту, то краще зменшіть шрифт. Так це, можливо, додасть простору між абзацами, але в цьому немає нічого страшного, це дасть перепочинок при читанні.
      Вирівнювання — лише правильне
      Погані приклади - це вирівнювання по ширині, вирівнювання посередині і вирівнювання по правому краю.
      Вирівнюючи по ширині, ми отримуємо нерівномірні прогалини. Вони десь маленькі, десь великі, часто вони занадто великі, і це дає шум у макеті.
      Ні акцидентності!
      Красиві декоративні шрифти можуть подобатись вашій мамі, але зовсім не означає, що необхідно використовувати їх для тексту, де багато абзаців. За декоративними шрифтами, найчастіше стоїть, історія або вони застосовуються в конкретному випадку, наприклад, для заголовка або назви.
      Ієрархія у макеті
      Заголовки добрі, коли набрані жирним і великим шрифтом, але якщо ви будете використовувати і в основному тексті занадто великі літери, це здешевить його. Добре дивіться, яку візуальну вагу має заголовок і основний текст: заголовок має бути жирнішим, і чим важливіший заголовок — тим жирнішим він має бути.
      Дайте місця!
      Дуже важливо правильно підібрати цей інтервал: інтерліньяж і кернінг, тобто відстань між літерами і між рядками, аби фрази було легко прочитати без запинки. Краще не чіпати дефолтних показників, або старатись підібрати на око. Щоб гарно кернінгувати — є тренажери. :)
      Практична частина
      ключове завдання на сьогодні
      Ми підбираємо шрифти і складаємо шрифтові пари.
      Шрифтові ресурси для не-дизайнерів
      Арендувати шрифт:
      https://rentafont.com.ua/

      Гнемо літери самостійно і тренуємо окомір:
      http://shape.method.ac/

      Тренуємось кернінгувати:
      http://type.method.ac/#

      Безкоштовні шрифти тут:
      http://www.creativebloq.com/graphic-design-tips/be...
      https://www.awwwards.com/100-greatest-free-fonts-c...
      https://fonts.google.com/
      https://www.invisionapp.com/blog/free-typography-r...

      Платні шрифти тут:
      https://typekit.com/

      І ті і ті шрифти:
      https://www.fontsquirrel.com/

      Шрифтові новинки:
      https://www.typewolf.com/

      Найякісніший ресурс із кириличними шрифтами:
      http://free.type.org.ua/

      Крута підбірка вже спарованих між собою шрифтів з Гуглофонтрс
      https://www.behance.net/gallery/35768979/Typograph...
      https://www.behance.net/gallery/41054815/Typograph...

      Гарні шрифтові поєднання можна шукати
      за запитом «font pairing» на Behance, Dribbble та інших подібних сайтах.

      Хард-левел:
      Я. Чихольд. Облик книги
      Я. Чихольд. Новая типографика. Руководство для современного дизайнера
      Груповий чат у Slack
      nondesigners01.slack.com
      Made on
      Tilda