Типографика. Тема 4

Иконографика. Верстка текстовых блоков.

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

Кегль - Кегль (size) или размер, шрифта определяется его высотой, измеренной в типографских пунктах (point или pt): 12 пунктов = 1 пике, 6 пик одному дюйму.

Насыщенность - Насыщенностью называется визуально воспринимаемый цвет шрифта, зависящий от толщины его штрихов. Непрерывный ряд начертаний составляют: светлое (light), нормальное (regular, book), полужирное (demi), жирное (bold), темное (heavy), черное (black) и сверхжирное (extra bold).

Интерлиньяж - Это расстояние между базовыми линиями соседних строк.

«Правило внутреннего и внешнего» — базовый принцип типографики, работающий на всех уровнях от буквы до разворота. внутреннее ≤ внешнее

Некоторые рекомендации:

1) Правильно создавайте иерархию в тексте Создать правильную иерархию в тексте можно разными способами, но самым верным и правильным из них будет — это размер текста.

2) Не делайте текст мелким У кого-то зрение идеальное, у кого-то похуже, поэтому делайте текст таким, чтобы было комфортно его воспринимать всем людям. Я рекомендую 14-15 шрифт.

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

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

5) Расстояние между строк Если делать расстояние между строками слишком маленьким, это ощутимо ухудшить восприятие текста. Делайте его примерно таким, как показано на примере справа. Если вы работаете в фотошопе, то выставляйте для основного текста “antialiase: none” а междустрочное 16-18 пикселей (или 120% от размера текста)

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

7) Не делайте строки слишком длинными Лучше всего текст воспринимается, когда он не слишком длинный и не слишком короткий. Самое оптимальное – это будет, примерно, 60-70 символов текста в ширину.

8) Не мешайте вместе serif и sans-serif шрифты. Т.е. это шрифты с засечками и без.(serif переводится как засечка, sans – без) Т.е. используйте на странице или те, или другие.

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

10) Пишите короче и используйте указатели