Выбор шрифта для веб сайта.

Оглавление

1. Вступление
   1. Общие сведения. Термины. Важность подбора шрифта.
   2. История шрифта.
   3. Разновидности шрифтов.
2. Семейства шрифтов. Гарнитуры. Стандартные шрифты.
3. Начертание шрифта.
4. Ширина шрифта.
5. Наклон шрифта.
6. Высота шрифта. Кегль.
7. Направление шрифта.
8. Интерлиньяж - расстояние между строками.
9. Цвет шрифта.
10. Выравнивание шрифта.
11. Заключение. Рекомендации по выбору шрифта для веб сайта.

1.1. Вступление. Общие сведения. Термины. Важность подбора шрифта.

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

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

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

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

Шрифт - (нем. Schrift, от schreiben - писать), это графическая форма знаков алфавитной системы письма. Проще говоря, внешний вид букв.

Семейство шрифта - (категория шрифта), это основная группа шрифта. Например, Serif, Sans-Serif, Monospaced, Script, Decorative.

Гарнитура шрифта - комплект шрифтов одного рисунка, но разных размеров (кеглей) и начертаний. За каждой Г. закрепляется свое название. (Издательский словарь). Например, Times, Arial.

Начертание шрифта - графическая разновидность шрифта в пределах одной гарнитуры, различаемая по плотности (ширине) символа (нормальное, узкое, широкое Н. ш.), по постановке (наклону) символа (прямое, курсивное…)

Кегль шрифта - условный размер шрифта; расстояние от нижней части строчной буквы р до верхней части заглавной буквы Р. Измеряется в пунктах: 1 пункт = 0.35 мм…

Интерлиньяж - междустрочный пробел, расстояние между строками. Увеличенный И. повышает удобочитаемость и красоту набора.

1.2.Вступление. История шрифта.

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

Не вдаваясь в подробности, можно выделить основные этапы развития шрифта:

• Пиктография.
• Клинопись.
• Иероглифы. Шрифт включал до 500 знаков.
• Иератический шрифт образовался на основе иероглифов. В результате быстрого написания изображения были очень упрощены и изменены.
• Финикийский шрифт состоит из 22 знаков, соответствующих согласным звукам. Гласные звуки произносились, но не писались. Направление письма справа налево. Возникновение этого вида письма не выяснено. Знаки финикийского письма целиком были переняты греками.
• Греческий шрифт. Как и финикийский, состоит из заглавных букв. Знаки, обозначавшие финикийские согласные, чуждые греческой фонетике, греки использовали для обозначения гласных звуков.
• Латинский алфавит основан на греческом с добавлением знаков для отсутствовавших в греческом языке звуков.
• Прямой прописной шрифт, квадратный шрифт - книжный шрифт, написанный пером, которое держали в горизонтальном положении.
• Шрифт Рустика («крестьянский»), писался пером в наклонном положении. Буквы писались быстрее теснее, и поэтому шрифт отличался тонкими вертикальными прямыми штрихами и жирными засечками-серифами (прописной шрифт).
• Фрактура - придворный шрифт времен императора Максимилиана. Для этого шрифта характерны хоботообразные завитки элементов прописных букв и спиральные росчерки в духе рукописных шрифтов.
• Украшенные и орнаментированные шрифты служили титульными и выделительными. В 19 веке разработано множество новых шрифтов. Новые рисунки, разработанные на основе исторических шрифтов после 1800г., характеризовались холодным и бездушным начертанием.
• Готический шрифт. Собирательное название наборных шрифтов, по рисунку имитирующих средневековые рукописные почерки ширококонечным пером, распространенные в XIII - XVI веках главным образом в северной Европе. Их буквы характеризуются, как правило, узкими пропорциями, сильным контрастом, изломами штрихов, большой насыщенностью и высокой декоративностью.

1.3.Вступление. Разновидности шрифтов.

Шрифты можно выделить в группы по различным критериям.

По категории - это Serif, Sans-Serif, Monospaced, Script, Decorative (Fantasy).

По гарнитуре. Например, Times, Century, Garamond (Serif); Arial, Verdana, Tahoma (Sans-Serif); Courier, Courier New (Monospaced).

По начертанию. Для каждого шрифта есть свое начертание. Например:

• Times - Roman (прямое), Italic (курсив).
• Arial - Regular (обычное), Bold Italic (полужирный курсив).
• Courier - Regular, Oblique (наклонное).

2. Семейства шрифтов. Гарнитуры. Стандартные шрифты windows.

Теперь рассмотрим подробнее все эти категории.

Serif - стандартная, знакомая многим группа шрифтов. Отличительная особенность - засечки на буквах.

Sans-Serif - распространенная в веб дизайне группа шрифтов. Характеризуется закругленностью букв и отсутствием засечек.

Monospaced (моноширинные) - в этой группе каждая буква шрифта имеет одну и ту же ширину. Эти шрифты напоминают шрифт печатных машинок.

Script - это все шрифты похожие на рукописные.

Decorative (Fantasy) - группа шрифтов со специальными декоративными элементами, такими, как точки, штрихи и другими особенностями.

Cursive - группа шрифтов со наклонным написанием.

За каждой гарнитурой закрепляется свое название. В Интернет, как правило, используется ограниченное количество гарнитур. Это связано, в первую очередь, с тем, что с операционной системой (Windows) в комплекте устанавливается определенный набор популярных (стандартных) шрифтов. При разработке сайта крайне необходимо учитывать этот факт. Устанавливая для текста нестандартный, но красивый шрифт, Вы рискуете получить на мониторе клиента совершенно непредсказуемый результат, так как при отсутствии заданного шрифта, он заменяется браузером на другой.

Стандартные шрифты для платформы Windows:

• Arial
• Arial Black
• Book Antiqua
• Bookman Old Style
• Comic Sans MS
• Century Gothic
• Courier
• Courier New
• Franklin Gothic Medium
• Georgia
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotype
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

3. Начертание шрифта.

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

Насыщенность шрифта - отношение основных штрихов к высоте прямого знака. Светлое, нормальное, жирное.

Постановка знака - прямой, наклонный, курсив.

4. Ширина шрифта.

Пропорция шрифта. Отношение ширины и высоты знаков шрифта. Измеряется, как правило, по внешним контурам основных штрихов знака «Н». Изменения этого отношения образуют сверхузкое (Extra Condensed), узкое (Condensed), нормальное (Normal), широкое (Expanded), сверхширокое (Extra Wide) начертания. Могут быть и другие степени изменения пропорций.

5. Наклон шрифта.

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

6. Высота шрифта. Кегль.

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

Высота знаков измеряется в пунктах (это пришло из типографики. Высота одного пункта равна 0,35 мм) или в пикселях. Также существуют другие единицы измерения, которые практически не используются.

7. Направление шрифта.

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

8. Интерлиньяж - расстояние между строками.

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

Сжатый интерлиньяж.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Нормальный текст.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Увеличенный интерлиньяж.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

9. Цвет шрифта.

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

Нужно всегда помнить о соблюдении контрастности, иначе текст невозможно будет читать.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

10. Выравнивание шрифта.

Существует 4 типа выравнивания текста:

• По левому краю.

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

• По центру.

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

• По правому краю.

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

• По ширине экрана.

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

11. Заключение. Рекомендации по выбору шрифта для веб сайта.

В заключении подведем некоторые итоги.

При всем многообразии шрифтов, созданных в тысячах студий и тысячами дизайнеров, необходимо учитывать, что есть стандартные шрифты, установленные вместе с операционной системой (Windows). И разработчику сайта, и заказчику рекомендуется ограничивать свой выбор ими, иначе текст на мониторе посетителя сайта может оказаться совершенно другим. Также бытует мнение, что применение стандартных шрифтов - признак безвкусицы и непрофессионализма. Нет, нет и еще раз нет! Все дело в том, что человек, работающий в офисных приложениях (например, MS Word) просто напросто привык к шрифту Times New Roman, который является шрифтом, установленным по умолчанию. Стандартные шрифты красивые, выверенные и ничуть не безвкусные, в отличие от большинства "доморощенных".

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

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

Шрифты категории Serif являются шрифтами, установленными по умолчанию. Они очень удобны для чтения, компактны и привлекают внимание своими засечками, которые "держат" строку. Но для текстов с маленьким кеглем лучше не использовать эту категорию шрифтов.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Шрифты Sans-Serif выделяются отстутсвием засечек на буквах. Многие веб дизайнеры используют шрифты этой категории. Хотя они не всегда подходят дизайну

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Шрифты категории Cursive не требуют особого представления.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Шрифты Monospace отличаются одинаковой шириной всех символов. Шрифт по своему виду непоминает шрифт наборных печатных машинок.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Во время написания статьи были использованы различные источники и собственный опыт. Выражаю благодарность ресурсам: Издательский словарь, словарь терминов компании ParaType и всем читателям!

Рустам aka _malysh_, дизайнер студии TopCreative