07 Сен

6 Оформление текста

Содержание

6 Оформление текста

6.1 — Значение тега title

6.2 — Мета-тег description

6.3 — Мета-тег Keywords

6.3 — Перелинковка сайта

6.4 — Фотографии и видео на сайте

6.5 — «Фишки» в оформлении текста

Есть много вещей которые пригодятся, когда Вы, форматируете текст на Вашем веб-сайте. Эта статья предоставит Вам некоторые основные условия и методы.  А затем раскроет  в общих чертах 7 простых правил, которые помогут Вам максимально использовать текст на своем сайте.

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

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

Типы шрифтов

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

  • У шрифтов Serif есть небольшие флаги в концах каждого удара. Шрифты Sans этого не делают, а декоративные шрифты могут или не могут  иметь их.
  • Шрифты Serif обычно выглядят традиционными, в то время как sans-шрифты выглядят современными.
  • Шрифты Serif являются обычно самым читабельным на печатной странице, в то время как sans-шрифты лучше всего смотрятся на экране монитора.
  • Декоративные шрифты изредка выглядят сумасшедшими –  по этому используйте их экономно!
Serif Sans Serif Decorative

Определение шрифтов для веб-страниц

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

Всегда была — хорошая идея, определить список дополнительных шрифтов на всякий случай. Обычно мы видим такой код:

body {font-family: verdana, arial, helvetica, sans-serif;}

Если verdana будет доступна на компьютере пользователя, то основной текст будет показан в шрифте verdana. Если verdana  будет не доступен, то браузер будет просматривать те шрифты которые поддерживает Ваш компьютер, к примеру Arial. И если в случае, когда  —  браузер не может найти ни один из шрифтов, по умолчанию браузер будет использовать шрифт Sans Serif, определенный на компьютере пользователя. Универсальные ключевые слова — «шрифт», «Sans — Serif», «курсив», «fantasy» и «monospace».

7 простых правил:

Правило № 1: Не используйте больше чем один шрифт от той же самой семьи.

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

Verdana with Bitstream Vera Sans Verdana with Georgia

Это правило идет дважды для декоративных шрифтов, и трижды для очень драматических декоративных шрифтов, таких как  используемый ниже:

Правило № 2: Не используйте Times New Roman, никогда.

Фактически, как новичок, Вы хотите избегать использование шрифтов Serif в сети . Как мы упомянули ранее, шрифты Serif являются лучшими для чтения на печатной странице. В сети они обычно не смотрятся так хорошо. Иногда, такой шрифт как Джорджия или Garamond может улучшать Ваш дизайн, но Times New Roman (или Times) почти всегда выглядит плохо.

Правило № 3: Не стоит сверхформатировать!

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

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

Правило № 4: Все повторяется дважды для ссылок.

Как только Вы изучаете немного CSS, заманчиво будет, применить все виды различного форматирования к Вашим связям. Вы можете дать им фоны и границы, и заставить их всех измениться на mouseover! Это не хорошая вещь? Ну, нет так нет. Ссылки должны стоять из главного текста, но они не должны выглядеть нестандартно. Применение слишком большого форматирования к связям может сделать их нечитабельными, или отвлечь пользователя от чтения остальной части статьи.

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

Правило № 5: Не сосредотачивайте текст.

Сосредоточенный текст  работает хорошо, только в печати, но это очень редко выглядит хорошим на экране монитора. Особенно это плохо для параграфов. Все это вводит в  напряжение читателя и делает Ваш текст, сложным для чтения. Например:

Сосредоточенный:

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

Не сосредоточенный:

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

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

Правило № 6: Удостоверьтесь, что текст легко прочитать.

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

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

Правило № 7: Не используйте тег <font> !

К сожалению, есть все еще много обучающих программ HTML , которые были написаны много лет назад. С тех пор <font>  был заменен Каскадированием Stylesheets, известного как CSS или stylesheets. CSS позволит Вам контролировать все форматирование шрифта для Вашего сайта в одном центральном местоположении. Вместо того, чтобы использовать теги шрифта вокруг каждой части текста, Вы просто сделаете несколько простых деклараций в своем файле CSS и альте! Привлекательные шрифты для Вашего сайта, которые последовательны и легки в поддержке.

В заключение: Есть много вещей, которые Вы должны рассмотреть, форматируя текст для Вашего веб-сайта. Лучшая вещь сделать это, когда Вы должны сохранять вещи максимально простыми. Используйте шрифт Sans Serif для основного текста, теги <strong> и <em> для акцента, также Ваш CSS, чтобы сделать заголовки немного больше, чем основной текст. Если Ваше форматирование будет чистым и простым, то для людей будет легко прочитать Ваш текст!

Перейти Перейти

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

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

+ 30 = 36