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

15

27646
10-12-2010

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

1. Регулируйте межстрочное расстояние (интерлиньяж)
Правильное межстрочное расстояние может существенно улучшить общую читаемость текста. Читателю проще удерживать взглядом линию текста и не путаться в строках. Маленькое расстояние вызывает острое чувство дискомфорта. Следует также помнить, что разные шрифты требуют разного межстрочного расстояния, в частности из-за параметра высоты текста.
11 базовых советов по работе с текстом для улучшения типографики сайта

2. Регулируйте межбуквенное расстояние
Межбуквенное расстояние (трекинг) сдвигает или раздвигает все буквы на одну и ту же величину, тем самым задавая плотность текста. Чем меньше шрифт, тем свободнее друг от друга должны располагаться буквы. И наоборот, чем крупнее шрифт, тем плотнее должен быть набор.
11 базовых советов по работе с текстом для улучшения типографики сайта

3. Регулируйте кернинг
Межбуквенное расстояние при трекинге не всегда одинаково хорошо смотрится на всех парах букв. Могут появиться либо дырки, как между Г и А, либо, наоборот, слипание букв, как между i и l. Расстояние между такими парами надо регулировать вручную. Особенно это касается крупных текстов.
11 базовых советов по работе с текстом для улучшения типографики сайта

4. Ограничивайте длину строки
Оптимальная длина строки для нормального восприятия находится в диапазоне 50-60 символов. Если длина строки больше, то человек вынужден поворачивать голову, чтобы прочитать конец строки. Если длина слишком большая, то лучше изыскать альтернативные варианты, типа колонок.
11 базовых советов по работе с текстом для улучшения типографики сайта

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

6. Используйте шрифт с засечками для больших текстов
Шрифты с засечками (Serif fonts) более удобны для чтения больших объемов текста. Это происходит потому, что взгляд как бы цепляется за засечки и более комфортно передвигается по строке и глаза меньше устают.
11 базовых советов по работе с текстом для улучшения типографики сайта

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

8. Учитывайте контрастность цветов.
Цвет фона и цвет текста не должны сливаться. Это увеличивает нагрузку на глаза и повышает их утомляемость. Цвета фона и текста должны различаться минимум на 50% оттенков. Все что меньше ухудшит читаемость текста.
11 базовых советов по работе с текстом для улучшения типографики сайта

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

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

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

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=2321
  • Получать обновления:

  • Поддержать DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Комментариев 15 комментариев

Хороша статья, хороша! 😉

ОтветитьОтветить

@Oleg Mykhailenko:
Спасибо! Старалась 🙂

ОтветитьОтветить

Как раз в первом блоге с выравниванием текста по центру я и увлеклась, решила по глупости, что так более интересно. 🙂
Поэтому, спасибо, Наташа, очень нужные рекомендации!

ОтветитьОтветить

Типографика, как целое искусство. Ей нужно учиться, как рисованию или математике.
Статья понравилась!:)

ОтветитьОтветить

@Maria Trudler:
Пожалуйста Маша! Я сама давно знала, что с центральным выравниванием надо поаккуратней. А когда переводила эту статью, то выяснила почему. Все оказалось просто! Неровный край такого текста очень неудобен для чтения 🙂

@Onegai:
Абсолютно согласна! ))

ОтветитьОтветить

Шрифт с засечками для текста хорош при печати, но не на экране монитора.

ОтветитьОтветить

@Sanx:
Ну это кому как 🙂

ОтветитьОтветить

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

ОтветитьОтветить

@TRSteep: да насчет колонок, они хороши если это отдельные тексты, но когда единый текст бьют на колонки читать, наоборот — не удобно! лучше уж головой крутить (но тоже сильно, для этого и есть отступы по краям)

ОтветитьОтветить

@TRSteep:
А о мелочах забываешь потому что торопишься быстрее закончить. Сама замечала такое.
А про колонки — да, для отдельных текстов удобно. Хотя например когда жж читаешь, очень неудобно головой крутить ))

ОтветитьОтветить

Просто отличная статья!!!)))в закладки!пригодится всегда!

ОтветитьОтветить

@Сергей:
Спасибо! ))

ОтветитьОтветить

@Onegai: Ох, согласна! Вот найти бы хорошие курсы!

ОтветитьОтветить

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

ОтветитьОтветить

@Юлия:
Спасибо вам большое за ваше внимание!
А про информационный шум — да, сейчас как раз тенденция такая, чтобы было достаточно просторно и свободно, и поменьше скученности. Тем более на больших экранах скученность не очень привлекательно смотрится ))

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

58 queries in 0,462 seconds.