Рассмотрение шрифтового оформления

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

Шрифты, называют также "гарнитурами шрифтов" и используют для вывода текста, чисел, букв, и других символов. Называемые также "глифами", эти символы, буквы и цифры разбиваются по семействам (все связанные), стилю (курсив, нормальный, наклонный, и т.д.), варианту (нормальный или малый прописной), толщине (жирность), растяжению (уменьшенный или увеличенный тип по высоте или ширине) и размеру (по высоте или ширине в пунктах или пикселях). Типографика связана с размещением и внешним видом текста, поэтому она касается внешнего вида глифов и тем, как они размещаются на странице (столбцы, параграфы, выравнивание и тому подобное). Наиболее эффективным способом управления типографикой на странице Web является использование каскадных таблиц стилей (CSS).

Одним из первых шагов по окончательному оформлению Web-дизайна является решение о шрифтах (http://www.w3.org/TR/REC-CSS2/fonts.html), которые будут использоваться на Web-сайте. Многие исследования показывают, что множество гарнитур шрифта на Web-сайте может путать читателя. С другой стороны, сайт, который использует везде только один шрифт, кажется безвкусным. Потому я советую использовать одну гарнитуру шрифта для заголовков и подзаголовков и другую гарнитуру шрифта для основного текста, особенно если планируется добавить на сайт рекламу. Использование одного шрифта для заголовков и другого для основного текста на всем Web-сайте добавит сайту целостность, и позволит также читателю различать заголовки и основной текст при просмотре Web-страницы. Реклама добавит разнообразие, так как никогда невозможно знать заранее, какие гарнитуры или варианты гарнитуры рекламодатель может использовать в баннере или текстовой рекламе. Лично я обычно использую шрифт Verdana для основного текста и Times Roman или Georgia для заголовков, и я придерживаюсь использования этих двух шрифтов и их вариантов в течение всей моей карьеры Web-дизайнера. Гарнитуры шрифтов Times Roman или Georgia используют засечки, а шрифт Verdana засечек не имеет. Как вы скоро увидите, я решила оставить для основного текста шрифт Verdana, но так как логотип был создан с помощью Arial Black, я также использовала эту гарнитуру шрифта без засечек для всех заголовков. Иногда необходимо нарушать свои собственные правила, и эта компоновка предоставляет простой пример такого случая. Но сначала позвольте мне объяснить различие между двумя гарнитурами шрифтов и почему я придерживаюсь такого простого выбора типа.

О гарнитурах шрифтов или шрифтах

Существует четыре следующие основные типы шрифтов:

1. Шрифт с засечками (serif): Любая гарнитура шрифта, которая содержит завершающие штрихи, расширяющиеся или сужающиеся концы, или имеет реально отсеченные окончания (включая прямоугольные засечки). В ходе истории шрифт с засечками был выбран для печати основного текста, так как его легко читать на печатной странице. Но Web отличается от печати, и некоторые исследования (http://www.wilsonweb.com/wmt6/html-email-fonts.htm) по удобочитаемости шрифта (http://www.webaim.org/techniques/fonts/#readability) показывают, что некоторые шрифты без засечек читать легче, чем такие как шрифт, показанный на рисунке 10.1, когда он используется для основного текста на странице Web.

Рис. 10.1.  Пример типа шрифта с засечками, Times New Roman, нормального (не жирного и не курсива), размером 18 pt

2. Без засечек (sans-serif): Любая гарнитура шрифта, конечные штрихи которой не имеют никаких расширений, пересекающих штрихов, или других украшений. Хотя некоторые авторы (http://www.hgrebdes.com/typefaces/fontresearch.php) утверждают, что исследования по удобочитаемости шрифтов не вызывают доверия, я заметила, что эти сайты используют шрифт без засечек для основного текста. Даже статьи, которые утверждают, что гарнитуры шрифтов с засечками более удобочитаемы (http://www.linotype.com/2258-16905/aboutlegibility.html), используют шрифт без засечек в основном тексте своей Web-страницы. Поэтому в этом вопросе я придерживаюсь общего мнения — использую шрифт без засечек, такой как показан на рисунке 10.2, так как он стал традиционной гарнитурой шрифта основного текста для Web.

Рис. 10.2.  Пример шрифта без засечек, Verdana, нормального, размером 18 pt

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

Рис. 10.3.  Пример рукописного шрифта Staccato, размером 18 pt

4. Специальные шрифты, включая моноширинный: Единственным критерием моноширинного шрифта является единая фиксированная ширина всех глифов, аналогично тому, как может выглядеть машинописная страница. Другие шрифты могут иметь фантастический внешний вид, как показанный на рисунке 10.4 ниже, и эти шрифты используются единственно с декоративной целью. Моноширинные шрифты нашли свое применение на Web-сайте, особенно при выводе программного кода (http://www.lowing.org/fonts/). Эта гарнитура шрифта часто используется для такой цели, так как моноширинный шрифт четко показывает каждую букву и символ, используемые в коде.

Рис. 10.4.  Пример специального шрифта, Jokewood, размером 18 pt

Взгляд на изображения выше показывает, что не все типы шрифта создаются одинаковыми, даже если создаются одного размера в пунктах. Размер в пунктах определяет высоту букв, и некоторые шрифты будут больше при 18 пунктах, чем другие. Существуют также и другие различия, такие как расстояние между буквами и словами, или тот факт, что некоторые гарнитуры шрифтов, такие как Jokewood, не имеют букв нижнего регистра. Но легко можно видеть, что шрифты Jokewood и Staccato было бы трудно читать как основной текст. Эти шрифты могут найти применение в небольшой области, такой как заголовки или в рекламных объявлениях.

Один из моментов для рассмотрения состоит в том, что эти шрифты могут выглядеть по разному во всех браузерах, так как различные браузеры остаются по сути несовместимыми. Вы могли обратить внимание на мой комментарий выше, что "не все браузеры выводят одни и те же шрифты". Причина этой проблемы состоит в том, что не все операционные системы поддерживают одни и те же шрифты. Они могут поддерживать одни и те же шрифты, но вариант, толщина и другие факторы могут представляться по разному в том или ином браузере. В связи с этим для вывода Web-страницы можно использовать базовый шрифт (http://www.upsdell.com/BrowserNews/res_fonts.htm), или просто "serif" или "sans-serif". Можно также использовать базовое имя и имя выбранного шрифта и надеяться на лучшее, так как пользователи в некоторых случаях также имеют возможность изменить шрифт или то, как он выглядит.

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

Именно по этой причине, как Web-дизайнер, вы должны понять тот факт, что Web является — во всех отношениях — по сути пластичным форматом. При дизайне Web-сайта вы можете контролировать многое. Тип шрифта является одним из объектов, над которым вы имеете некоторый контроль, но только если вы сохраняете его как можно более простым. И именно это является причиной, почему я постоянно все эти годы использую шрифт Verdana для основного текста и Times Roman или Georgia для заголовков.

Помня об этом, дизайнеры шрифтов и программисты постоянно пытаются найти способы сделать шрифты более читаемыми и красивыми (http://brainstormsandraves.com/articles/typography/webfonts/). Поэтому принимайте сказанное с некоторой долей критики и пробуйте что-нибудь новое, если считаете, что это будет работать. Достаточно скоро вы обнаружите, получится это или нет, когда протестируете самостоятельно Web-страницу на ряде браузеров (что будет показано дальше в этой лекции).