Шрифты для сайтов. Советы и рекомендации веб-мастерам.

Шрифты для сайтов. Советы и рекомендации веб-мастерам.

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

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

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

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

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

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

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

Основные принципы и рекомендации:

Используйте обычный текст при создании текста.

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

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

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

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

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

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

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

Используйте каскадные таблицы стилей для оформления текста.

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

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

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

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

Настройка основного размера шрифта должна осуществляться пользователем.

Типографские правила указывают на то, что оптимальный размер шрифта для обеспечения читаемости составляет 10-12 пунктов. Печатные документы обычно оформляются в соответствии с этими правилами, что вполне удовлетворяет большинство читателей при использовании документов в стандартных для чтения условиях. Для читателей с особыми потребностями существуют такие вспомогательные средства для чтения, как очки и устройства для увеличения документа или издания с крупным шрифтом.

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

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

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

Вывод. Настройки оптимального размера шрифта должны осуществляться пользователем. Размер основного текста страницы должен максимально легко изменяться в соответствии с установками пользователя.

Размер остальных текстовых элементов должен соответствовать размеру текста.

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

Эти визуальные подсказки помогают пользователям Интернета понять структуру информации на странице.

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

При применении таких относительных измерений, как ключевые слова (smaller, lager), процентные отношения (90%, 110%), или em (0,8 em, 1,2 em) для установок вариантов размеров шрифта размер основного текста определяется установками пользователя, а размер остальных элементов изменяется в соответствии с ними.

Например, если пользователь установил размер шрифта 16 пунктов, а мы используем для определения заголовков ключевое слово «lager», размер отображаемых заголовков будет составлять приблизительно 18 пунктов. Данный метод отражает иерархию информационного содержания страницы и одновременно дает пользователям возможность просматривать страницу с читаемым размером текста.

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

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

Создание гибкой Web-страницы, которая может быть настроена в соответствии с требованиями пользователя, — намного более сложная задача, чем создание страницы с фиксированным дизайном. Одно из самых заметных отличий — расплывчатость конечного результата: печать предлагает документ с единственно возможным видом.

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

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

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

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

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

Счетчик