Ссылки по теме

Компьютерный шрифт - Википедия

Определить шрифт - WhatTheFont

Ководство §134 - ArtLebedev

✑ WEB-типографика

Базовые принципы веб типографики

Давайте рассмотрим такие вещи, как стандартные шрифты поддерживаемые браузерами: 

1. Тип шрифта

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

На данный момент существует две главные группы, на которые делятся все шрифты: serif и sans-serif. Основная разница между ними продемонстрирована на рисунке:

serif

Типы шрифтов serif и sans-serif

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

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

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

2. Общепринятные веб шрифты

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

body {
font-family: verdana, “trebuchet MS”, helvetica, sans-serif;
}

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

Verdana - является самым популярным представителем sans-serif шрифтов, используемых сегодня в Интернете.

verdana

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

Trebuchet является представителем другого вида шрифта. Данный шрифт был разработан Висентом Коннарем в 1996 году и является самым общепринятым веб шрифтом.

trebuchet

Благодаря четким линиям и блокам, шрифт Threbuchet достаточно эффективен для мелких размеров символов.

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

helvetica

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

Последнее правило в CSS sans-serif определяет, что как минимум, текст отображаемый всеми вышеперечисленными шрифтами будет правильно отображаться у посетителей вашей веб страницы.

3. Хороший экранный шрифт

К хорошем экранным шрифтам можно отнести шрифты со следующими характеристиками:

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

good font

Выбор типа шрифта - достаточно ответственный этап. Шрифт - это часть вашего проекта. Если вы разрабатываете веб узел для банка или серьезной компании, нереальным будет использование шрифта наподобие Comic Sans, шрифт должен быть подобран строгим, соответствующий тематике вашего сайта.

4. Размер шрифта

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

font size

Традиционная иерархия размеров текста различных объектов в CSS представлена следующим образом:

h3 { font-size:16px; }
h4 { font-size:12px; }
p { font-size:11px; }

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

5. Акцент

Одним из способов акцентирования внимания на чем то важном в тексте является выделение ключевых слов среди основного текста. Существуют несколько способов выделения ключевых слов:

  • Bold (жирный). Самый популярный метод акцентирования внимания. Как правило, жирным текстом выделяют заголовки или важные слова в тексте.
  • Italics (наклонный). Курсивный текст плохо выглядит на экранах с маленьким разрешением. Не следует также применять курсив в формах. Однако он замечательно подходит для цитирования фраз или составления списка литературы или периодических изданий.
  • Underlining (подчеркнутый). Использование подчеркнутого текста для выделения ключевых слов является плохой идеей. Сетевые правила говорят, что подчеркнутый текст является ссылкой, поэтому не используйте его без основания, если не хотите ввести посетителей в заблуждение.
  • Цвет. Использование цвета для выделения также не является хорошей идеей. Акцентирование на тексте при помощи цветных слов было популярным в прошлом веке, в настоящее время профессиональные веб дизайнеры не используют данный метод выделения.
  • Большие буквы. Никогда не используйте длинные предложения, написанные заглавными буквами. Это будет расценено как плохими манерами в оформлении страницы, а также понизит читабельность остального текста.

6. Расстояние между строками (Line Spacing)

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

line spacing

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

 

7. Расстояние между буквами (Letter Spacing)

Как правило, в основном тексте использования CSS для изменения расстояния между символами не является хорошей идеей. Так как при этом, то что отобразит ваша страница при помощи FireFox, необязательно будет иметь тот же вид под Internet Explorer или Safari. Однако использование данного свойства для коротких заголовков в небольших колонках является достаточно эффективным для сохранения баланса страницы.

letter spacing

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

8. Расстояние между словами (Word Spacing)

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

9. Границы (Margin) и выравнивание (Alignment)

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

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

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

alignment

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

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