Back to Top
Font size: +

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


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

 icon-sort-alpha-asc Выбор шрифта

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

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

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

 icon-text-height 

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

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

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

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

Выбор шрифта для правильной типографики

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

 icon-align-left Выравнивание текста

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

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

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

 icon-h-square Заголовки и подзаголовки

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

Веб-типографика для сайта

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

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

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

 icon-list-ol Построение списков

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

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

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

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

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

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

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

Правильная типографика нуждается в подборе цвета

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

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

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

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

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

 

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 

 
 

Комментарии 6

  • Наталья Самолюк

    На сайте лучше остановиться свой выбор на двух максимум реже на трех гарнитурах иначе получится куча мала ни о каком стиле уже речи быть не может. Гарнитура по возможности должна быть без засечек. Текст будет тяжело читать.

    Ответить
    • Павел

      На больших объемах текста как раз таки наоборот, рекомендуется использовать гарнитуру с засечками, для легкости чтения.

      Ответить
  • Лакуна

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

    Ответить
    • Сергей Стеклов

      Да, ошибки здесь есть. Просто, когда я создал этот блог, то первые статьи у меня шли не самого лучшего сорта. Все мы учимся и не у всех все сразу получается! Сейчас я потихоньку редактирую старые записи. У меня их много и на это тоже нужно немалое количество времени.
      На счет понимания. Что тут непонятного? Я все расписал, все разложил по полочкам. Не понимаю, что тут сложного?
      И прежде чем критиковать меня за ошибки, для начала могли бы выявить их у себя в сообщении. Их у вас не так уж и мало.

      Ответить
  • Ольга

    Сергей, спасибо вам за то, что делитесь своим опытом! Не обращайте внимания на людей, которым дай только по-критиковать. Я начинающий вэб-дизайнер, мне очень ценна ваша информация.

    Ответить
  • Alex Ohromenko

    Вот еще секрет типографики от меня: кавычки (имеются ввиду «лапки») — это зло. Просто лапки ( „“ ) приняты в английском языке, а ёлочки ( «» ) в русском :-)

    Ответить

Добавить комментарий Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 

Шумеры
Сброс пароля в Cisco Catalyst 2960