Одна з найбільш часто зустрічаються бід дизайну - це проблема с.

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

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

Правило 1. Чим менше шрифтів, тим краще

Одна з найбільших помилок, які роблять дизайнери, полягає в використанні занадто великої кількості шрифтів і / або їх стилів. Постарайтеся знизити їх до двох або трьох. Тобто, основний текст повинен бути одного шрифту і розміру.

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

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

Правило 2. Слідкуйте за розрядкою

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

Правило 3. Правильне вирівнювання

Будь ласка, не вирівнюйте все по центру (якщо це не спеціальний дизайнерський хід). Подумайте про використання сітки. Адже на сторінці все взаємопов'язане. Використовуйте напрямні і розміщуйте згідно з ними об'єкти. Чи не розкидайте об'єкти по кутах сторінки так як ніби ви не змогли вирішити, де їх розмістити.

Правило 4. Поменше декоративних шрифтів

У вас є красиві декоративні шрифти? Чудово! Але це зовсім не означає, що необхідно використовувати їх для тексту абзаців. За декоративними шрифтами, найчастіше стоїть, історія або вони застосовуються в конкретному випадку, наприклад, для заголовка або назви. Часто, чим простіше, тим краще, тому такі шрифти як Helvetica так популярні.

Правило 5. Розмір має значення

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

Правило 6. Слідкуйте за читабельністю

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

Правило 7. Правильно підбирайте кольори

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

Правило 8. Відповідна угруповання

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

Правило 9. Достатній інтерліньяж

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

Правило 10. Стежте за кернингом

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

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

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

Понад 95% інформації в Інтернеті зберігається в письмовому вигляді.

Хороша типографіка - це запорука легкодоступною інформації, в той час як при поганій типографике доводиться прикладати зусилля для розуміння тексту. Як зазначає Олівер Райхенштайн в статті «Веб-дизайн на 95% складається з типографіки»:

Оптимізація типографіки - це оптимізація читабельності, доступності, зручності використання (!) І досягнення графічного балансу в цілому.

1. Використовуйте мінімальна кількість шрифтів

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

Щоб запобігти подібній ситуації, намагайтеся звести кількість використовуваних шрифтів до мінімуму.

В цілому, зведіть кількість шрифтів до мінімуму (двох більш ніж достатньо, часто вистачить і одного) і дотримуйтеся використання одних і тих же на всьому веб-сайті. Якщо ви вирішите працювати з більш ніж одним шрифтом, переконайтеся, що сімейства шрифтів підходять один одному з точки зору ширини букв. Погляньте на приклад, наведений трохи нижче. У комбінації Georgia і Verdana (зліва) є загальні характеристики, Що дозволяє їм гармонійно поєднуватися один з одним. Візьмемо для порівняння комбінацію Baskerville і Impact (праворуч). «Великоваговий» Impact пригнічує свого «Засічна» напарника.

Переконайтеся, що сімейства шрифтів підходять один одному з точки зору ширини букв

2. Намагайтеся використовувати стандартні шрифти

В сервісах зі шрифтами (наприклад, Google Web Fonts або Typekit) можна знайти багато цікавих, які додадуть у ваш дизайн щось нове і незвичайне. До того ж, ними дуже легко користуватися. Візьмемо, наприклад, Google:

1. Вибираєте будь-який шрифт. Скажімо, Open Sans.
2. генеруєте код и вставляєте в

Свого HTML.
3. Готово!

Але що може піти не так?

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

Звичайно найкращим виходом буде використання системних шрифтів (Arial, Calibri, Trebuchet, etc.). Винятком може стати необхідність дотримуватися якихось шрифтів, які задав сам клієнт: наприклад, для брендингу або для створення чогось незабутнього. Пам'ятайте, що хороша типографіка впливає на прочитання тексту, а не на візуальне сприйняття шрифту.

3. Обмежте довжину рядка

Правильно підібране кількість знаків на одному рядку - це ключ до легкості прочитання вашого тексту. Вибираючи ширину тексту, ви повинні орієнтуватися не на ваш дизайн, а на ясність і чіткість написаного. Зверніть увагу на цю раду від Baymard Institute:

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

Якщо рядок занадто коротка, очам доведеться часто міняти фокус, що збиває темп читання. Якщо ж рядок занадто довга, очам читача, навпаки, доведеться довго фокусуватися на написаному. Фото: Material Design

Що стосується мобільних пристроїв, дотримуйтеся діапазону в 30-40 знаків в рядку. Нижче представлений приклад двох сайтів, відкритих на мобільних пристроях. На одному рядок містить від 50 до 75 символів (краще кількість знаків у рядку для друкованого тексту і дозволу комп'ютера), а на другому ми бачимо оптимальні 30-40 знаків.

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

4. Вибирайте гарнітури, які добре читаються в будь-якому розмірі

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

Roboto від Google

Переконайтеся, що гарнітура, яку ви вибрали, легко читається на маленьких екранах! Намагайтеся не використовувати курсивні шрифти, наприклад, Vivaldi (на зображенні нижче): хоч вони і виглядають красиво, зрозуміти написане іноді буває складно.

Використання шрифту Vivaldi ускладнить прочитання тексту на маленькому екрані

5. Використовуйте шрифти з чіткими літерами

Багато шрифтові гарнітури створені таким чином, що іноді буває дуже легко сплутати схожі букви, особливо «I» і «L», написані латиницею (як на зображенні нижче). У деяких же букви розташовані так близько один до одного, що поєднання «r» і «n» можна прийняти за букву «m». Тому, вибираючи шрифт, протестуйте його в різних контекстах. Так ви зможете переконатися, що з-за шрифтової гарнітури у читача не виникне проблем з розумінням тексту.

6. Уникайте капс

Текст, написаний капс - або одними великими літерами - підходить для ситуації, де користувач не втягується в процес читання (наприклад, в абревіатурах або логотипах). Але в інших випадках не примушуйте ваших читачів текстом, написаним великими літерами. Як зазначає Майлз Тинкер в своїй відомій праці «Legibility of Print», такий текст читається набагато повільніше тексту, написаного малими.

7. Не зводите межстрочное відстань до мінімуму

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

Правильне межстрочное відстань сприяє кращої читабельності тексту. Фото: Microsoft

За словами Дмитра Фадєєва, правильно підібране відстань між абзацами збільшує розуміння прочитаного на 20%. Уміння дизайнера працювати з білим простором дозволяє користувачам засвоювати зміст тексту цілком без упущення якихось деталей.

Зліва: Текст написаний практично впритул. Справа: Правильне межстрочное відстань сприяє читабельності тексту. Фото: Apple

8. Переконайтеся, що у вас все в порядку з колірним контрастом

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

• Невеликі тексти повинні мати коефіцієнт контрасту мінімум 4,5: 1 по відношенню до фону.
• Великі тексти (від 14 розміру напівжирним шрифтом / від 18 розміру і вище стандартним шрифтом) повинні мати коефіцієнт контрасту мінімум 3: 1 по відношенню до фону.

Цей текст не відповідає стандарту кольорового контрасту, Тому його важко розрізнити на тлі.

Цей текст відповідає стандарту кольорового контрасту, тому він читається легко.

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

9. Намагайтеся не використовувати червоний або зелений колір в тексті

Дальтонізм - явище досить поширене, особливо серед чоловіків (8% чоловічого населення - дальтоніки). Тому, крім кольору, бажано використовувати якісь інші знаки для виділення важливої \u200b\u200bінформації. Також намагайтеся не вдаватися до червоного і зеленого кольору, так як саме ці кольори частіше за все не розпізнаються дальтоніками.

10. Намагайтеся не використовувати мерехтливий текст

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

Не використовуйте мерехтливий текст!

висновок

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

Типографіка повинна шанобливо ставитися до контенту

Це має на увазі, що читач ніколи не повинен відчувати дискомфорту при прочитанні тексту.

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

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

При створенні макета веб-сторінки дуже важливим є вибір шрифту. Природно, краще всього використовувати шрифти з стандартного набору Windows або Mac. Але часом цього набору не вистачає що б втілити в життя задумку дизайнера, і тут все навантаження лягає на плечі верстальника. На щастя, Google Web Fonts пропонує дуже елегантне рішення цієї проблеми.

Ще існують такі терміни, як «вага» і кернінг. Всі вони можуть змінюватися за допомогою засобів CSS і бути застосовані до абзаців, заголовків або інших елементів тексту. Властивість «вага» шрифту визначає ступінь товщини ліній при зображенні. Це ряд значень від 100 до 900, де кожен номер вказує вагу, відповідний жирності накреслення. Нормальний шрифт "normal" відповідає номеру 400, напівжирний "bold" - 700. Кернинг - зміна інтервалу між літерами в залежності від їх форми. Це процес правильного розміщення символів, регулюючи відстані між ними, в результаті якого повинна бути досягнута гармонія. Хоча на кернинг багато особливої \u200b\u200bуваги не звертають, саме дрібниці допомагають досягти дуже хороших результатів.

порушення норм

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

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

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

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

Правильний вибір шрифту

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

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

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

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

Чіткість

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

Але все ж, якщо у вас виникло бажання використовувати, наприклад, Soda, Bored or Akka, то від цієї ідеї краще відмовитися. Якщо бажання все ж досить велика, то ці шрифти потрібно застосовувати помірно. Наприклад, в якості заголовка. Але потім основний текст повинен бути більш розбірливим. Це може допомогти створити динаміку в вашому сайті. І обов'язково потрібно пам'ятати, що використання таких шрифтів повинно бути гідністю дизайну, а не недоліком.

інформативність

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

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

Розміщення і розміри

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

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

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

колір

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

Вашими помічниками будуть контрастні кольори, а також використання ефектів, таких як strokes (обведення) і glows (світіння). Це допоможе зробити сайт більш привабливим і легким для читання. Потрібно вибрати колір, який змусить людей зупинитися і подивитися, а інформацію зробити домінуючою частиною дизайну.

висновок

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

типографіка відіграє ключову роль в веб-дизайні, за статистикою 95% вмісту сайтів становить текстовий контент. Шрифтове оформлення управляє настроєм і створює певну атмосферу при прочитанні текстового вмісту веб-сторінок.

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

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

CSS-властивості для правильної веб-типографіки

1. Сімейство шрифтів (властивість font-family)

Підбір шрифту починається з вибору гарнітури шрифту.

гарнітура - шрифт або кілька шрифтів, що мають стилістичне єдність накреслення. Складається з набору знаків (зазвичай - цифри, букви, знаки пунктуації, спеціальні символи, але може складатися так само виключно з неалфавітних знаків). Наприклад, гарнітура «Times New Roman» складається зі звичайного, курсивного, жирний і безлічі інших шрифтів цього сімейства.

Гарнітури можна розділити на дві основні категорії: із зарубками (Антіква і брускові шрифти) і без зарубок (Гротески).

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

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

У яких випадках можна використовувати кілька шрифтів:

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

Сервіс TypeTester для підбору шрифту

2. Поєднання шрифтів із зарубками і без зарубок

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

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

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

3. Колір шрифту (властивість color)

Колір надає тексту чіткість і виразність. Кольорові заголовки і невеликі акценти в тексті здатні привернути більше уваги, ніж текст чорного кольору.

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

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

При виборі кількості кольорів тексту переважно обмежитися двома досить контрастними кольорами (не рахуючи чорного і білого кольору). Чорний текст на білому тлі - це класика, досить контрастна.

4. Розмір шрифту (властивість font-size)

Розмір базового шрифту в браузері дорівнює 16px, а розмір заголовків встановлюється пропорційно розміру базового шрифту (h1 - 2em, h2 - 1.5em, h3 - 1.17em і т.д.).

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

На розмір тексту у вікні браузера впливає дозвіл монітора користувача: текст одного і того ж розміру на моніторі з великою роздільною здатністю здається менше, ніж текст такого ж розміру на моніторі з більш низьким дозволом.

Шрифти різних сімейств однакового розміру також можуть мати різний фактичний розмір.

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

5. Вирівнювання тексту (властивість text-align)

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

6. літери та міжсимвольний інтервал (властивості word-spacing і letter-spacing)

Міжбуквений інтервал впливає на читабельність тексту. Варіювання щільності тексту (ущільнений і розряджений текст) дозволить урізноманітнити темп сприйняття, добившись балансу текстової композиції сайту.

Шрифти із зарубками виглядають більш виразно при зменшеному значенні letter-spacing.

7. Міжрядковий інтервал (властивість line-height)

Оптимальне значення міжрядкового інтервалу в 1.4 - 1.6 рази більше розміру шрифту.

Також, не робіть великих відступів між заголовками і пов'язаним з ним абзацом.

8. Довжина рядка

У рядку для суцільного читання має міститися від 30 до 75 знаків (приблизно 7-10 слів на одному рядку). Чим ширше рядок тексту, тим більше повинен бути міжрядковий інтервал. Межстрочное відстань не повинна бути менше пробілу між словами.

9. Нарис шрифту (властивість font-style)

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

Властивість font-variant: small-caps; надає тексту друкарську вишуканість, перетворюючи текст таким чином, що всі букви відображаються малими прописними. Даний прийом підходить для невеликих фрагментів тексту.

10. Структура тексту і візуальна ієрархія

У структурі веб-сторінки виділяють наступні об'єкти:

• Логотип / назва сайту;
• Назви / заголовки;
• Заголовки другого плану;
• Основний текст;
• навігацію;
• Гіпертекстові посилання;
• Довгі цитати;
• Бічні панелі;
• Підписи / написи в таблицях, малюнках.

Кожен елемент списку являє собою фундаментальну частину сайту і це виправдовує необхідність його виділення.

В HTML існує шість рівнів заголовків, починаючи з більш важливого

і закінчуючи менш значущим

. Заголовок

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

Для більш легкого засвоєння текст потрібно розбивати на частини і для кожного розділу вибрати заголовок відповідного рівня. Чим вище рівень заголовка, тим більш значуща за змістом повинен бути розділ.

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

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

• Капітель;
• курсив;
• Напівжирне / жирне накреслення;
• Розмір;
• колір;
• Зміна гарнітури;
• Зміна положення знаків на смузі тексту (верхній і нижній регістр, відступи);
• Виділення знаків за допомогою графічних елементів - покажчиків, рамок, іконок і т.п.

Занадто сильне виділення не тільки надмірно акцентує увагу на якому-небудь фрагменті, а й ускладнює читання.

11. Безпечні шрифти

Windows fonts / Mac fonts / Font family

Arial, Arial, Helvetica, sans-serif

sans-serif

cursive

monospace

Georgia 1, Georgia, serif

sans-serif

Lucida Console, Monaco 5, monospace

sans-serif

serif

Tahoma, Geneva, sans-serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans-serif

Verdana, Verdana, Geneva, sans-serif

Symbol, Symbol (Symbol 2, Symbol 2)

Webdings, Webdings (Webdings 2, Webdings 2)

Wingdings, Zapf Dingbats

MS Sans Serif 4, Geneva, sans-serif

MS Serif 4, New York 6, serif

Arial, Arial, Helvetica, sans-serif

Arial Black, Arial Black, Gadget, sans-serif

Comic Sans MS, Comic Sans MS 5, cursive

Courier New, Courier New, Courier 6, monospace

Georgia 1, Georgia, serif

Impact, Impact 5, Charcoal 6, sans-serif

Lucida Console, Monaco 5, monospace

Lucida Sans Unicode, Lucida Grande, sans-serif

Palatino Linotype, Book Antiqua 3, Palatino 6, serif

Tahoma, Geneva, sans-serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans-serif

Verdana, Verdana, Geneva, sans-serif

Symbol, Symbol (Symbol 2, Symbol 2)

Webdings, Webdings (Webdings 2, Webdings 2)

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4, Geneva, sans-serif

MS Serif 4, New York 6, serif

1 Шрифти Georgia і Trebuchet MS поставляються разом з Windows 2000 / XP і включені в пакет шрифтів IE (та й взагалі поставляються з багатьма додатками від Microsoft), тому вони встановлені на багатьох комп'ютерах з операційною системою Windows 98.

2 Символьні шрифти відображаються тільки в Internet Explorer, В інших браузерах вони зазвичай замінюються на стандартний шрифт (Хоча, наприклад, шрифт Symbol відображається в Opera, а Webdings - в Safari).

3 Шрифт Book Antiqua практично ідентичний Palatino Linotype; Palatino Linotype поставляється з Windows 2000 / XP, а Book Antiqua - з Windows 98.

4 Зверніть увагу, що ці шрифту не TrueType, а bitmap, тому вони можуть погано виглядати з деякими розмірами (вони призначені для відображення в розмірах 8, 10, 12, 14, 18 і 24 pt при 96 DPI).

5 Ці шрифти працюють в Safari тільки в стандартному зображенні, але не працюють при виділенні жирним або курсивом. Comic Sans MS також працює жирним, але не курсивом. Інші Mac-браузери, здається, нормально емулюють відсутні у шрифтів властивості самостійно (спасибі Christian Fecteau за підказку).

6 Ці шрифти установлюються в Mac тільки при Classic-інсталяції

Поправив стару статтю про типографике, тим, хто не бачив - буде корисно для ознайомлення

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

Отже, ця стаття присвячена тим, хто загубився в океані типографіки. Ми поговоримо про основи типографіки, про те, які бувають шрифти і про структуру шрифтів.

Гарнітури проти шрифтів - в чому різниця?

Багато людей використовують слова «гарнітура» і «шрифт» як синоніми. Насправді це не одне і теж, зараз я поясню, чому.

гарнітура - це набір стилістично схожих символів, які можна писати / друкувати. Це цифри, букви, символи. шрифт - це більш вузьке поняття, котре визначається декількома факторами, наприклад, розміром і стилем. Вобщем, Arial - це гарнітура, а Arial Bold - це шрифт.

Класифікація

Шрифти можна розділити на кілька груп - із зарубками (serif), без зарубок (sans-serif), рукописні (script), акцидентні (display). Втім, є й інші види класифікації.

Шрифти із зарубками, Антиква (Serif)

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

У шрифтів із зарубками досить багато підтипів - наприклад, Old Style ( «Старий стиль» - так само їх називають humanist, гуманістична антіква) - найперші шрифти цієї класифікації, вони використовувалися аж в далеких 1400-х рр. їх характерна риса - що та частина символу, яка розташована під нахилом, робиться тонкої. Приклади шрифтів - Adobe Jenson, Centaur, і Goudy Old Style.

Transitional serifs (Перехідна антіква) - використовувалися в 1700-х роках. Сюди входять такі шрифти, як Times New Roman і Baskerville, а так само Caslon, Georgia, і Bookman. У них різниця між товстими і тонкими частинами букв більш помітна, ніж у Old Style, але менш помітна, ніж у Modern.

Modern serifs (Антиква нового стилю) - використовуються вже після 1700-х років, і мають сильний контраст між товстими і тонкими частинами символів. Сюди входять такі шрифти, як Didot і Bodoni

І наприкінці , Slab serifs (Брускові шрифти) - взагалі мають однакову товщину всіх ліній, і великі зарубки на кінцях

Рубані шрифти, Гротески (Sans Serif)

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

Ось 4 основні види рубаних шрифтів: Grotesque (Старий гротеск), Neo-grotesque (Новий гротеск), Humanist (Гуманістичний), і Geometric (Геометричний).
старі гротески - найперші, вони схожі на шрифти із зарубками, але без зарубок.
Наприклад, Franklin Gothic і Akzidenze

нові гротески мають спрощений, порівняно зі старими гротесками, вид. Дуже багато з найпопулярніших нині шрифтів це нові гротески, наприклад, MS Sans Serif, Arial, Helvetica і Univers.

гуманісти - більш каллиграфичностью, ніж всі інші рубані шрифти (тобто у них змінюється товщина ліній). До них відносяться, наприклад, Gill Sans, Frutiger, Tahoma, Verdana, Optima, і Lucide Grande - їх часто використовують в наповненні тіла сайту.

геометричні засновані на правильних фігурах, наприклад, «О» - це коло, і т.п .; вважаються найбільш сучасними рубаними шрифтами. Приклади - ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Рукописні (Script)

Рукописні шрифти базуються на почерку. Існує два різновиди таких шрифтів - формальні (formal) і кежл (casual). Формальні як ніби написані від руки, вони відбуваються з 17-18 ст. Деякі шрифти засновані на почерках відомих майстрів, таких, як George Snell і George Bickham. Як приклад сучасного шрифти можна взяти Kuenstler Script. Красивий і елегантний, він не підходить для основного тексту сторінки.

Кежл-шрифти - це більш сучасний варіант, зародився він в 20в. Він менш формальний, часто з жирної обведенням і з ефектом мазків пензля. До таких шрифтів відносяться Mistral і Brush Script.

Акцидентні шрифти (Display)

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

Неалфавітні шрифти (Dingbats)

неалфавітні шрифти - це ті шрифти, які взагалі не містять букв, але містять символи та орнаменти.

Пропорційні проти моноширинних

В пропорційних шрифтів символ займає стільки місця, скільки вимагає його природне написання. Наприклад, Times New Roman є пропорційним шрифтом. А ось у моноширинних шрифтів все символи однієї ширини. До таких шрифтів відноситься, наприклад, Courier New

настрій

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

Товщина і стиль

За товщиною бувають шрифти: light, thin, regular, medium, bold, heavy, або black.

Є три стилі шрифтів - italic, oblique, і small caps. Small caps зазвичай використовуються для заголовків.

Italic і oblique - взаємозамінні, хоча це різні стилі. Оblique - похилий варіант звичайних шрифтів. Щоб отримати його, досить скористатися функцією Free Transform-distort в Photoshop. А ось Italic - це вже окремий набір символів, який відповідає за похилий варіант написання шрифту.

структура шрифту

Кожен символ має якийсь набір характеристик, по якому можна визначити, як він поєднується з іншими шрифтами. Ось основні:

Лінія шрифту (baseline) - уявна лінія, на якій розташований текст. Іноді закруглені шрифти трохи відступають від лінії шрифту.

Лінія малих (meanline) позначає висоту більшості малих літер, зазвичай визначається по висоті літери «х». Звідси ж відбувається і поняття x-height.

Верхня лінія прописних (Cap) - висота великої літери «А».

На малюнку вище показано три загальні частини всіх букв.

Основний штрих, Штамб (Stem) - основна вертикаль кожного символу, в тому числі і похила.

Перекладина (Bar) - горизонтальна частина шрифту

Овал (Bowl) - закруглена частина шрифту.

Верхній виносної (Ascender) - стирчить вгору частина таких букв, як «d», «h», і «б».

Нижній внесений елемент (Descender) - стирчить вниз частина таких букв, як «p», «q» і «ф»

зарубки - відмінна риса шрифтів із зарубками). У одних шрифтів вони більш яскраво виражені, а у інших - менш яскраво.

Апаратура (Aperture) - позначає зазор у откритх символів, таких, як "A", "з" або "m"

Вухо (Ear) це декоративне доповнення символу, як, наприклад в букві "g" на прикладі вище.

З'єднувальний штрих (Hairline) це найтонша частина шрифту з зарубками.

Перекладина (Crossbar) - горизонтальна лінія, як, наприклад, в символах "A" і "H".

Крапля (Terminal) - кругле або овальне (каплевидної) закінчення штриха в малюнку деяких знаків шрифту.

Петля (Loop) буває тільки на деяких буквах "g" нижнього регістру, і може бути цілком закрита або частково закрита.

Шип (Spur) - крихітна зазубрінкамі на деяких буквах, наприклад, на "G".

Приєднання (Link) з'єднує верхню і нижню частину букви "g".

Спина (Spine) - центральна крива, яка є у літери "s".

Хвіст літери (Tail) - декоративна лінія, наприклад, на букві "R" або "Q".

Кінцевий елемент (Terminal, Finial) - закінчення штриха без зарубки

Заплічок (Shoulder) - закруглена лінія, яка відходить від основного штриха. (Чесно кажучи, на багатьох російських сайтах дають зовсім інше визначення цього поняття,)