web master | Текстовое оформление web-страниц
Главная » Текстовое оформление web-страниц
    РейтингРейтингРейтингРейтингРейтинг

Текстовое оформление web-страниц.

Содержание:
  • § 1. Шрифт для основного текста
  • § 2. Размер шрифта
  •         2.1. Правильный размер шрифта на android
  • § 3. Верстка текстов 
  • § 4. Выравнивание текста

§ 1. Шрифт для основного текста

Шрифты  имеют общие стилевые особенности и различаются начертанием, насыщенностью, углом наклона знаков и т.д.

Пример гарнитуры - Arial. Семейство Arial включает в себя такие шрифты: Arial Normal, Arial Narrow, Arial Black, Arial Rounded, а также курсивные и полужирные варианты этих шрифтов, иначе - прямые, курсивные и полужирные начертания.

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


§ 2. Размер шрифта

Для основного текста размер шрифта должен не менее 12 пунктов. В России 1 пункт равен 1 0,3759 мм, а в США - 1/72 дюйма или 0,3528 мм (именно эта величина испол: при компьютерном наборе).

Рисуя макет в Adobe Photoshop, вы устапавливаем размеры в пунктах (points), и позднее НТМL-верстальщик должен придержив верстке выбранных вами размеров. И хотя пользователь при желании может изменить шрифт в браузере, лучше изначально не мучить его мелкими буквами. 

Буквы не должны слипаться. Размер шрифта для заголовков и акциденций жестко не регламентируется. Если вы используете несколько уровней заголовков, размер их шрифта, меняться от большего к меньшему.

 2.1. Правильный размер шрифта на android

Чтобы Браузер  на андроиде не менял размер шрифта на сайте так как ему хочется, к примеру:

 

то нужно добавить в чанк HEAD вот это:

<meta name="viewport" content="width=device-width>

вот что получится:


§ 3. Верстка текстов

Набор и верстка текстов на сайте - дело редактора или контент-менедже веб-дизайнера. 

При верстке контента, стоит учесть, что текстовая информация  должна легко читаться, текст должен легко «сканироваться» посетителями. Например, в поисках нужной информации,посетитель вряд ли  прочитает его целиком: чаще всего взгляд останавливается на заголовках, маленьких абзацах, списках или, наконец, выделенных словах.


§ 4. Особенности верстки веба

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

Выделение заголовков

Разделите весь текст на несколько небольших разделов, дайте им название, заключите его в тег, (например h2, h3,h4) и пропишите стили в css, чтобы они действительно выделялись. У каждой страницы на сайте должен быть свой заголовок (h1)

Списки

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

Межстрочный интервал

При разработке сайта необходимо представлять самого себя в роли посетителя. Тогда вы поймете, что никто не будет читать «слипшийся комочек» текста. Пусть лучше появится прокрутка, но человек будет четко различать строки, а поможет вам в этом свойство line-height.

Абзац и интервал между ними

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

Шрифты

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

Текст тем самым выглядит аккуратнее и лучше воспринимается!

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

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


css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!