Принципы типографики в веб-дизайне

 

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

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

Сегодня мы поговорим о некоторых правилах в типографике, соблюдение которых поможет вам создать гармоничный дизайн.

Основные правила и законамерности

1. Прежде все – не переусердствуйте с количеством. Существует негласное правило, что не стоит использовать на странице более трех шрифтов. Оно может нарушаться при некоторых обстоятельствах, например, так требует ваш замысел, или семейства данных шрифтов имеют нечто общее в начертании и потому смотрятся гармонично. Но не стоит пускаться в необдуманные эксперименты – некоторые сочетания шрифтов могут вызвать эстетический ужас у неподготовленных гостей сайта=).

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

2. Пробуйте искать баланс между смыслом текста или надписи и шрифтом, который вы используете. Конечно, лучше использовать нейтральные шрифты, которые подойдут к совершенно любой тематике. Не стоит использовать, например, Comic Sans для оформления сайта юридических услуг, это будет смотреться по меньшей мере несерьезно.

3.Продумайте, какой тип выравнивания вы будете использовать. Выравнивание по ширине не стоит применять, только если это не какой-то ваш замысел с конкретной целью. Такой тип выравнивания выглядит не очень презентабельно, так как текст будет расположен неравномерно, пробелы и отступы между буквами тоже будут варьироваться.
Лучший способ выравнивая – по левому краю. Нет ничего страшного в том, что концы строк окажутся на разном уровне, главное, чтобы строки начинались единообразно – так читать будет удобнее.

Если вам хочется большего разнообразия, используйте сетку и двигайтесь по направляющим. Но чрезмерно увлекаться и разбрасывать абзацы текста по всей странице в невнятном порядке тоже не стоит.
4. Многим людям кажется, что дизайн – это для того, чтобы было максимально «красиво». Иногда клиенты могут ставить в ТЗ требование, чтобы для текстов на сайте использовались декоративные шрифты. В этом случае будет лучше попробовать переубедить заказчика, используя вполне логичные доводы: информацию будет трудно воспринимать и взаимодействие с сайтом может быть затруднено. Всё-таки декоративные шрифты будут хорошо смотреться в заголовках, а не как основной текст, который сразу же станет тяжелым и нечитаемым.

5. Раз мы упомянули заголовки, продолжим эту тему. Размер шрифта влияет на восприятие тоже очень сильно. Крупные и жирные заголовки – хороший ход, но не стоит делать весь текст крупным шрифтом, это мгновенно придаст сайту дешевый вид. Соотносите размер шрифта с удобочитаемостью. Сайт с текстами, оформленными аккуратными и тонкими буквами, будет выглядеть более стильно и дорого, чем с огромными и аляпистыми.

6. Принцип читабельности должен быть возведен во главу угла. Если вы разместите темный текст на таком же темном фоне, это будет очень мрачно и атмосферно, но прочитать это смогут далеко не все. Выбирая цвета для фона и шрифта – тоже не стоит много фантазировать. Трудно придумать более хорошее сочетание, чем черный и белый. Разумеется, не надо упоминать, что кислотно-зеленый текст на красном фоне – плохая идея, если вы только не хотите разорить заказчика=).

7. Следите за таким показателем, как интерлиньяж. За этим красивым словом кроется расстояние между строками текста. Оно необходимо, чтобы глаз мог не перенапрягаться, а отдыхать в процессе чтения. Скученные строчки очень трудно и даже неприятно читать. Есть конкретные указания, как подобрать наилучший вариант: расстояние должно быть на два пункта больше, чем высота самих букв.

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

9. Кавычки – еще один момент, где можно сделать ошибку. Всего существует два вида: ёлочки и лапки. Ёлочки используются для цитат и названий. Лапки применяют в случае, когда нужно в них заключить всего одну букву или цифру. Потому что громоздкие ёлочки в таком случае смотрелись бы слишком массивно. Есть случай, когда лапки используются и для большего количества символов – когда речь идет о названии или цитате внутри цитаты.

10. Если вы хотите привлечь внимание к какому-то слову или словосочетанию в тексте, можно использовать различные способы акциденции. Самые популярные это: жирное начертание, курсивное начертание и подчеркивание.
Жирный шрифт – самый мощный способ, слова действительно будут очень сильно выделяться на фоне прочей массы текста. Курсивное начертание будет выглядеть более элегантно и ненавязчиво. А вот на подчеркивание лучше наложить табу, потому что уже по умолчанию подчеркивание используется исключительно для обозначения ссылок.

11. Переходя к более крупным образованиям, важно упомянуть блок текста. Человек во время чтения может уставать и на каких-то вещах взгляду сложнее фокусироваться, а на каких-то проще. Все эти моменты следует учитывать, если вы хотите получить читабельный текст.

12. Очень длинные строчки воспринимать тяжело, вспомните себя – можно множество раз терять первую строчку, начинать читать сначала и испытывать сильное раздражение. Оптимальная и часто рекомендуемая длина текстового блока 50-80 символов.

13. Чтобы текст воспринимался еще более гармонично и легко, можно использовать следующее правило – предлоги, союзы и слова от 1 до 3 букв не стоит оставлять на краю строчки – лучше будет перенести их на следующую.

14. Использовать отступы в начале строчки не обязательно, пора отойти от этой привычки, приобретенной еще в школе=). Для разделения текстовых блоков стоит использовать швейцарскую красную строку.
Сегодня мы поговорили о некоторых правилах, которых нужно придерживаться, когда вы работаете со шрифтами. Основные цели, которые вы должны преследовать, выбирая каждый конкретный шрифт для какой-либо задачи, это сделать текст максимально читаемым, ясным и полностью прозрачным для понимания.

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

Если вы хотели бы узнать больше о типографике — записывайтесь на наш курс по веб-дизайну.

 

Нужен сайт? Наша веб-студия поможет!