Секреты создания правильной типографики для сайта

Сейчас мы с вами разберем очень важную тему в веб-дизайне. На ней спотыкается большинство всех начинающих. Эта тема — типографика. Вот в этой статье мы рассмотрим все секреты хорошей типографии. Именно они в дальнейшем помогут вам создать классный текст в веб-дизайне. Здесь я вам дам ценные советы по выбору шрифта для сайта. Также расскажу, как выравнивать текст, для чего нужны подзаголовки, списки, цвета и так далее. Итак, давайте приступим к рассмотрению подобного вопроса! 

Выбор шрифта

Правильно выбирайте шрифт.

Вначале своей работы очень многие вебмастера допускают большую ошибку. Они выбирают для своего дизайна сайта совсем неподходящие шрифты. К примеру, мы делаем какой-то бизнес сайт. Конечно же, в нем должно быть все четко, конкретно и структурировано. А мы, увидев какой-то новый красивый шрифт с разными завитушками или еще чем-то похожим, тут же стараемся применить его на своем сайте или блоге. Мы забываем о том, какая цель у сайта. После этого гармоничность и единство стиля сразу же теряются. В итоге, получается непонятно что.

Поймите, что на большинстве сайтов, даже самые красивые и оригинальные шрифты будут просто выпадать из общей картины. Это ухудшает данную типографику. Такими шрифтами стоит пользоваться с высокой осторожностью. К сожалению, главная беда у таких вот оригинальных шрифтов с разными красивыми завитушками — это большая нечитабельность текста. Если вы будете использовать их на каких-то информационных сайтах, то вы просто будите «насиловать» своих посетителей. Читать такой текст довольно трудно и удобства такие шрифты не прибавляют.

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

Шрифт не должен быть большим или маленьким.

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

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

Рекомендую вам использовать шрифт 12 или 14 кеглей. На информационных порталах не советую ставить больше 12, потому что там много текста. А вот если есть какие-то промо-сайты или сайты-визитки можете поставить и 14 кеглей. Конечно же, заголовки не стоит делать такого размера. Их нужно делать намного больше. Однако тут стоит ориентироваться по самому дизайну. Ну, чтобы заголовок вписывался в общую картину. Большинство вебмастеров ставят заголовки в 18 — 72 кеглей. В общем, всегда учитывайте размер текста на своем сайте, чтобы он был оптимальным для чтения, не слишком маленьким (чтобы глаза не уставали) и не слишком большим (чтобы не напрягало).

Выбирайте шрифт, который 100% есть на компьютерах всех пользователей.

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

Да, сейчас есть технология CSS, позволяющая подгружать шрифт с сервера, не устанавливая его на компьютер. Однако опять же, здесь вам нужно знать CSS стили, а это для новичков дополнительная головная боль. Здесь вы можете либо выучить таблицу стилей, либо просто использовать безопасные шрифты, которые изображены у меня на рисунке. Второй вариант предпочтительнее, так как вы должны делать дизайн сайта для всех пользователей, чтобы всем было удобно, а не только некоторым людям. Можно использовать шрифт Verdana для текста, а шрифт Impact для заголовка (он выделен жирным и будет неплохо привлекать к себе внимание).

Выравнивание текста

Очень важно в информационном дизайне сайта придерживаться одного стиля выравнивания, так как правильная типографика также характеризуется хорошей работой со своим текстом. Если вы планируете создать информационный сайт или сайт, где люди будут много читать, то лучше делать выравнивание по левому краю. Так будет намного лучше и удобнее для читателя. Иногда, конечно же, необходимо выравнивать текст по правому краю. Это стоит делать, если количество текста небольшое. Если объем текста немаленький, то читать его с правым выравниванием будет просто невыносимо. Гораздо легче читается по левому краю.

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

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

Заголовки и подзаголовки

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

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

Разделение текста абзацами

Это делать нужно обязательно. Думаю, вы наверняка натыкались на километровые тексты, от которых быстро устаешь. И устаем мы потому, что в таких текстах нужно постоянно быть сосредоточенным, чтобы не потерять строчку, на которой читаешь. Все это отнимает много сил. Чтобы было легче и приятнее читать статьи, каждые 4-8 строчек разделяйте абзацами. Так информация будет восприниматься гораздо легче.

Построение списков

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

Оптимальное количество шрифтов

Не используйте на странице больше трех шрифтов. Если использовать больше трех разных шрифтов, то единство стиля будет теряться, и информационный дизайн перестанет быть гармоничным. Лучше взять три шрифта и менять у них размер, цвет, наклон, жирность и подчеркивание, чем, если взять 5 — 7 разных шрифтов и с ними ничего не делать. Для большинства сайтов 2 — 3 шрифта вполне хватает. Перегружать сайт массой различных шрифтов — это опять же, издевательство над своими читателями.

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

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

Выбор подходящих цветов

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

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

Самый оптимальный вариант уже давно придуман — это черный текст на белом фоне. Также неплохо сочетаются темно-коричневые и темно-серые тексты. Яркие цвета используйте только в заголовках для привлечения внимания. Для подбора цвета в заголовках, учитывайте общую гамму сайта.

И еще один небольшой секрет, как сделать так, чтобы текст всегда смотрелся выразительно, не зависимо, какой под ним фон. Имеется в виду, чтобы текст был читабельным, чтобы он не был тусклым. Все, что для этого вам нужно — это просто определить, какой у вас фон. Если фон темный, то текст нужно делать светлым. Если фон светлый, то текст делаем темным.

Регулировка расстояния между буквами

Нужно регулировать расстояние между буквами, то есть регулировать керлинг. Бывают такие шрифты, в которых расстояние между буквами может быть разное. Регулируется керлинг в фотошопе. Вверху программы найдете кнопку (1), потом откроется меню и жмите на кнопку (2). Вы увидите шкалу регулировки расстояния.

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

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