Розділ2.Типографіка

Типографіка - оформлення тексту за допомогою набору і верстки. Оформлення тексту включає вибір кегля, креслення і гарнітури шрифту, виключки і довжини рядків [ en ], зміна пробілів між літерами (кернинг), групами букв (трекінг) і рядками (інтерліньяж), а також розташування тексту на площині

Верстка - монтаж смуг оригінал-макету із складових елементів: набраного тексту, заголовків, таблиць, ілюстрацій, прикрас та ін. Також результат цього процесу, тобто готові смуги Розрізняють книжкову, газетно - журнальну, верстку веб- сторінок у веб-дизайні. Міжбуквений просвіт - відрізняється від кернинга тим, що рівномірно збільшує всі апоршні в тексті, історично це простий прямокутний брусочок для позначення пробілів. У сучасному наборі тексту існує два основних типи пробільних елементів Кегль - розмір висоти літери, з урахуванням нижніх і верхніх виносних елементів, вимірюється в типографських пунктах (фундаментальна відносна одиниця - кегельний шпац­ія (em) (кругла)) Кернінг - відстань між буквами Інтерліньяж - відстань між рядками Ascender: будь-яка частина малої літери, що підноситься над лінією. Baseline: лінія, на якій лежить текст. Cap Height: верхня частина лінії. Descender: будь-яка частина малої літери, що падає нижче базового рівня. Leading: висота відстань між будь-якими двома лініями розділу. Оптимальна величина leading, як правило, в половину висоти розміру шрифту. Масштабування шрифтів

­

Щоб створити ефективний масштаб, кращий метод - це використовувати одиниці вимірювання розміру «EM». Метод встановлює розмір по відношенню до бази того чи іншого документу.(em)- це вирішення проблем масштабування шрифтів.Em: «em» - це масштабована одиниця, яка використовується у веб - дизайні. «Em» дорівнює поточному font - size, наприклад, якщо font - size в документі 12px, 1em дорівнює 12px. «Em» масштабируема за своєю природою, так 2em буде дорівнює 24px, 0.5em буде дорівнює 6px і т.д.Використання «em» стає все більш популярним у сучасній веб- дизайні через масштабованості і можливості з користю застосовувати в мобільних пристроях та інших створюючи адаптивні дизайни.Pixels (px) - мають фіксований розмір одиниць, які використовуються на екранах і він дорівнює найменшій точці на вашому моніторі.Ems (em) - залежить від font - size (div (а) body або іншого якщо це потрібно). Дизайнерові при створенні адаптивного дизайну простіше задати в пікселях (px) властивість body, а всі інші значення шрифтів у em бо це просто, 1 медіа -запит для девайса в body і шрифт всюди змінюється для будь-якого пристрою В оформленні сайту набір стилів і розмір шрифту відіграє дуже важливу роль. За оцінками експертів найбільш зручним для сприйняття є шрифт в розмірі 12-16 пікселів. Для заголовків можна використовувати більш масштабні шрифти.- Блок з текстом повинен мати ширину в 40-50 %.- Між абзацами відстань повинна становити не більше, ніж півтори величини шрифту.- Для дрібного шрифту необхідно використовувати величину не менше 10 пікселів, для великого 12-16пікселів.- Міжрядковий інтервал повинен становити 140-150 % від величини самого шрифту. Дизайн у браузері Багато розробників та дизайнерів знають, що відображення сайтів в різних браузерах відбувається по- різному. Особливо це стосується шрифтів. Нижче показано, як 5 популярних браузерів відображають шрифти по -різному. Типи шрифтів Шрифти діляться в основному на 2 частини: із зарубками(засічки) і без зарубок(без засічок).Наприклад, шрифти Serif є із зарубками і додатковими деталями в кінці. Sans serif вже без зарубок і інших додаткових деталей.Було доведено, що шрифти без зарубок легше читати на веб сторінках, так як зарубки роблять текст більш жорстким, але зворотний ефект в роздрукованому тексті. Шрифти із зарубками добре використовувати в заголовках, так як вони надають деякий акцент.Крім того що потрібно вибрати шрифт із зарубками або без них, потрібно добре підібрати розмір, так як малий розмір шрифтів дуже важко читати а занадто великий займає багато місця і читач взагалі не може зрозуміти що до чого. ­­­ ­Безпечні шрифти Напевно ви не раз чули про безпечні або стандартних шрифтах. Це група з невеликої кількості шрифтів, які доступні на більшості комп'ютерів. Вибираючи шрифт з групи безпечних, забезпечить вам кращий контроль над тим, що ваш текст буде добре читабельним у всіх браузерах та операційних системах. До групи безпечних шрифтів відносять такі шрифти як Arial, Times New Roman, Verdana, Tahoma, Georgia та інші. Колір Також потрібно завжди пам'ятати, що в типографіці повинен бути контраст. Коли контрасту мало, знижується читабельність тексту, після чого відвідувач, ще не дочитавши сторінку, може закрити сайт. Рекомендується для основної контекстної інформації на білому фоні використовувати темно-сірий колір тексту,а не чорний (це зменшує контрасність і різкість) Різниця між текстом і яскравістю фону має складати - 75-90 %. Приклади сайтів з креативним дизайном і типографікою
___________________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ Леттерінг в дизайні Які емоції може викликати колір? Давайте подивимося на деякі готові рішення. червоний В основному пов'язаний з азартом, сміливістю і бажанням. Червоний колір любові, сили, енергії, лідерства і хвилювання. Це сильний колір, і ви повинні знати про деякі його негативних емоціях: небезпека, тривога.

блакитний Терпіння, мир, спокій, надійність, любов, стабільність.. Це пов'язано зі стабільністю і глибиною, професіоналізмом, довірою.­

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

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

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

зелений Колір гармонії, природи, зцілення, життя, харчування і здоров'я, відродження нового, молодість. Крім того, часто пов'язаний з грошима.

коричневий Колір релаксації і впевненості. Коричневий означає приземленість, природу, довговічність, комфорт, надійність.

сірий Викликає почуття серйозності, консерватизму і традиціоналізму. Збуджує відчуття чистоти і невинності

рожевий Висловлює ніжність, романтичність, жіночність, пасивність, прихильність, виховання, слабкість.

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

.

білий Білий пов'язаний з чистотою, простотою, свіжістю, добротою, невинністю.

Приклади вдалого поєднання кольорів http://color.romanuke.com/

Дата добавления: 2014-12-16