.

Безупречный дизайн шрифта

Выбор шрифтов, удобных для чтения с экрана У Разница между HTML- и графическим текстом У Создание простого графического заголовка У Использование HTML для выделения текста У Встроенные и внешние таблицы стилей возможно, именно выбор шрифта лучше, чем все остальные элементы сайта, говорит об уровне ваших способностей в графическом дизайне. Люди, у которых еще нет навыков дизайна, как маленькие дети в кондитерской, стремятся попробовать все шрифты, которые доступны в системе. Однако следует тщательно подбирать шрифты, так как они могут оказывать значительное влияние на восприятие вашего Web-сайта пользователями. Среди всех графических элементов Web-сайта наибольшее впечатление производят именно шрифты. Шрифты имеют сверхъестественную способность заставлять пользователей перечислять прилагательные, которые описывают ваш сайт, например “веселый”, или “серьезный”, или, что еще хуже, — “непрофессиональный”.

В Web-дизайне вы работаете с двумя разными видами текста.

HTML-текст составляет около 90% всего текста Web-сайта, именно с ним вы чаще всего работаете.

У Графический текст в действительности является изображением, которое вы создаете с помощью программы Fireworks или Photoshop.

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

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

Верстальщики имеют роскошную возможность работать со всеми возможными стилями и размерами шрифтов. Дело в том, что они могут при распечатке на бумаге задать высокое разрешение (большое число точек на единицу длины), что позволяет легко разглядеть детали даже при крайне маленьком размере шрифта. Совсем по-другому обстоит дело с изображениями на мониторе компьютера. Минимальная точка на мониторе называется пикселем. Размер пикселя равен 1/72 дюйма (или 72 точкам на дюйм) - без линейки видно, что это совсем мало в сравнении со стандартными значениями разрешения принтера (150 или 300 точек на дюйм).

Например, взгляните на образец шрифта, представленный 8.1. Этот текст отформатирован на компьютере жирным 10 кеглем. Можно увидеть, что каждая буква состоит всего лишь из нескольких пикселей. Такое небольшое количество пикселей делает текст неуклюжим и неудобным для чтения, особенно при увеличении, как в данном случае. Шрифт размером 10 пунктов обычно используется для надписей на визитных карточках. Очевидно, что то, что хорошо смотрится на визитных карточках, не подходит для просмотра на экране компьютера. Конечно, какие-то шрифты другого стиля при том же размере смотрятся лучше на экране, чем другие, но в целом ситуация не меняется.

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

Как правило, темный текст на светлом фоне выглядит более отчетливо, чем наоборот. Это правило сохраняется для Web-дизайна, поэтому если на вашей Web-странице много текстовой информации, выбирайте светлый фон с темным текстом для хорошего контраста.

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

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

Большие значения межстрочного интервала хорошо смотрятся только в небольших текстовых блоках. Не следует применять такой интерлиньяж для основного текста всей страницы. Вы можете использовать большой интерлиньяж для выделения в тексте какого-либо параграфа или создания врезки в основном тексте (рис. 8.3).

S Постарайтесь ограничить ширину каждой колонки до 12,5 см. Из-за того что размер Web-страницы больше по горизонтали, чем по вертикали, зачастую возникает желание сделать каждую строку текста как можно длиннее (на всю страницу), чтобы вместить как можно больше информации до линии перегиба. (До линии перегиба— т.е. в пределах первого "жрана страницы в браузере.) Однако при этом возникает проблема при чтении с поиском следующей строки. Кроме того, вам придется крутить головой из стороны в сторону. Ограничение ширины каждой колонки размером до 12,5 см позволяет быстро пробежать глазами страницу, не ошибаясь при переходе со строки на строку.

Наиболее и наименее предпочтительные шрифты для Web-страниц

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

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



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×